结构伪类选择器
<style>
ul li {
background-color: #ccc;
width: 200px;
}
ul li:first-child {
background-color: red;
}
ul li:last-child {
background-color: yellow;
}
ul li:nth-child(3) {
background-color: pink;
}
</style>
<!-- ul>li{第$个li}*8 -->
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
<li>第6个li</li>
<li>第7个li</li>
<li>第8个li</li>
</ul>
伪元素
.box::before {
content: ''; // 必须加属性
}
标准流
浮动
- 浮动的标签默认顶对齐,可使用 margin-top 修改距离顶部距离
- 浮动元素会脱离标准流(脱标),在标准流中不占用位置
- 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
- 浮动找浮动,下一个浮动元素会在上一个浮动元素后面,左右浮动
- 浮动标签具备行内块特点:
<style>
/* 初始化样式 */
* {
margin: 0;
padding: 0;
}
/* 清除list圆点样式 */
ul li {
list-style: none;
}
/* 外层容器 */
.box {
width: 1200px;
height: 620px;
background-color: #ccc;
margin: 0 auto;
}
/* 左边 */
.left {
float: left;
width: 400px;
height: 620px;
background-color: pink;
}
/* 右边 */
.right {
float: right;
/* background-color: green; */
height: 620px;
width: 780px;
}
ul li {
float: left;
height: 300px;
width: 180px;
background-color: skyblue;
margin-bottom: 20px;
margin-left: 20px;
}
/* 第1个子元素和第5个子元素 */
ul li:nth-child(4n + 1) {
margin-left: 0;
}
</style>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
清除浮动
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
<style>
/* 初始化样式 */
* {
margin: 0;
padding: 0;
}
/* 外层容器 */
.box {
background-color: #ccc;
/* margin: 0 auto; */
}
/* 左边 */
.left {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
/* 右边 */
.right {
float: right;
background-color: green;
width: 200px;
height: 200px;
}
.footer {
height: 20px;
background-color: saddlebrown;
}
</style>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<!-- 期望footer元素紧跟box下面排列 -->
<div class="footer"></div>
.clearfix {
clear: both;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.clearfix::after {
content: '';
display: block;
clear: both;
/* 兼容低版本IE */
height: 0;
visibility: hidden;
}
/* 解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
<style>
/* 初始化样式 */
* {
margin: 0;
padding: 0;
}
/* 外层容器 */
.box {
background-color: #ccc;
/* margin: 0 auto; */
}
/* 左边 */
.left {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
/* 右边 */
.right {
float: right;
background-color: green;
width: 200px;
height: 200px;
}
.footer {
height: 20px;
background-color: saddlebrown;
}
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
</style>
<!-- 清除浮动 -->
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<!-- 期望footer元素紧跟box下面排列 -->
<div class="footer"></div>