css文档流&盒模型

1.文档流（Normal Flow）  

文档中元素流动方向。块元素（block），内联元素（inline），内联块（inline-block）等元素正常的流动方向，即标签流动方向。

图示：

1.display: inline；（内联元素：例span）

• 流动方向：从左到右，到达最右边才会换行，元素会被拆分开
• 宽度：内部inline元素的宽度和，不能用width指定
• 高度：由line-height行高间接确定，与height无关

注：inline元素实际高度不由padding，height决定。padding只是增加了span的可视高度，它的实际高度却没有改变。

关于高度--源码：JS Bin - Collaborative JavaScript Debugging

深入阅读：深入理解 CSS：字体度量、line-height 和 vertical-align - 知乎

2.display: block；（块元素：例div）

• 流动方向：从上到下，每个另起一行
• 宽度：默认自动计算宽度，可以用width指定
• 高度：由内部文档流元素决定，可以设置height

注：block元素宽度默认style='width: auto;'（自动宽度），能有多宽展多宽，而不是style='width: 100%;'（满宽度）。

脱离文档流元素的高度并不会被block元素所包括。

3.display: inline-block；（内联块/行内块）

• 流动方向：从左到右，到达最右边才会换行，但是每个元素成块不会被拆分开
• 宽度：内部inline元素的宽度和，可以用width指定
• 高度：由内部文档流元素决定，可以设置height

我的页面：JS Bin - Collaborative JavaScript Debugging

小结源码：JS Bin - Collaborative JavaScript Debugging

4.小结

2.overflow溢出

原因：当内容大于容器，出现溢出

属性值：

• visible   默认值，显示溢出内容
• hidden   隐藏溢出内容
• scroll     出现滚动条展示内容
• auto    如果溢出则出现滚动条，不溢出直接显示（自动）

注：overflow可以分为overflow-x，overflow-y。内联元素默认只展示显示的区块。

我的页面：JS Bin - Collaborative JavaScript Debugging

3.盒模型

两种盒模型：

• content-box，内容盒，内容是盒子边界
• border-box，边框盒，边框是盒子边界

图示： 

 宽度width：

• content-box：width = content（内容宽度）
• border-box：width = content + padding + border（外边框间宽度）

注：height同理，我们一般使用border-box。

我的页面：JS Bin - Collaborative JavaScript Debugging

4.margin合并

1.合并情况

• 兄弟margin合并。兄弟上下margin会产生合并，margin值兄弟间为较大的值

• 父子margin合并。父子之间上下margin会产生合并，margin值为父子间较大的值 

 

注：margin只会产上下合并，左右并不会合并。父子间合并是第一个孩子和父亲margin-top合并，最后一个孩子和父亲margin-bottom合并。

我的页面：JS Bin - Collaborative JavaScript Debugging

2.取消合并

取消兄弟合并：（对孩子元素添加）

• display: inline-block;

取消父子合并：（对父元素添加）

• 添加border，例：border-top: 3px solid black;
• 添加padding，例：padding: 1px;
• 添加overflow: hidden;
• 添加display: flex;

5.常见基本单位

长度单位：

• px像素
• em相对自身font-size倍数。例：font-size=20px; 3em=3*20=60px
• rem
• 整数
• 百分数
• vw，vh

颜色：

• 英文颜色名，例：green，transparent透明
• 十六进制，#000（black黑色）
• RGBA颜色，rgb(0,0,0)或rgba(0,0,0,1)。A（透明度通道Alpha）是否透明取值在0~1之间（0完全透明~1完全不透明），默认值为1。
• hsl颜色，hsl(360,100%,100%)。色相-饱和度-亮度（hue-Saturation-Lightness）