【网页设计自习室#013】结构伪类浮动

一.结构伪类选择器

选择器	解释
E:first-child()	匹配父元素中的第一个子元素，并且是E元素
E:last-child()	匹配父元素中的最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

nth-child()中可填写数学公式

<ul>
        <li>21</li>
 </ul>

li:nth-child(2n) {
    background-color: aquamarine;
}

二.伪元素

伪元素	解释
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

.xe{
    width: 300px;
    height: 400px;
    background-color: red;
}
.xe::before{
    content: '熬夜';
    font-size: 70px;
    background-color: aquamarine;

    display: block;
}
.xe::after{
    content: '通宵';
}

    <div class="xe">1</div>

注意：

1.必须设置content属性才能生效

2.伪元素默认是行内元素

————————————————————————————————————————————————————————

三.浮动

3.1图文环绕

3.2网页布局

<div class="x1">01</div>
<div class="x2">02</div>

div{
    width: 50px;
    height: 50px;
}
.x1{
background-color: blueviolet;
float: left;
}
.x2{
background-color: coral;
float: left;
}

注意：

1.浮动会脱离标准流，标准流中不占位置

2.浮动后的标签是顶对齐，在一行排列，可设置宽高，浮动的标签具备行内块的特点

3.下一个浮动元素会在上一个浮动元素后面

4.浮动的元素不能通过text-align：center或者margin：0 auto；来设置居中

div{
    width: 50px;
    height: 50px;
}
.x1{
background-color: blueviolet;
width: 150px;
height: 200px;
margin-top: 40px;
float: left;
}
.x2{
background-color: coral;
width: 200px;
height: 300px;
float: left;
}
.x3{
    background-color: aqua;
    width: 400px;
    height: 400px;
}

<div class="x1">01</div>
<div class="x2">02</div>
<div class="x3">03</div>

三.清除浮动

①给父元素添加高度

②在父元素添加一个块级元素，添加clear：both

<div>
    <div></div>
    <div style="clear: both"></div>
</div>

③单伪元素(在css里给父元素添加额外标签)

.clearfix::after{
	content:'';//必须添加
	display:block;
	clear:both;
	height:0;
	visbility:hidden;//隐藏
}

④双伪元素（清除父子外边距塌陷）

.clear::before,
.clear::after{
      content:'';
      display: table;
}
.clear::after{
      clear: both;
}

⑤父级设置overflow：hidden;

.fuji{
	overflow:hidden;
}