-
一、如果要将两端对齐，则添加样式：ul{margin-right:-20px;}，将列表容器宽度变宽。查看全部
-
一、div的margin 1、如果元素设置了width/hegiht，原本应该填充的尺寸被width/ height强制变更，而margin:auto就是为了填充这个变更的尺寸设计的。 div{margin-left:auto;margin-right:100px;}。 2、规则：（1）如果一侧定值，一侧auto，auto为剩余空间大小。 （2）如果两侧均是auto，则平分剩余空间。 二、图片是inline水平，就算没有width，也不会占据整个容器。 三、margin:auto，实现居中，计算后的值不能为负值。 四、writing-mode与垂直居中。 writing-mode:vertical-lr，流为垂直流布局，则会垂直居中。 五、width/height限制了absolute元素自动填满容器。 margin:auto自动平分被变更的尺寸空间。（此特性ie8+）。 .son{position:absolute; top:0; right:0; bottom:0; left:0; width:500px; height:100px; margin:auto;}查看全部
-
六、善用margin重叠 1、（1）一般列表都只写： .list{ margin-top:15px; } 但是，更合理的写法是： .list{ margin-top:15px; margin-bottom:15px; } 写列表或垂直布局时，浏览器会将margin-top,margin-bottom重叠，如果上下都写，最后删除最后一个元素时，margin-bottom也还是生效的。查看全部
-
三、空block元素margin重叠其他条件 1、元素没有border设置。 2、元素没有padding值。 3、里面没有inline元素。 4、没有height, 或者min-height。 四、重叠规则： 1、正正取大值。 2、正负值相加。 3、负负最负值：取绝对值大的那个。 五、为什么会有margin重叠？查看全部
-
一、margin重叠通常特性 1、block水平元素（不包括float和absolute元素）。 2、不考虑writing-mode，只发生在垂直方向（margin-top/ margin-bottom）。 二、margin重叠3种情境 1、相邻的兄弟元素。 2、父级和第一个/最后一个子元素 3、空的block元素。查看全部
-
一、 1、普通元素的百分比margin都是相对于容器的宽度计算的。 2、绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/ absolute /fixed）的宽度计算的。 3、宽高2：1自适应矩形： （1）子div设置margin .box{background:#f00;overfow:hidden;} .box>div{margin:50%;} （2）aSuncat: div本身设置padding .box{background:#f00;overfow:hidden;padding-top:50%;}查看全部
-
一、元素尺寸 1、可视尺寸-clientWidth(标准) 2、占据尺寸-outerWidth(YY) 二、margin与可视元素 1、适用于没有设定width/height的普通block水平元素，不适用于float元素，absolute/fixed元素，inline水平，table-cell元素。 2、只适用于水平方向尺寸。 三、margin与占据尺寸 1、block/ inline-block水平元素均适用。 2、与有没有设定width/ height值无关。 3、适用于水平方向和垂直方向。 四、滚动容器内上下留白：不用padding，用margin。因为如果用padding，在firefox中，上留白起作用，下留白不起作用。查看全部
-
二栏等高布局查看全部
-
居中显示查看全部
-
<style type="text/css"> .box{ width:1200px; margin:auto; background:orange; } .ul{ overflow:hidden;margin-right:-20px; } .li{ width:386.66px; height:300px; margin-right:20px; background:green; float:left;display:inline-block; } </style> </head> <body> <div class="box"> <div class="ul"> <div class="li">列表1</div> <div class="li">列表2</div> <div class="li">列表3</div> </div> </div> </body>查看全部
-
margin当中的普通定位情况下，设定百分比时不论宽高方向都是按照宽度为基准来计算的， 定位的基准则是父元素。 margin当中的绝对定位情况下，设定百分比时也是按照宽度计算，但是是按照祖先元素的宽度。查看全部
-
善用margin重叠,增加布局健壮性查看全部
-
margin与占据尺寸查看全部
-
利用margin实现一侧定宽的自适应布局查看全部
-
margin与可视尺寸查看全部
举报
0/150
提交
取消