行盒、块盒、行块盒简介

CSS盒模型——行盒、块盒、行块盒

三种盒子的排列方式根据页面布局方式的不同会发生变化

常规流

1. 块盒

1. 处于包含块中
2. 独占一行，块盒之间垂直排列
3. 相邻兄弟块盒之间的垂直距离通过margin确定
4. 可以设置content, padding, margin的width, height, top, bottom的值
5. 块盒之间相邻的margin会合并，取值更大的`margin

width的默认值为auto

margin的默认值为0，设置为auto时，margin会自动填满剩余的块盒空间，并且垂直方向与水平方向都会均分

2. 行盒

1. 盒子从包含块的顶端水平、依次排列
2. 只有水平方向上的margin, padding, border起作用，竖直方向上的设置不会在显示上产生效果
3. 行盒的内容盒只与内容的多少有关，设置行盒的width只影响背景的宽度

3. 行块盒

可以简单理解为可以设置宽高的行盒

浮动

浮动元素均为块盒

包含块为父元素的内容盒

• width的默认值为auto，适应内容的宽度
• height的默认值为auto，适应内容的宽度
• margin的默认值为auto，值为0

定位

没有行盒与块盒之分，都是块盒，通过属性控制元素的排列