在上一节CSS学习归纳2中我们讨论了选择器的使用、块级行级元素的转化使用以及背景的设置。本节将在上述学习的基础上对CSS的特性、盒子的边框，内外边距等性质加以归纳。并且最后会做一个综合的案例，并附上代码。
一、CSS的三大特性
1.1 CSS的三大特性---层叠性
CSS的三大特性：层叠性、继承性、优先级。
层叠性：相同的选择器，对同一个属性设置了不同的值，样式产生了冲突。针对冲突的属性采用就近原则，哪一个离标签近，就采用哪一个。感觉像是覆盖了一样。
这里写一个颜色冲突的例子：
<!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>
div {
color: aqua;
font-size: 25px;
}
div {
color: blue;
}
</style>
</head>
<body>
相同的选择器，同一个属性设置了不同的值，样式冲突了。<br>
针对冲突的属性采用就近原则，哪一个离标签近，就采用哪一个。<br>
感觉像是覆盖了的感觉。<br>
<div>冲突测试</div>
颜色（冲突属性）覆盖。
</body>
</html>1.2 CSS的三大特性---继承性
继承性：子标签继承父标签的某些样式，其实合乎情理，为了保证内容的样式一致。这里的某些样式指的是和文字相关的样式：font-，line-，text-。还有颜色特性
值得注意的是，如果某个标签没有设置属性的值，父标签也没有设定，但是父亲的父亲设定了，同样可以继承。像血缘关系一样。
<!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>
body {
color: blueviolet;
/* 设置行高：方法一 行高具体*/
/* font: 25px/35px "microsoft yahei"; */
/* 设置行高：方法二 行高为当前文字的1.5倍，更灵活，更常用*/
font: 25px/1.5 "microsoft yahei";
}
div {
color: aqua;
/* 这里要使用font-size */
font-size: 16px;
}
</style>
</head>
<body>
<h1>继承</h1>
<div>子标签回继承父标签的某些样式，其实合乎情理，为了保证内容的样式一致</div>
<div>某些样式指的是和文字相关的样式：font-，line-，text-。还有颜色特性</div>
<div>
<p>我是div的子代</p>
</div>
<h1>行高继承</h1>
<div>我是div</div>
<h1>孙子继承</h1>
<ol>
<li>li没有设置，父标签ol也没有设定，但是父亲的父亲body设定了，所以直接继承</li>
</ol>
</body>
</html>1.3 CSS的三大特性---优先级
优先级：顾名思义在定义属性的时候，不同的定义方式具备不同的优先级。
注意：优先级具备叠加的性质。
优先级：!important>行内样式>ID选择器>类选择器，伪类选择器>元素选择器>继承或者统配
注意：1、继承得到的属性，无论在父代多强，到子代都只是继承，是最低级的；2、链接大于继承，所以一般不被改变，需要直接设计。
!important的使用
div {
color: aqua !important;
} 针对优先级，做了如下的测试代码
<!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>
div {
color: aqua;
}
/* 先跑一边，然后再打开下面的注释 */
/* 这个最低级，但是加了!important */
/* div {
color: aqua !important;
} */
.num1 {
color: blue;
}
#no1 {
color: black;
}
</style>
</head>
<body>
<div class="num1" id="no1" style="color: pink;"> 我是div但是我有自己类名，和ID，而且行内直接设置了style,
但是如果我对优先级低的设置了!important，结果以加了!important的为准; </div>
<div class="num1" id="no1" style="color: pink;"> 我是div但是我有自己类名，和ID，但我行内直接设置了style </div>
<div class="num1" id="no1"> 我是div但是我有自己类名，和ID </div>
<div class="num1"> 我是div但是我有自己类名 </div>
<div> 我是div但我没有自己类名 </div>
<p>所以优先级：!important>行内样式>ID选择器>类选择器，伪类选择器>元素选择器>继承或者统配</p>
<p>注意：1、继承得到的属性，无论在父代多强，到子代都只是继承，是最低级的；2、链接大于继承，所以一般被改变，需要直接设计</p>
</body>这就更加直观的得到了：!important>行内样式>ID选择器>类选择器，伪类选择器>元素选择器>继承或者统配
1.4 优先级的权重叠加
我们可以认为：1、!important 的权重为：无穷大；2、行内样式 的权重为：1，0，0，0；3、ID选择器的权重为：0，1，0，0；4、类选择器，伪类选择器的权重为：0，0，1，0；5、元素选择器的权重为：0，0，0，1；6、继承或者统配的权值为0；
在对一个属性设置的时候，只叠加不进位。所以只要存在高优先级的不会改变，叠加是为了同级之间的比较。在设置的时候，从最高位开始对比。
<!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>
li {
/* 权重：0001 */
color: yellow;
}
ul li {
/* 权重0001+0001=0002 */
color: red;
}
.num li {
/* 权重0010+0001=0011 */
color: blue;
}
</style>
</head>
<body>
<div>复合选择会有权重叠加的问题，只叠加不进位，0001=0，0，0，1</div>
<ul class="num">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</body>
</html>二、盒子模型的组成
2.1 盒子模型的组成
盒子模型：border边框、margin外边距、padding内边距、content实际内容。共同构成。下图感觉能比较好的体现。
2.2 网页的本质
网页的本质：1、由很多大小不同的盒子构成的；2、摆放位置；3、装饰盒子；
2.3 网页布局的核心内容
网页布局的核心内容：1、盒子模型 2、浮动 3、定位
三、盒子模型
3.1 边框
首先，了解边框有哪些属性。边框有粗细，有颜色，有样式;border-width：px; border-color：; border-style：;
边框还可以细分为border-top，border-bottom，border-left，border-right；这里要注意层叠的就近原则。
注意：边框会影响，盒子实际的大小，因为边框会有像素
<!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>
div {
width: 500px;
height: 300px;
/* border-width: 5px;
border-color: burlywood;
border-style: solid; */
/* 符合写法,无顺序 */
border: 5px red dashed;
/* 这里产生了层叠，注意就近原则 */
border-bottom: 5px yellow solid;
}
</style>
</head>
<body>
<p>边框有粗细，有颜色，有样式;border-width：px; border-color：;
border-style：;</p>
<p>边框 border-top，border-bottom，border-left，border-right；注意层叠的就近原则</p>
<p>注意：边框会影响，盒子实际的大小，因为边框会有像素</p>
<div></div>
</body>
</html>3.2 细线边框
因为边框有粗细，所以单元格之间贴合时，边框会重叠变厚。为了相处重叠带来的问题，对重叠元素添加 border-collapse: collapse;这个代码
这里做了一个例子，大家可以跑两边，第一遍正常跑，第二遍将border-collapse: collapse;注释。可以明显看到区别
<!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>
table {
width: 500px;
height: 500px;
}
table,
th,
td {
border: 2px blue solid;
border-collapse: collapse;
text-align: center;
}
th {
height: 200px;
}
</style>
</head>
<body>
<p>单元格之间贴合，边框会重叠变厚</p>
<table align="center" cellspacing="0">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>3.3 内边距和内容
通过内边距，调整内容和边框的距离。
注意：1、padding会影响盒子的大小，增加了内边距，会撑大原盒子的大小；2、设计之初，考虑内边距再去设置height 和 weight。
有两种种情况padding不撑开宽度：1、h这样的标题和浏览器一样宽，padding不会影响。但是当自己制定了h的宽度，padding就会影响。2、子类不设置宽度时，padding不会影响，其实就是默认和父亲一样宽，没办法再扩大，和情况一几乎类似。
注意：内边距的设置顺序遵顼 ”顺时针原则“。padding简写 可以有1，2，3，4个参数的情况
1、padding：所有； 2、padding：上下，左右； 3、padding：上，左右，下；4、 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>
div {
width: 200px;
height: 200px;
background-color: aquamarine;
/* padding-left: 15px;
padding-top: 20px; */
/* padding简写 可以有1，2，3，4个参数的情况*/
/* 设置顺序：顺时针设置 */
padding: 20px 15px;
}
</style>
</head>
<body>
<div>通过内边距，调整内容和边框的距离</div>
<div>注意：1、padding会影响盒子的大小，增加了内边距，会撑大；2、设计之初，考虑内边距再去设置height 和 weight</div>
<div>有两种种情况padding不撑开宽度：1、h这样的标题和浏览器一样宽，padding不会影响。但是当自己制定了h的宽度，padding就会影响。</div>
<div>2、子类不设置宽度时，padding不会影响 </div>
</body>
</html>3.4 外边距
外边距的设置顺序，同样遵顼 ”顺时针原则“。简写可以有1，2，3，4个参数的情况。设置具体和padding的一致，只需要换成margin即可。
<!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>
.nav1 {
display: inline-block;
width: 200px;
height: 150px;
background-color: aquamarine;
/* 简写参数和padding一样，顺时针 */
margin: 15px 15px;
}
.nav2 {
display: inline-block;
width: 200px;
height: 150px;
background-color: aquamarine;
margin: 15px 15px;
}
.nav3 {
display: inline-block;
width: 200px;
height: 150px;
background-color: aquamarine;
margin: 15px 15px;
}
.nav4 {
width: 200px;
height: 150px;
background-color: aquamarine;
margin: 15px 15px;
}
</style>
</head>
<body>
<div class="nav1"></div>
<div class="nav2"></div>
<div class="nav3"></div>
<div class="nav4"></div>
</body>
</html>3.5 外边距的使用
3.5.1 可以使用外边距可以实现块级水平居中。
条件如下：必须有宽度；
实现方法1：左右外边距设置为auto
实现方法2：给父元素增加 text-align：cente
3.5.2 父类塌陷的情况如何解决
方法一：父类加一个边框
方法二：父类定义上内边距
方法三：父类加：overflow:hidden
<!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>
.header1 {
width: 800px;
height: 400px;
background-color: aquamarine;
margin: 0 auto;
font-size: 20px;
color: black;
margin: 100px auto;
}
.header2 {
width: 800px;
height: 400px;
background-color: aquamarine;
margin: 0 auto;
font-size: 20px;
color: black;
/* 虽然是text-但是是满足所有子类 */
text-align: center;
}
.father {
width: 500px;
height: 500px;
background-color: #08f046;
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: #f07808;
margin: 100px 100px;
}
</style>
</head>
<body>
<h6>使用外边距可以实现块级水平居中</h6>
<p>条件1：必须有宽度；条件2：左右外边距设置为auto</p>
<div class="header1">我可以实现居中</div>
<h6>如何实现行内块水平居中</h6>
<p>给父元素增加 text-align：center</p>
<div class="header2">
<span>1111</span>
<span>2222</span>
</div>
<h6>嵌套时，存在父类塌陷的情况</h6>
<ul>
<li>1、父类加一个边框</li>
<li>2、父类定义上内边距</li>
<li>3、父类加：overflow:hidden</li>
</ul>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>3.6 清除内外边距
一般写在设计的最前面，因为不同的标签自带外边距和内外边距，会不好标定，所以干脆全部清空，自己设计。
使用通配符修改。行内元素尽量只设置左右边距。
下面是使用通配符，取消内外边距的例子
<!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;
}
</style>
</head>
<body>
<p>不同的标签自带外边距和内外边距</p>
<p>使用通配符修改</p>
123
<ul>
<li>111</li>
<li>111</li>
</ul>
<p>行内元素尽量只设置左右边距</p>
</body>
</html>四、综合案例
4.1 竖导航栏
为了实现这个，使用块级元素是其中的一个方法，因为每个各占一行。
思路：1、因为链接时行级元素，所以先将链接转化为块级元素。2、设置行高=高度可以居中对齐。3、对<a> 的 text-decoration进行修改，取消下划线。4、a：hover设置经过特效 5、调整内边距。
<!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>
a {
display: block;
height: 40px;
width: 160px;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 40px;
padding-left: 40px;
background-color: rgba(88, 86, 86, 0.5);
}
a:hover {
color: aqua;
}
</style>
</head>
<a href="#">
手机 配件
</a>
<a href="#">
平板 笔记本
</a>
<a href="#">
智能家居 路由器
</a>
<a href="#">
运动 健身
</a>
<a href="#">
户外 出行
</a>
<body>
</body>
</html>4.2 横导航栏
为了实现这个，应该是让多个元素排在一行，可以使用行内块技术
思路：1、最外层的大盒子内部装几个行内块。2、设置盒子的边框。3、因为一行多个链接，所以先将链接转化为行内块元素。4、设置行高=高度可以居中对齐。5、对<a> 的 text-decoration进行修改，取消下划线。6、a：hover设置经过特效 7、调整内边距。
<!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>
.nav {
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
height: 41px;
background-color: #fcfcfc;
font-size: 12px;
line-height: 41px;
}
.nav a {
display: inline-block;
text-decoration: none;
color: #4c4c4c;
height: 41px;
padding: 0 20px;
}
.nav a:hover {
color: #ff8500;
background-color: rgba(245, 91, 158, 0.4);
}
</style>
</head>
<body>
<div class="nav">
<a href="#">你好</a>
<a href="#">你好呀</a>
<a href="#">百度一下</a>
<a href="#">移动客户端</a>
</div>
<h1>不设计容器的长宽，而是指定内边距，实现好的效果</h1>
</body>
</html>4.3 网页商品
这个比较常见，具有很强的实践意义。
分析问题：1、首先是个大盒子，内部装了纵向排列的小盒子：图片、评论、来源、产品名称、价格。2、图片的宽度100%；3、评论设置高度，设置margin-top和padding-left。防止塌陷；4、来源：规定字号，设置margin-top和padding-left；5、产品名：和价格同行，所以转换行内块。规定字号粗细，设置margin-top和padding-left；6、价格：左边框，做内边距，颜色；7、可以设置链接：去掉下划线，设置经过特效。
<!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;
}
body {
background-color: #f5f5f5;
}
.box {
width: 298px;
height: 415px;
background-color: #fdfdfc;
margin: 100PX auto;
}
.box img {
width: 100%;
}
.box p {
height: 70px;
font-size: 14px;
padding: 0 28px;
margin-top: 30px;
}
.review {
font: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.name {
font-weight: 400;
display: inline-block;
padding: 0 28px;
margin-top: 15px;
}
.price {
border-left: 1px solid black;
padding-left: 10px;
color: #ff6700;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
color: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<img src="images/pic1.png">
<p>这个扩展坞非常好用，买了3个了！</p>
<div class="review">
来自于 117384232 的评价
</div>
<h4 class="name">
<a href="#">联想2024最新扩展坞...</a>
</h4>
<span class="price">
99.9元
</span>
</div>
</body>
</html>4.4 体育资讯
问题分析：1、大致是纵向排列的，头部，内容。2、头部：可以使用<h>标签，所以要设置高度、行高、左内边距、粗细、下边框；3、内容：可以使用<ul><li>的list结构；4、每个<li>放一个<a>；5、使用list-style:none；去除list的左方小点。6、设置<li>的高度、外边距、内边距；7、以设置链接：去掉下划线，设置经过特效。
<!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>
* {
padding: 0;
margin: 0;
}
body {
background-color: bisque;
}
.box {
background-color: white;
width: 250px;
height: 250px;
margin: 100px auto;
}
.box .title {
height: 40px;
font-weight: 400;
line-height: 40px;
border-bottom: 1px solid black;
padding-left: 30px;
color: #ccc;
}
.box .content {
list-style: none;
margin-top: 25px;
padding-left: 15px;
}
.box li {
height: 25px;
margin-top: 5px;
}
a {
text-decoration: none;
}
a:hover {
color: aquamarine;
}
</style>
</head>
<body>
<div class="box">
<h3 class="title">体育快讯</h3>
<ul class="content">
<li><a href="#">【篮球】湖人vs热火</a></li>
<li><a href="#">【篮球】开拓者vs掘金</a></li>
<li><a href="#">【篮球】76人vs火箭</a></li>
<li><a href="#">【篮球】森林狼vs勇士</a></li>
<li><a href="#">【足球】英超：切尔西胜曼联</a></li>
</ul>
</div>
</body>
</html>