标准文档流+浮动
定义:
内容从左到右,从上到下书写的。前面的内容大小或者位置发生变化时,后面的内容位置也会随之变化。
web页面,就是一个标准的文档流。内容跟咱们的书写顺序有关。
标准文档流的特性
(1)空白折叠现象
无论多少个空格,tab,换行都会折叠为一个空格。
<div>张老师 真帅</div>
(2)高矮不同,底部对齐
妖怪我要你助我修行<img src="img/zhaoshifu.jpg" alt="">
(3)一行写满,自动换行
行内元素和块级元素
标准文档流将咱们的HTML元素分为了两种:
-
行内元素
-
块级元素
区别:
行内元素:
-
可以与其他行内元素并排。
-
宽、高设置是无效的。宽度是随内容自适应。
块级元素:
-
独占一行,不能与其他任何元素并排。
-
宽、高可以设置。如果不设置宽,宽将默认为父标签的100%,不设置高度,高度自适应。
我们将HTML标签分为两大类:容器级标签、文本级标签
容器级标签:能嵌套几乎所有的其他标签
文本级标签:只能嵌套文本、图片、超链接、表单元素。
常用的文本级标签:span,p,a,b
常用的容器级标签:div,h1-h6、li、dd dt td.
几乎所有的容器级标签都对应块级元素。
几乎所有的文本标签都对应行内元素。p标签除外,它是文本级标签,都属于块级元素。
行内元素和块级元素的转换
块级元素转行内元素
display: inline;
一旦,转为行内元素:
-
宽、高就会失效
-
可以与其他行内元素并排。
行内元素转块级元素
display: block;
转行内块元素
display: inline-block;
标准文档流限制比较多,导致页面中很多布局无法实现。如果我们想要并排,又要设置宽高,就要脱离文档流。
css中提供三种方法,可以脱离文档流。
-
浮动
-
绝对定位
-
固定定位
浮动
浮动是css里布局使用最多的属性。
浮动之后,元素会脱离文档流,紧贴上一个浮动盒子的边。
性质1:浮动的元素脱标
一旦我们设置了浮动,那么该元素就能够并排展示,而且可以设置宽和高。
/* float:right*/ float: left;
性质2:浮动元素互相贴靠
浮动元素会紧贴上一个浮动元素。若宽度不够,会换行。顶部顶帖上一个浮动元素的底部。
浮动方向是要一直。
性质3:浮动元素的“字围”效果
div可以挡住p标签,但不会挡住p中的文字。字围效果。
性质4:收缩
当一个元素设置为浮动,且没有设置宽度的时候,它的宽度会自动收缩为内容的宽度。
父类塌陷
子元素都设置了浮动,父元素没有设置高度。那么父元素的高度会变成0