-
writing-mode与垂直居中 writing-mode:vertical-lr查看全部
-
百分比margin的计算规则是根据父容器的宽度计算的。查看全部
-
padding:50px 非chrome底部无留白查看全部
-
margin-start查看全部
-
margin-collapse查看全部
-
margin无效 1、inline水平元素的垂直margin无效 2、margin重叠 3、display:table-cell时margin不起作用 4、absolute与margin 绝对定位元素非定位方向的margin的margin值"无效" 为父容器设置relatvie后，absolute的margin值会起作用（因为absolute时margin是脱离文档了） 5、鞭长莫及导致margin无效 <div > <img src="abc.jpg" > <div style ="overflow:hidden; margin-left:254px;"></div>//图片的margin值移动是相对于整个父容器的，而不是相对于图片的边缘，所以改变较大时才能有效 </div> 6、内联特性导致margin无效 margin负值小到一定程度不会再起作用，因为 ###内联特性：相对于基线对齐，margin超过数值部分不起作用。查看全部
-
一、margin负值可以设置等间距列表布局 当列表ul没有设定width，只是普通的block水平 可以设置margin可以改变其尺寸 正值变小margin-right:+20px; 负值变大margin-right:-20px; 二、margin负值下的等高布局， 利用margin可以改变元素占据的空间 .box{ overflow:hidden;//所以当margin-bottom:-60px;时背景不显示 } .child-orange, .child-green{ margin-bottom:-600px; /改变元素占据的空间 padding-bottom:600px;//使用padding属性背景颜色开始显示 } .child-orange{ float:left; background:orange; } .child-green{ float:left; green; } 但是，该方法需要通过父级元素的overflow显示出来， 三、margin负值下的两栏自适应布局 利用了元素占据空间margin移动的特性；与relative相比，relative原本占据的空间不会发生任何变化。 不足：DOM渲染顺序与视觉顺序不符合 <div style="float:left; //外层元素一样浮动，避免坍塌 width:100%"> <p style="margin-right:170px;>文字说明...</p> </div> <img width ="150" > //虽然width为150px，但是向左偏移-150px，所以对右边的空白无影响. 使用margin负值，这里需要调整HTML结构，构建一个宽度100%的浮动元素，左浮动，后面跟随的图片也是同方向浮动，但是，margin-left负值自身的宽度大小，配合<p>元素margin-right留下的补间空白，实现自适应效果。查看全部
-
margin:auto 如果一侧定值，一侧auto，auto为剩余空间大小； 如果两侧均是auto，则平分剩余空间; div{ width:500px; margin-right:auto; margin-left:auto; background:..} 而当margin: 0 auto； 时图片不居中， 是因为：因为此时图片是inline水平，就算没有width，其也不会占据容器。 只需设置 img的的display:block，就算没有width，也会占据整个容器。 内外元素均设置height，无法垂直居中？ .father{ height:200px; background:#f0f3f9;} .son { height:100px; width:500px; margin:auto;} 该son元素无法垂直居中， 原因是：因为当son设置高度height:100px，本身不会填充，没有所谓的剩余空间，所以margin:auto也不会分配。 在垂直方向上我们怎么使用margin实现居中？ 1、writing-mode与垂直居中 .father{height:200px; width:100%; writing-mode:vertical-lr;} .son { height:100px; width:500px; margin:auto; } 2、绝对定位元素的margin:auto 居中 .father{ height:200px; position:relatvie;} .son{ position:absolute; top:0; right:0; bottom: 0; left:0; width:500px; height:100px;margin:auto;} 当设置son元素的宽度和高度后，原来的absolute自动填充会被强制抵消查看全部
-
可视尺寸-clientWidth margin与可视尺寸：只影响水平方向上的尺寸； 适应条件： （1）元素没有设置宽高，即没有设置width和height值 （2）适用于普通的block元素； 可以实现一侧定宽的自适应布局； margin与占据尺寸： 1. 适用于block和inleine-block 元素 2. 与height和width无关 3. 水平和垂直方向均可 利用这一特点可以处理的问题：容器的上下留白 等高布局查看全部
-
margin重叠计算口诀： 正正取大值 正负值相加 负负最负值 margin重叠的意义是？？ 1、连续段落或列表之类，如果没有margin重叠，首尾顶间距会和其他兄弟标签1：2关系，排版不自然； 2、web中任何地方嵌套或直接放入任何裸div，都不会影响原来的布局 3、遗落的空任意多个<p>元素，不要影响原来的阅读排版。查看全部
-
空block元素margin重叠且他条件 1、元素没有block设置 2、元素没有padding值 3、里面没有inline元素(空div可以有) 4、没有height，或者min-height .son { margin:1em 0;} 假如 1、元素添加border设置<div ></div> 2、元素添加padding值{padding:1px;} 3、添加inline元素 4、添加height或者min-height值，则破坏了空block元素重叠查看全部
-
干掉margin-bottom重叠 1... 2... 3... 4... 5、height:100px;查看全部
-
干掉margin-top重叠 overflow:hidden; border-top:5px solid #ff4136; padding-top:1px;  查看全部
-
margin重叠通常特性 1、只发生在block水平元素上(不包括float和absolute元素) 2、不考虑writing-mode，只发生在垂直方向(margin-top/margin-bottom) margin重叠3种情境 1、相邻的兄弟元素 p {line-height :2em; margin: 1em 0; background:#f0f035;} <p>第一行</p> <p>第二行</p> 2、父级和第一个/最后一个子元素 .father {background:f0f3f9;} <div class="father"> <div class="son" ></div> </div> 3、空的block元素查看全部
-
如何利用这一特性？ 1、宽高自适应矩形 .box{background-over:olive; overflow:hidden} .box>div{margin ：50%} margin百分比是根据宽度来的， 疑问？50%应该为 margin:top,bottom 50%，所以相加应该为100%;查看全部
举报
0/150
提交
取消