css三大特性
1. 层叠性
相同选择器设置相同的样式（解决样式冲突）
1. 遵循就近原则
2. 样式不冲突不会层叠
两个相同的样式会遵循就近原则执行更靠近元素的哪一个样式
<!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>Document</title>
<style>
.outBox {
color: green;
height: 100px;
}
.outBoxOne {
color: blue;
width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="image_box">
<div class="outBoxOne outBox"> 你猜我是什么颜色和尺寸</div>
</div>
</body>
</html>
作用于同一个元素，后面的影响会覆盖前面的 如果前面没有则兼容
2. 继承性
css继承样式有：visibility、cursor、letter-spacing、color、font、text-indent、text-align、
list-style、list-style-type、border-collapse等。
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、
min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、
table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、
font-family、font-size、font-style、font-variant、font-weight、text- decoration、
text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse
需要注意行高的继承
1. 行高可以跟单位也可以不跟单位
2. 子元素没有设置行高会继承父元素的行高
3. body行高设为1.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>Document</title>
<style>
.outBoxOne {
width: 200px;
height: 100px;
border: 1px solid #ccc;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="image_box">
<div class="outBoxOne">
<div style="font-size:24px;">字体大小24</div>
<div style="font-size:14px;">字体大小14</div>
</div>
</div>
</body>
</html>
3. 优先级
同一个元素指定多个选择器，会有优先级产生 。
选择器相同，执行层叠性
选择器不同，根据选择器权重执行
选择器权重
| 继承 或者“ * ” | 0，0，0，0 |
|---|---|
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style="" | 1，0，0，0 |
| ！important | 无穷大 |
注意点：
1. 权重由4位数字组成，不会进位
2. 等级判断从左到右
3. 继承的权重是0
4. 如果元素没有直接选中，不管父元素权重多高，子元素继承的权重都为0权重叠加
权重叠加
div span 0,0,0,2
.outBoxOne span 0,0,1,1
#boxOne .box_style 0,1,1,0
<!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>Document</title>
<style>
.outBoxOne {
width: 200px;
height: 100px;
border: 1px solid #ccc;
line-height: 1.5;
}
div span {
font-size:14px;
}
.outBoxOne span {
font-size:16px;
}
#boxOne .box_style {
font-size:18px;
}
</style>
</head>
<body>
<div class="image_box">
<div id="boxOne" class="outBoxOne">
<span class="box_style">你猜我的字体是多大</span>
</div>
</div>
</body>
</html>
<span class="box_style" style="font-size:24px;">你猜我的字体是多大</span>
行内样式 1，0，0，0
<!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>Document</title>
<style>
.outBoxOne {
width: 200px;
height: 100px;
border: 1px solid #ccc;
line-height: 1.5;
}
div span {
font-size:14px;
}
.outBoxOne span {
font-size:16px;
}
#boxOne .box_style {
font-size:18px;
}
.box_style {
font-size: 12px !important
}
</style>
</head>
<body>
<div class="image_box">
<div id="boxOne" class="outBoxOne">
<span class="box_style" style="font-size:24px;">你猜我的字体是多大</span>
</div>
</div>
</body>
</html>
!important 无穷大
