您现在的位置是:主页 > 产品展示 > 负外边距

负外边距

时间:2017-10-09 18:47  来源:网络整理  阅读次数: 复制分享 我要评论

包括第一天和到底一天的次要能源资源 baidu-ife 的 task0001,这屈尊做某事知和应验的负获得。尽管如此在这担任外场员通常缺乏过于的关联,但在线、书中具有大量的的传达,我们的借此机会总结。。

基础知

抄书、稿件和贴不风趣,有一些视频博客。

CSS 奇和负获得-壮大的创造的规划,本文从负获得率在普通文献的印象、负面影响的左一直距元宽度、印象负获得的漂元素、负获得的相对状态元素S的印象,粗浅易懂。

由浅入深对 margin 属性,这说的是深。

我知情你不知情的负面 Margin,这时偏技击术。

负值之美:在闲置的的网页规划说话中肯用功,这时也偏技击术。

规划

三栏规划,宽度的左、右正规军,腰部教派的宽度与逛商店的人的宽度和AD的找头。

class="wrapper">class="main">class="content">

main办法一

class="sub">

sub

class="extra">

extra

div.containerFirstdiv.wrapper{height:200px;text-align:center;}div.containerFirstdiv.main{float:left;width:100%;height:200px;background-color:#3F5057;}div.containerFirstdiv.maindiv.content{height:200px;margin:0190px;color:white;}div.containerFirstdiv.sub{float:left;width:190px;height:200px;margin-left:-100%;background-color:#C6D38E;}div.containerFirstdiv.extra{float:left;width:190px;height:200px;margin-left:-190px;background-color:#A1C5BB;}

负合住的应用 漂元素 的印象。将 放在两边的逛商店的人。而 main 有每一 ,设置其 margin-leftmargin-right 的宽度。大约做的意思是使 合格的的显示容量,而不会的达到 内。

请点击 DEMO,在所示的办法

两列规划,每一正规军宽度的激进分子教派、精确的教派宽度与在BR粘性找头的宽度找头

class="wrapperFirst">class="aside">

aside

class="main">class="content">

main

div.wrapperFirstdiv.aside{float:left;width:360px;height:300px;background-color:#C9EFBA;}div.wrapperFirstdiv.main{width:100%;height:300px;margin-right:-360px;background-color:#F5D999;}

负合住的应用 漂元素 的印象。

请点击 DEMO,在所示的办法

知情是大约的规划,不外对 加法最大宽度。

三栏规划等。

class="wrapper">class="box">
class="box">class="box">
*{padding:0px;margin:0px;}div.wrapper{width:100%;overflow:hidden;}div.box{width:250px;padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:520px;margin-bottom:-500px;margin-left:20px;float:left;display:inline-block;color:white;background-color:#0767c8;}

把列的 padding-bottom 关闭较大的值(由于不知情经过的长多大的差,用于宣布中立 margin-bottom 负带开动容量。到底相配 超出额:人的皮肤 ,使跌价中长柱,三栏规划等。。

请点击 DEMO

状态

长度和铅直提取岩芯

class="wrapper">class="inner">
div.wrapper{position:relative;height:500px;width:500px;margin:0auto;background-color:black;}div.inner{position:absolute;left:50%;top:50%;width:300px;height:300px;margin-left:-150px;/*  宽度的半场 */margin-top:-150px;/* 高等的的半场 */background-color:white;}

用相对状态将 到指状态置 的提取岩芯,和设置 margin-topmargin-left 的负值,回到提取岩芯,算是抵达腰部的印象长度。

请点击 DEMO

从向右转舵的列表中删去

class="wrapper clear">
*{padding:0px;margin:0px;}div.wrapper{width:590px;margin:20pxauto;border:1pxsolid#0767c8;overflow:hidden;}div.wrapper.minusul{margin-right:-10px;}div.wrapperli{float:left;display:inline-block;width:90px;height:90px;margin-bottom:10px;margin-right:10px;background-color:#0767c8;}.clear:after{content:" ";display:table;clear:both;}

负合住的应用 元素的宽度 的印象。为 ul 设置负右缘,加法的宽度,让 li 把到底的合适的计划那一边的使渐进 的边框,相配 超出额:人的皮肤 ,移动从向右转舵列表的印象

请点击 DEMO

有3个。删去到底每一相像的人应用列表 li 元素的 border-bottom。同一亦:加法(marin-bottom 负)-突出hidden

安心的走快

  • 对两栏规划的达到预期的目的,每一正规军宽度的激进分子教派、精确的教派宽度与在BR粘性找头的宽度找头”有很多办法。请点击 DEMO

    尽管如此瞧很使不整洁,但这些办法究竟屈尊做某事两个点:一是方式使 aside 在进度表的外景,每一是 aside 在进度表的外景的境遇下,使得 main 合格的的显示容量。前者可以应用漂、相对状态,后者可以 main 负合住的应用,最好还是 content 应用 margin-left

  • 在CSS王牌影响中提到:在合格的流量的块级元素,教派胜任父元素 width。换句话说,margin-leftborder-leftpadding-left widthpadding-rightborder-rightmargin-right 这 7 个属性的值加在一起不可避免的是元素计入块的宽度。

    在这 7 个属性中,仅 3 每一属性可以设置为 auto 、元素的容量 width,左一直距。

超过。

这时并置: