一 标准文档流
说白了，就是一个“默认”状态（由上往下），标准流中，标签分为两种：块级元素，行内元素
标准流的现象
- 空白折叠现象
- 高矮不齐，底边对齐
- 自动换行，一行写满，自动换行
-
margin 塌陷（只在标准流中才会有）
41A27C36-E4DA-4E10-8C03-067D5F1EB92F.png
1.1 块级元素，行内元素
块级元素：一定是霸占一行的，能设置宽高，不设置宽高默认占满父亲；div,p,h
行内元素：和其他元素并排，不能设置宽高，默认宽高就是文字的高度。span ,a,b,i,u
3DDDEC3F-135C-44ED-92CE-98EBE483E57A.png
（1）区分块级与行内
- 文本级：p，span，b,a,i,u,em
- 容器级：div，h，li，dd，dt，
在CSS中所有的文本级的标签，都是行内元素
所有的容器级的标签都是块级元素
(2) 块级与行内相互转换
-
display：block；转变块级
例子：将a标签专成块级，变成块级后可以设置宽高，独自占一行
4D055B4D-161E-4F89-B554-457E4B933E81.png
-
display: inline; 转变为行内
例子：将div转为行内标签
0B84FA8E-84AC-4885-93B1-DF169EA2F4BA.png
标准流做不出网页，因为能并排不能改变宽高，所以要脱离标流，
只有脱离标注流才能达到下面的布局
A464C34C-90F9-4D4D-A7AC-4EBE52D79916.png
1. 浮动
float：left
BD62D81A-69A7-4A4F-BD16-2AB94F4C5DAF.png
脱离标注流现象
实现两个块级元素div显示在同一行，同时还能设置宽高，浮动之后脱离了标准流现象
5C25D3F7-4C41-4FC4-992F-D2786DF3063C.png
绿色的的盒子设置 float：left，蓝色不设置脱离了标准流，序号为2的盒子在标准流中酒变成了第一个
7F79BDA2-91F9-460B-84B0-30D9ABE53264.png
注意:一旦一个盒子脱离了标准流之后，就能设置宽高了，无论是块级元素还是行内元素，也就是是说行内元素在不转换成块级的情况下也能设置宽高
浮动元素互相贴靠现象
123，都设置为浮动后，缩小窗口可以看到布局会发生变化
F22C4898-59FB-4726-9A67-C6D12D87EA1B.png
浮动的字围现象
浮动能挡住盒子但是挡不住文字
例如：一个浮动div和一个p标签，p标签的盒子会插入到div的下面，但是p标签里面文字不会被挡住
EC1075B2-7C3E-4824-95D9-8F21877D4F1F.png
2. 浮动清除
如果一个元素要浮动，那么它的祖先的元素一定要有高度
有高度的盒子才能关住浮动
例如：
现在有两个div ，div里面有两个ul（不是浮动），li都是浮动的
4BDB6EC9-AC5E-4BD2-9CB0-EEDC2C005480.png
841D6DD0-3198-4AA6-A1C5-1E581F0C1AB0.png
本以为这两个li会分两排的但是：
0B47AFFD-310E-4A92-AE19-F41A200370C9.png
原因： div没有高度，不能给自己浮动的孩子一个容器，撑不起这个高，
所以： 如果一个元素要浮动，那么它的祖先的元素一定要有高度
有高度的盒子才能关住浮动
解决方法：清除浮动
1.手动设置高度
2. 最简单的清除浮动的方法，就是给盒子增加Clear：both；表示自己的内部元素，不受盒子的影响，
82610B2F-7D06-42B6-BA7B-44D03C3019A7.png
但是两个盒子间的marg失效
3.外墙法 ：在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素不去追前面的浮动元素，用自己的身体当作了间隙
8482A926-AE74-415B-802A-01395CCF9E0F.png
能清除儿子浮动的影响，但是第一个div还是不会有
4.内墙法
一个父亲如果不能被自己浮动的儿子撑出高度，在里面修一堵墙，就能被撑出高度
C551E216-CAB6-42E1-A3FA-1E4870A5AA2A.png
这种方法，div就能被自己里面浮动p撑出高度
5.设置overflow：hide；本意是清除溢出到盒子外面的文字，但是前端工程师发现了他的偏方
一个父亲如果不能被自己浮动的儿子撑出高度，但是，只要父亲这只了这个属性那么父亲就能被撑出高度，（父亲会自动适配内容的高度）
699652B2-AE50-46BC-A925-15EA81689C9A.png
- 绝对
- 固定位置
网友评论