行内元素: 无法用margin和padding控制垂直方向排版。垂直方向用line-height和vertical-align排版 块级元素，如果加了上下padding，里面内容会上下移动 而行内元素，即使加了上下padding，文字也不会移动 visibility 和 display 用visibility:hidden控制的元素，消失后原位置还在（留出一片空白），下面的元素不会挤上来 而用display:none 的元素，原先的位置也会消失。改成display:block后，下面的元素会被挤下去 常用的下拉菜单，菜单使用display:none, display:block+position:absolute 。使用display:none可以使它隐藏时位置不会被空出来，而在显示它的时候使用绝对定位可以防止它下面的元素被它挤下去（绝对定位元素脱离正常流，不会对流内元素产生影响）
<div class="container"> <p> 这是一行字 </p> <ul> <li>item 2</li> <li>item 3</li> </ul> </div> <p> 这是下面的字 </p> ul{ display:none; } div.container{ position:relative; } div:hover ul{ background:white; padding:0; margin:0; display:block; position:absolute; top:100%; //top和bottom百分数相对于包含块的高度，left和right相对于包含块宽度。top:100%可以使下拉菜单刚好出现在包含块下面 } 绝对定位 脱离正常流 相对于最近的非 static 祖先的 padding box 定位 不会对流内元素布局造成影响 可以有 margin，但不会折叠 <figure> <img src="http://s3.qhimg.com/static/65796cb8649a8770/d.jpg" width="512" alt="daisy"> <figcaption>图片标题</figcaption> </figure>ul{ display:none; } div.container{ position:relative; } div:hover ul{ background:white; padding:0; margin:0; display:block; position:absolute; top:100%; //top和bottom百分数相对于包含块的高度，left和right相对于包含块宽度。top:100%可以使下拉菜单刚好出现在包含块下面 } 为了让标题放在图片最下面，可以让figure变为relative，图片absolute，bottom偏移量为0。 因为绝对定位元素宽度默认情况下自适应内容宽度， 为了让标题背景充满图片且标题前后有内边距，有两种方法
1. box-sizing:border-box,; width:100%; padding:0 2px; // 如果不将box-sizing指定为border-box，在指定了width为100%后又指定padding，最后会超出背景图
figure { width: 512px; position: relative; } figure img { display: block; } figcaption { position: absolute; bottom: 0; width:100%; box-sizing:border-box; background: rgba(0,0,0,0.3); color: #fff; font-size: 14px; line-height: 2; padding: 0 1em; } 2. left:0; right:0; width:auto;(不写width也行) figure { width: 512px; position: relative; } figure img { display: block; } figcaption { position: absolute; bottom: 0; left:0; right:0; background: rgba(0,0,0,0.3); color: #fff; font-size: 14px; line-height: 2; padding: 0 1em; } 最后效果图:
浮动
最左不会超出包含块（最近块级祖先元素）内边距
脱离正常流，后面的块级元素会忽略它，但文本会环绕它
本来浮动元素只是在其包含块内浮动，不会影响其他不属于其包含块的元素，但由于脱离了流，它的包含块不再包含它，包含块高度也就不会包含它的高度，因此它可能会超出包含块下边界，从而盖住其他块中元素或使其他块中的文本也环绕它。
<div class="clear"> <img src="img\yinyue.jpg" alt="music" width="100px;" /> </div> <p>新的一个块级元素</p> img{ float:left; } .clear{ border:1px solid green; }
清除浮动影响方法有：
1.在父元素后追加一个块级元素，使该div的clear为both
.clear::after{ content:""; display:block; clear:both; }2.使父元素变为BFC（BFC计算高度会包含浮动子元素）
BFC相关： 触发BFC：float、absolute、overflow（除了visible）、display（table-cell/table-caption/inline-block）
BFC作用：
1.清除浮动。设置了BFC的包含块，计算高度时会加上其浮动子元素高度
2.防止margin折叠。设置了BFC的包含块，不和它子元素的margin折叠（非BFC包含块的第一个子元素设置margin-top时，效果会是整个包含块产生一个margin-top，而不是子元素产生）
设置了包含块BFC后： 3.双栏布局。设置了BFC的块不会被浮动元素影响。BFC区域不会与float box叠加，BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
住：给父元素设置BFC，并不能解决子元素垂直方向margin折叠问题。将子元素设置为浮动元素、inline-block 元素、绝对定位元素才可以。 引用出处：https://webzhao.github.io/fe-camp/
http://blog.sina.com.cn/s/blog_601b97ee0101b94c.html
http://sentsin.com/web/529.html
