-
结构伪类选择器
-
伪元素
伪元素 通过css创建标签, 装饰性的不重要的小图
找父级, 在这个父级里面创建子级标签
伪元素 通过css创建标签, 装饰性的不重要的小图
伪类标签 内容 content必须添加
伪类标签默认是行内元素,宽高不生效,需要dispiay转换 -
标准流
浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离,用浮动来解决 -
浮动
作用:(1)图文环绕(2)网页布局,块级标签在同一行显示
特点
浮动标签是顶对齐的,浮动后的标签具备行内块标签特点
通栏的盒子宽度和浏览器宽度一样大
CSS书写顺序: 浏览器执行效率更高
浮动 / display
盒子模型: margin border padding 宽度高度背景色
文字样式
如果父级宽度不够,子集会自动换行
小米导航综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清楚浏览器默认样式 */
* {
margin: 0;
padding: 0;
}
.box {
width: 1226px;
height: 614px;
/* background-color: palegoldenrod; */
/* 版心居中 */
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: green; */
}
/* 清除列表样式 */
ul {
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
/* 如果父级的宽度不够, 子级会自动换行,第四个li和第八个li右侧间距清除 */
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<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>
</body>
</html>
效果图
小米导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
}
.nav {
margin: 50px auto;
width: 640px;
height: 50px;
background-color: #ffc0cb;
}
.nav ul {
list-style: none;
}
.nav li {
float: left;
}
.nav li a {
/* 显示模式 */
display: block;
/* 盒子 */
width: 80px;
height: 50px;
/* 文字 */
text-align: center;
line-height: 50px;
font-size: 16;
color: #fff;
text-decoration: none;
}
.nav a:hover {
background-color: #008000;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
<li><a href="#">新闻7</a></li>
<li><a href="#">新闻8</a></li>
</ul>
</div>
</body>
</html>
效果图
- 清除浮动
①给父级加高度
不止能清除浮动,也能解决外边距问题
/* .clearfix::before 作用: 解决外边距塌陷问题
外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
*/
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
/* content: '';
display: table; */
clear: both;
}