结构伪类选择器
li:first-child a:nth-child(3) {
color: red;
}
伪元素
.father::before {
/* 内容 */
/* content属性必须添加, 否则伪元素不生效 */
content: '';
color: green;
width: 100px;
height: 100px;
background-color: blue;
/* 默认是行内元素, 宽高不生效 */
display: block;
}
.father::after {
content: '大米';
}
标准流
➢ 标准流中块级元素的排版规则是?
- 从上往下、垂直布局、独占一行
➢ 标准流中行内元素或行内块元素的排版规则是?
- 从左往右、水平布局、空间不够自动折行
浮动
浮动的作用
div {
/* 浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离 */
display: inline-block;
width: 100px;
height: 100px;
}
- 早期作用:图文环绕\
- 现在作用:用于布局，让垂直布局的盒子变成水平布局，如:一个在左，一个在右
浮动的代码
float: left;
浮动的特点
- 浮动元素会脱标，在标准流中不占位置\
- 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素\
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动\
- 浮动元素有特殊的显示效果:1 一行可以显示多个 2 可以设置宽高
浮动的案例
清除浮动
清除浮动给别的标签带来的影响
清除浮动的介绍
➢ 含义:清除浮动带来的影响
• 影响:如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 原因:
• 子元素浮动后脱标 → 不占位置
➢ 目的:
• 需要父元素有高度，从而不影响其他网页元素的布局
