web页面的制作,是个“流”,像水流一样,必须从上往下,一点点的编织,不像画画,可以这个地方画一个,另一个地方画一个,随意而为。
一、标准文档流的一些微观现象
1. 空白折叠现象
1)标签与标签之间紧密连接,网页上两个内容也是紧密连接,中间没有空格。
2)标签与标签之间中间有一个空格,网页上两个内容之间也有一个空格的间隙。
3)标签与标签之间有一个以上的空格(n>1),网页上两个内容之间也只有一个空格。
通过第3)个现象可知,多出的空格折叠了,这就是所谓的空白折叠现象。
2.高矮不齐,底边对齐
网页上的两个不同的内容出现高低不同时,底边对齐。如图:
3.自动换行
二、块级元素和行内元素
在HTML中,我们已经将标签分为了:文本级、容器级。
文本级:p、span、a、b、i、u、em
容器级:div、h系列、li、dt、dd
CSS标准文档流也将标签分为两种等级:
1) 块级元素
● 霸占一行,不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度,那么宽度将默认变为父亲的100%。
2) 行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度,就是文字的宽度。
CSS的分类和HTML分类很像,就p不一样:
- 所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素。
- 所有的容器级标签都是块级元素。
总结如下图:
三、块级元素和行内元素的互换
1.块级元素可以设置为行内元素,其语法为:display: inline;
示例:
div{
display: inline;
background-color: pink;
width: 500px;
height: 500px;
}
display是“显示模式”的意思,用来改变元素的行内、块级性质
inline就是“行内”。
一旦,给一个块级元素设置display: inline;
那么,这个div将立即变为行内元素。此时它和一个span无异, 此时这个div:
●不能设置宽度、高度;
● 可以和别人并排了。
2.行内元素可以设置为块级元素,其语法为:display: block;
span{
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
“block”是“块”的意思
让标签变为块级元素。此时这个标签,和一个div无异,此时这个span:
● 能够设置宽度、高度;
● 必须霸占一行了,别人无法和他并排;
● 如果不设置宽度,将撑满父亲。
标准流里面限制非常多,但是实际创建网页时,我们要让不同的块级元素并排布局,这该如何实现呢?那就是“脱离标准流”,CSS中一共有三种手段使一个元素脱离标准流,下面的博客,我将一一总结。谢谢!