标准文档流
web页面的制作,是一个“流”,必须从上到下,像是“织毛衣”。
标准文档流的特性
1.空白折叠现象
无论有多少个空格,换行,tab,都会折叠成一个空格。
2.高矮不齐,底边对齐
对齐形式以底边对齐为主,而不是顶部对齐。
3.自动换行,一行写不完,自动换行写。
行内元素与块级元素
标准文档流等级森严,便签分为两种等级:
- 行内元素
- 块级元素
块级元素与行内元素的区别:
1.块级元素独占一行,行内元素只占一行的一部分。
2.行内元素会与其他行内元素并排。
3.行内元素不能设置宽高,默认的高度就是文字的高度。
4.块级元素可以设置宽高,如果不设置宽高,那么宽度将默认变成父元素的100%。
块级元素:p、div、h、li、dt、dd
行内元素:b、span、em、u、a、i
行内元素和块级元素的相互转化
通过display这个属性将两者相互转化
块级元素转化为行内元素
display:inline
行内元素转化为块级元素
display:block
设置完成之后,这个行内标签就变成了块级元素,以span为例子
- 该span标签可以设置宽度与高度
- 该span独占一行
- 如果不设置宽度,那么将撑满父元素
标准流里面的限制很多,如果我们班现在就要并排,并且要设置宽高,我们就可以:脱离标准流
在css中,我们可以使用三种方法,使一个元素脱离标准文档流:
- 浮动
- 绝对定位
- 固定定位
一个元素浮动以后,比如span元素,产生浮动以后,就能够并排了,并且能够设置宽高,就不会有什么行内,块级之分。
标准流中的文字不会被浮动的盒子遮挡住,当一个p标签的文字在标准流文档中,一个div通过浮动到了p标签上面,文字会形成字围效果,字体包围着图片。
一个浮动的元素,如果没有设置 width,那么将会自动收缩到内容的宽度。
如果一个元素要浮动,那么它的祖先一定要有高度。
有高度的盒子,才能关的住浮动。
浮动的清除
清除浮动与浮动之间的影响
1.给浮动的祖先元素加高度,这个高度要大于孩子的高度。
(不推荐,高度一般让内容撑高)
2.使用clear:both;
clear就是清除,both指的就是左浮动右浮动都要清除,但是由于两个浮动的元素没设置高度,所以清除浮动后,margin属性失效了。
3.隔墙法
在两个浮动的元素中间,加上一个空div,并且将div设置clear:both,并且加上高度,达到margin的效果。
4.内墙法
在父元素中加上一个有高度元素,把父元素撑高,
5.overflow:hidden
没有设置高度的父元素不能被浮动的子元素撑开高度,但是给父元素加上overflow:hidden之后,父元素就能被子元素撑开了。