CSS基础：结构伪类、伪元素与浮动元素的深入理解-优快云博客

本文链接：https://blog.youkuaiyun.com/l_al_al_a/article/details/136927559

1.结构伪类选择器

2.伪元素

代码示例：

<style>

.father {

width: 400px;

height: 400px;

background-color: pink;

}

.father::before{

/* content内容 */

/* content属性必须添加，否则伪元素不生效 */

/* content的属性值若为中文，需用单引号或双引号 */

content: '老鼠';

/* 默认是行内元素 */

display:inline-block;

width: 100px;

height: 100px;

background-color: skyblue;

}

.father::after{

content: "大米";

display: inline-block;

width: 100px;

height: 100px;

background-color: plum;

}

</style>

</head>

<body>

爱

</div>

</body>

3.标准流

4.浮动

#目标#：能够认识使用浮动的作用，了解浮动的特点

学习路径：

1.浮动的作用

/*浏览器在解析行内块或行内标签的时候，如果标签换行书写，显示出来的网页中，两者之间会产生一个空格的距离*/

2.浮动的代码

网页布局：块标签在一行排列

代码示例：

<style>

div{

width: 100px;

height: 100px;

}

.one{

background-color: pink;

float: left;

}

.two{

background-color: skyblue;

float: left;

}

</style>

</head>

<body>

</body>

3.浮动的特点

4.浮动的案例

代码示例：

<style>

margin:0;

padding: 0;

}

.box{

margin: 0 auto;

width: 1226px;

height: 614px;

/* background-color: pink; */

}

.left{

float: left;

width: 234px;

height: 614px;

background-color: #800080;

}

.right{

float: right;

width: 978px;

height: 614px;

/* background-color: green; */

}

.right li{

float: left;

margin-right: 14px;

margin-bottom: 14px;

list-style: none;

width: 234px;

height: 300px;

background-color: #87ceeb;

}

.right li:nth-child(4n) {

margin-right: 0;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

代码示例：

<style>

margin: 0;

padding: 0;

}

.nav{

width: 640px;

height: 50px;

background-color:#ffc0cb;

margin: 0 auto;

}

.nav li {

float: left;

list-style: none;

}

.nav li a{

display: block;

width: 80px;

height: 50px;

text-decoration: none;

line-height: 50px;

text-align: center;

color: #fff;

}

.nav li a:hover{

background-color: #008000;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

5.清除浮动

浮动带来的影响：
代码示例：

<style>

margin: 0;

padding: 0;

}

.one{

margin: 0 auto;

width: 1000px;

/* 父子级标签中，子级浮动，父级标签没有设置高度，后面的标准流盒子会受到影响，显示到上面的位置 */

/* height: 400px; */

background-color: pink;

}

.left{

float:left;

width: 360px;

height: 400px;

background-color: #ccc;

}

.right{

float: right;

width: 600px;

height: 400px;

background-color: skyblue;

}

.two{

height: 100px;

background-color: green;

}

</style>

</head>

<body>

</div>

</body>

<style>

margin: 0;

padding: 0;

}

.one{

margin: 0 auto;

width: 1000px;

/* 父子级标签中，子级浮动，父级标签没有设置高度，后面的标准流盒子会受到影响，显示到上面的位置 */

/* height: 400px; */

background-color: pink;

}

.left{

float:left;

width: 360px;

height: 400px;

background-color: #ccc;

}

.right{

float: right;

width: 600px;

height: 400px;

background-color: skyblue;

}

.two{

height: 100px;

background-color: green;

}

/* 在css中加： */

.clearfix{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

<style>

margin: 0;

padding: 0;

}

.one{

margin: 0 auto;

width: 1000px;

/* 父子级标签中，子级浮动，父级标签没有设置高度，后面的标准流盒子会受到影响，显示到上面的位置 */

/* height: 400px; */

background-color: pink;

}

.left{

float:left;

width: 360px;

height: 400px;

background-color: #ccc;

}

.right{

float: right;

width: 600px;

height: 400px;

background-color: skyblue;

}

.two{

height: 100px;

background-color: green;

}

/* 单伪元素浮动 */

.clearfix::after{

content: "";

/* 伪元素添加的标签是行内标签，但此处要是块标签 */

display: block;

clear:both;

/* 为了兼容 */

height:0;

visibility:hidden;

}

</style>

</head>

<body>

</div>

</body>

<4>：双伪元素清除法

<style>

margin: 0;

padding: 0;

}

.one{

margin: 0 auto;

width: 1000px;

/* 父子级标签中，子级浮动，父级标签没有设置高度，后面的标准流盒子会受到影响，显示到上面的位置 */

/* height: 400px; */

background-color: pink;

}

.left{

float:left;

width: 360px;

height: 400px;

background-color: #ccc;

}

.right{

float: right;

width: 600px;

height: 400px;

background-color: skyblue;

}

.two{

height: 100px;

background-color: green;

}

/* .clearfix::before 作用：解决外边距塌陷问题

外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置 */

/* 清除浮动： */

.clearfix::before,

.clearfix::after{

content:"";

display: table;

}

/* 真正清除浮动的标签： */

.clearfix::after{

/* content: '';

display: table; */

clear: both;

}

</style>

</head>

<body>

</div>

</body>

<style>

margin: 0;

padding: 0;

}

.one{

margin: 0 auto;

width: 1000px;

/* 父子级标签中，子级浮动，父级标签没有设置高度，后面的标准流盒子会受到影响，显示到上面的位置 */

/* height: 400px; */

background-color: pink;

overflow: hidden;

}

.left{

float:left;

width: 360px;

height: 400px;

background-color: #ccc;

}

.right{

float: right;

width: 600px;

height: 400px;

background-color: skyblue;

}

.two{

height: 100px;

background-color: green;

}

</style>

</head>

<body>

</div>

</body>

css书写顺序：浏览器执行效率更高

1.浮动/display

2.盒子模型：margin border padding 宽度高度背景色

3.文字样式

css学习笔记（浮动）