一 标准文档流
说白了,就是一个“默认”状态(由上往下),标准流中,标签分为两种:块级元素,行内元素
标准流的现象
- 空白折叠现象
- 高矮不齐,底边对齐
- 自动换行,一行写满,自动换行
-
margin 塌陷(只在标准流中才会有)
41A27C36-E4DA-4E10-8C03-067D5F1EB92F.png
1.1 块级元素,行内元素
块级元素:一定是霸占一行的
,能设置宽高
,不设置宽高默认占满父亲
;div
,p
,h
行内元素:和其他元素并排
,不能设置宽高
,默认宽高就是文字的高度
。span
,a
,b
,i
,u
(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
脱离标注流现象
实现两个块级元素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都是浮动的
841D6DD0-3198-4AA6-A1C5-1E581F0C1AB0.png
本以为这两个li会分两排的但是:
0B47AFFD-310E-4A92-AE19-F41A200370C9.png
原因: div没有高度,不能给自己浮动的孩子一个容器,撑不起这个高,
所以: 如果一个元素要浮动,那么它的祖先的元素一定要有高度
有高度的盒子才能关住浮动
解决方法:清除浮动
1.手动设置高度
2. 最简单的清除浮动的方法,就是给盒子增加Clear:both;表示自己的内部元素,不受盒子的影响,
但是两个盒子间的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
- 绝对
- 固定位置
网友评论