1. 圆角边框（重点）
正方形变为圆形：
将border-radius设置为正方形的一半或者设置为50%即可
矩形变为圆角矩形
将border-radius设置为矩形高度的一半，宽度不用设置
2. 盒子阴影
注意：书写时当项目需要内阴影时使用inset，项目使用外阴影时不需要书写，默认为外阴影，如果写上outset则效果不展示
如果我们想要的效果是鼠标放到盒子上时才会出现影子，可以使用hover的方式。
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
}
3. 文字阴影
4. CSS浮动（可以让多个块级元素在一行内排列使用）
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示案例</title>
<style>
.left {
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.right {
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">张三</div>
<div class="right">王五</div>
</body>
</html>
4.1 浮动的特性（重难点）
注意：行内元素设置宽和高是没有用的，但是设置为浮动以后就可以显示了。
注意：设置浮动以后，不再需要将行内元素转换为行内块元素进行使用
网页布局：通常我们在设置网页布局的时候，将标准流和浮动搭配使用
例如上图：一个标准流大盒子中放四个浮动的盒子
综合案例：小米官网（一个标准流两个浮动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动元素搭配标准流父盒子1</title>
<style>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 230px;
height: 460px;
background-color: purple;
}
.right {
float: left;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
例如：小米官网综合案例（一个标准流四个浮动，盒子与盒子之间的距离通过margin来控制。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动元素搭配标准流父盒子2</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
width: 296px;
height: 285px;
background-color: purple;
float: left;
margin-right: 14px;
}
/* 这里必须写 .box .last 要注意权重的问题 20 */
.box .last {
margin-right: 0;
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</body>
</html>
例题：手机模块，上侧两类的结合体
注意：网页布局第二准则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机模型</title>
<style>
.box {
width: 1226px;
height: 615px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: purple;
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: skyblue;
}
/* 表示的是只找right的儿子div，找最近的 */
.right>div {
float: left;
width: 234px;
height: 300px;
background-color: pink;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左盒子</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
</html>
5. 网页布局
做一个基本的网页布局（首先清除内外边距，取消系统自带的默认边距）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常见网页布局</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
margin: 0 auto;
height: 300px;
background-color: pink;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: gray;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
/* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
.footer {
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
浮动布局注意点：
5.1 清除浮动（闭合策略）
（重点）清除浮动的原因：是因为网页中的每个盒子的内容是不好确定的，盒子中的内容如果大于所设置的高度则会撑大盒子，故实际应用中需要清除浮动。如果可以确定盒子高度的时候则不需要清除浮动。
清除浮动的语法是：
清除浮动的方法（4种）
5.1.1 额外标签法（书写最后充当墙的元素时必须是块级元素）
每次书写在最后写一个div，CSS中设置clear:both清除浮动当成一堵墙来使用，盒子会自动检测高度无论有多少个子元素
5.1.2 overflow
在清除浮动时，找到该盒子的父级元素，然后添加overflow属性
5.1.3 after伪元素法
注意：直接粘贴代码，其中需要将行内元素转换为块级元素。然后在父级元素中添加clearfix。
5.1.4 双伪元素清除浮动（一个before，一个after）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
