文档流方向
inline 元素：从左到右，会跨两行。
常见的元素有：span，a，strong，em等。
block 元素：从上到下，独占一行。
常见的元素有：div，p，h1～h6，form，ul，ol等。
inline-block 元素：从左到右，不会跨两行。
常见的元素有：img，input等。
三种元素的宽高设置
inline 元素不接受宽度设置。
inline 元素的高度是由行高间接确定的，行高会继承。
block 元素的宽度默认是 auto，不一定是 100%，能有多宽占多宽，可以设置宽度，永远不要设置宽度为 100%。
block 元素的高度由文档流元素高度总和决定的，可以设置高度。
如果 block 元素中没有内容，高度为 0。
inline-block 元素的宽度能有多窄占多窄，可以设置宽度。
inline-block 的高度和 block 的高度一样，可以设置高度。
内容溢出
内容比宽高大，就会溢出。
内容溢出可以设置 overflow 属性。
overflow: auto; 灵活显示。
overflow: scroll; 全都显示，会出现滚动条。
overflow: hidden; 溢出部分隐藏。
overflow: visible; 直接显示溢出部分，不会出现滚动条。
也可以单独设置 x 或者 y 的 overflow 属性，overflow-x 或 overflow-y。
如何让元素脱离文档流
position: absolute; 或者 position: fixed;。
float: left;。
脱离文档流，不计算宽高。
盒模型
CSS 盒模型有两种，content-box 和 border-box。
语法：
box-sizing: border-box; 默认 content-box。
content-box
width 和 height 为 content 的宽高。
border-box
width 和 height 为 content ＋ padding ＋ border 的宽高。
外边距合并
当上下相邻两个 block 元素相遇，上边元素设置的margin-bottom，下边元素设置 margin-top 时，中间的间距不是两者之和，而是取两者之间的最大值，这称为外边距合并，也叫外边距塌陷。
第一个子元素和最后一个子元素和父外边距上下重叠。
外边距上下合并，左右不会合并。
取消外边距合并
1、添加 pardding，border。
2、设置 overflow: hidden;。
资料来源：饥人谷
网友评论