只讲干货
1.元素分类
在CSS中将元素分为三类, 分别是块级元素/⾏内元素/⾏内块级元素
块元素：
1.块元素在标准流(⽂档流/普通流)中会独占⼀⾏，块元素会⾃上向下排列。
2.块元素在标准流(⽂档流/普通流)中默认宽度是⽗元素的100%
3.块元素在标准流(⽂档流/普通流)中的⾼度默认被内容撑开。
内联元素：
1.内联元素在标准流(⽂档流/普通流)中只占⾃身的⼤⼩，会默认从左向右排列，如果⼀⾏中不⾜以容纳所有的内联元素，则换到下⼀⾏，继续⾃左向右。
2.在标准流(⽂档流/普通流)中，内联元素的宽度和⾼度默认都被内容撑开。
2.块元素在⻚⾯中⽔平排列：使⽤float
- none，默认值，元素默认在标准流(⽂档流/普通流)中排列
- left，元素会⽴即脱离标准流(⽂档流/普通流)，向⻚⾯的左侧浮动
- right，元素会⽴即脱离标准流(⽂档流/普通流)，向⻚⾯的右侧浮动
3.一些现象
- 字围现象
浮动元素不会挡住没有浮动元素中的⽂字, 没有浮动的⽂字会⾃动给浮动的元素让位置,这个就是浮动元素字围现象。
-特点:
1.在浮动流中是不区分块级元素/⾏内元素/⾏内块级元素的⽆论是块级元素/⾏内元素/⾏内块级元素都可以⽔平排版。
2.在浮动流中⽆论是块级元素/⾏内元素/⾏内块级元素都可以设置宽⾼。
3.综上所述, 浮动流中的元素和标准流中的⾏内块级元素很像。
- ⾼度塌陷
clear属性取值:
- none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
- left: 不要找前⾯的左浮动元素
- right: 不要找前⾯的右浮动元素
- both: 不要找前⾯的左浮动元素和右浮动元素
.clearfix::after{
/添加⼀个内容 /
content: "";
/转换为⼀个块元素 /
display: block;
/清除两侧的浮动 /
clear: both;
}
4.BFC
解决方案：给父元素添加overflow:hidden触发BFC;
作用
1259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
