文档流
文档流又称流式布局,是指在对页面进行修改之前,块级元素和内联元素在页面上的显示方式。元素在页面上的流动方向分为两种,一种是从左往右,到达最右边进行换行;一种是从上到下,每一个元素都另起一行。由此,元素类型被分成了三种,一种是从左往右的inline元素(span),一种是从上往下的block元素(div),还有一种是将上面两种方式相结合的inline-block元素(可以是span也可以是div,样式中加上display: inline-block)。
三种元素在页面上的布局如下图所示:
根据上图我们可以得知,inline元素在一行的最末尾放不下时会将自己截成两半,而inline-block元素则会换行。block元素每个占一行。
宽度:
inline的宽度为内部元素的和,不能用width指定;
block会自动计算宽度,可以用width来指定;
inline-block结合前两者的特点,可以用width来指定;
高度:
inline的高度由line-height间接确定,跟height无关;
block的高度由内部文档流决定,可以设置height;
inline-block和block类似,也可也设置height;
注意事项:
- 现在没有内联元素和块级元素没有绝对的划分,所有的布局样式可以用CSS进行控制,比如在一个span元素的样式中加上:display: block;则该span元素就是一个块级元素,div同理。
- 不要在inline元素中写block元素。
- div的默认宽度不是100%,而是auto。不要在div中写width: 100%;会出现bug。
- 如果div中没有内容,那么默认高度为0。
溢出:
当div中文档流的高度高于设置的height的高度,则会发生溢出。如下图所示:
处理溢出的方法有以下几种:
- overflow: visible; //放在那不管
- overflow: hidden; //将溢出部分隐藏
- overflow: scroll; // 加一个滚动条,可以拖动滚动条查看溢出的内容, 但是有个bug,即使没有溢出,也会显示两个很丑且没什么用的滚动条
- overflow: auto; //比较推荐的方式,溢出的时候也会有滚动条,不溢出的时候滚动条会消失
脱离文档流:
脱离文档流就是将元素在布局中将它单独拿出来,使盒子在定位时不将它包含在内,忽视它的存在。脱离文档流的方法有两种:
- float;
- position: absolute/fixed;
盒模型
盒模型分为两种,一种是content-box,一种是border-box。他们的区别是content-box的宽度只包含到content,而border-box的宽度包括了,content,border和padding。如下图所示:
一般优先使用border-box。
margin合并:
当一个页面中有上下两个兄弟div分别叫a和b,他们的上下外边距都是10像素,那么理论上他们border之间的距离应该是:
a的下外边距+b的上外边距=20px;
但是事实上结果如下图所示:
从图中可以看出a和b的距离合并成了10px,这就叫margin合并。
margin合并不止出现在兄弟组件之间,在父子组件中也存在相同的情况。
那么如何阻止margin合并呢,一般有一下几种方法:
父子合并
- 用padding或border挡住,让他们的外边距之间有一个界限分隔开。
- 用overflow: hidden;挡住
- 用display: flex;
兄弟合并
兄弟合并一般都是符合我们的预期的,但如果实在要阻止合并,可以用inline-block消除。