在学习了CSS基本知识之后，我们需要进一步了解CSS，因此写下了这篇文章
当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园
首先我们先来了解CSS的三大特点，以便于我们下面知识点的讲解
CSS三大特性包括：
当相同的选择器设置相同的样式，却含有不同的样式值时，此时一个样式就会覆盖掉另一个冲突的样式，层叠性就是为了解决这个问题
层叠性原理：
下面给出代码示例：
<!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> <!-- 对于下方div我们给出两个div的css设置 --> <style> /* 下面这种情况，颜色就出现了层叠性，因就近原则，这里div呈blue色 */ /* 同时，font-size因未发生冲突，不产生层叠性 */ div{ color: black; } div{ color: blue; font-size: 12px; } </style></head><body> <div>123</div></body></html>CSS中的继承：
下面给出代码示例：
<!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> <!-- 当我们不设置p属性仅设置div属性时，p会继承div的属性 --> <style> div{ color: pink; } </style></head><body> <div> <p>123321</p> </div></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> div{ color: pink; font: 12px/1.5; } </style></head><body> <div> <p>123321</p> <p>123321</p> </div></body></html>当一个元素指向多种选择器时，会产生优先级
每种选择器都具有一定的权重：
| 选择器 | 选择器权重 |
|---|---|
| 继承或* | 0.0.0.0 |
| 元素选择器 | 0.0.0.1 |
| 类选择器，伪类选择器 | 0.0.1.0 |
| ID选择器 | 0.1.0.0 |
| 行内样式 | 1.0.0.0 |
| ！important 重要的 | 无穷大 |
注意：
权重叠加：
盒子模型是我们网络布局的最基础元素
网络布局过程：
盒子模型由四部分组成：
边框border可以设置元素的边框，边框由三部分组成：边框宽度，边框样式，边框颜色
语法：
border-color：边框颜色border-width：边框宽度border-style：边框款式（solid实线，dashed虚线）border：颜色 宽度 款式（可以简化一起设置）边框是可以分别设置的：
border-top：上边框border-bottom：下边框border-left：左边框border-right：右边框当我们只希望改变一条边框时，可以先定义全边框，再定义特别边框，这样css就会利用层叠性实现效果：
<!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> div { height: 30px; width: 50px; /* 我们先定义全边框 */ border: 1px black dashed; /* 随后定义特殊边框，采用层叠性覆盖所需边框的原本边框设计 */ border-top: 2px red solid; } </style></head><body> <div></div></body></html>注意：当两侧都具有边框时，边框会汇聚在一起导致边框效果大打折扣
所以css提供了border-collapse：collapse来合并边框
<!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> table{ /* 对table设置一个范围大小 */ height: 240px; width: 500px; } table,th,td { /* 对全部设置一个边框以及字体设置 */ border: 1px solid black; /* 合并相邻的边框 当两侧都具有边框时，中间边框会变成两侧边框之和（边框相聚） 我们需要采用border-collapse: collapse来合并边框 */ border-collapse: collapse; /* 我们稍微设置一下字体以及对齐 */ font-size: 12px; text-align: center; } </style></head><body> <table> <thead> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>进入搜索</th> <th>最近七日</th> <th>相关链接</th> </thead> <tbody> <tr> <td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> </tbody> </table></body></html>注意：边框会影响盒子实际大小
所以我们在设计盒子时需要保留边框粗细大小
例如：
padding属性用来设计内边距，即边框与内容之间的距离
主要分为四个内边距：
内边距也存在简写方法：
/* 全部内边距 */padding： 5px /* 上下和左右 */padding： 5px 10px/* 上和左右和下 */padding： 5px 10px 15px/* 上和右和下和左 */padding： 5px 10px 15px 20px注意：padding也会影响盒子的大小
当存在padding时，盒子大小也会相应增加相对大小
所以我们在设计盒子时，同样也需要留下padding距离的大小
案例：巧妙利用padding设计导航栏
<!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>padding应用于导航栏</title> <style> .nav { /* 首先给大导航栏设计好高度和边框和底板颜色，设置line-height使文字始终居中 */ height: 41px; border-top: 3px orange solid; border-bottom: 1px #edeefe solid; background-color: #edeefea2; line-height: 41px; } a{ /* 需要先变成行内块元素才可以具有高度，我们需要高度来形成一个框架，使整个框架都是超链接 */ display: inline-block; height: 41px; font-size: 12px; text-decoration: none; color:#4c4c4c; /* 我们采用padding方法控制超链接之间的距离，使其相隔一段距离且不受字体长短影响 */ padding: 0 20px; } a:hover{ /* 我们希望在鼠标滑动在链接上时有明显显示 */ background-color: bisque; color:red; } </style></head><body> <div > <a href="#">设为首页</a> <a href="#">新浪客户端</a> <a href="#">微博</a> <a href="#">关注我</a> </div></body></html>特定情况：当盒子没有设置height或者width时，padding不会撑开盒子
margin用来设置外边距，即控制盒子与盒子之间的距离
主要分为四个外边距：
外边距和内边距的简写方法也与padding完全相同:
/* 全部内边距 */margin： 5px /* 上下和左右 */margin： 5px 10px/* 上和左右和下 */margin： 5px 10px 15px/* 上和右和下和左 */margin： 5px 10px 15px 20px外边距典型应用：使块级盒子水平居中
要求：
下面给出代码示例：
<!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> <!-- 给盒子设置宽度且盒子的左右margin为auto --> <style> .nav{ background-color: pink; height: 200px; width: 500px; margin: 0 auto; } </style></head><body> <div ></div></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> <!-- 给盒子设置宽度且盒子的左右margin为auto --> <style> .nav{ background-color: pink; height: 200px; width: 500px; margin: 0 auto; /* 在这里设置text-align即可使内部元素居中 */ text-align: center; } </style></head><body> <div > <span>123</span> </div></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> <!-- 当父类和子类都具有外边距时，父类会以较大的外边距为主进行移动 --> <!-- 如下所示，父亲的外边距为100px，儿子仍旧紧贴父亲 --> <style> .father { width: 400px; height: 400px; background-color: purple; margin-top: 50px; } .son { width: 200px; height: 200px; background-color: red; margin-top: 100px; } </style></head><body> <div > <div ></div> </div></body></html>注意：因为网页很多元素都带有内外边距，且在各浏览器中标准不同，所以我们通常清除内外边距
我们常常把这行代码作为css内容的第一行
* { padding： 0； margin： 0；}稍微提一句：行内元素尽量只设置左右内外边距
让我们通过HTML和CSS还原下面这个网页排版
图片：
代码：
<!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> <!-- 正常情况来说，我们分HTML和CSS两部分书写，但为了讲解简单，我们放在同一HTML中书写 --> <style> /* 第一步，去除内外边距 */ * { padding: 0; margin: 0; } /* 第二步，设置框架大盒子 */ .box { /* 数据都是采用PS测量，以后你们做项目时也会给出相应值或自己测量 */ height: 415px; width: 298px; background-color: rgba(255, 255, 255, 0); /* 我们希望把盒子居中显示 */ margin: 100px auto; } /* 第三步：我们设置图片和盒子一样宽 */ .box img { width: 100%; } /* 第四步：设置第一行小字 */ .review { font-family: 微软雅黑; font-size: 14px; /* 注意：设置整体高度，使无论多少文字，底部都是对齐的 */ height: 70px; padding: 0 28px; margin-top: 30px; } /* 第五步：设置第二行小字 */ .appraise { font-family: 微软雅黑; font-size: 12px; color: #b0b0b0; padding: 0 28px; margin-top: 28px; } /* 第六步：设置最后一行小字，我们分几部分设置 */ .info { font-size: 14px; padding: 0 28px; margin-top: 15px; } .info em { font-style: normal; color: #ebe4e0; margin: 0 6px 0 15px; } .info .price { color: #ff6700; } </style></head><body> <div > <!-- 首先我们放入照片 --> <img src="案例照片/1.png" alt="图片"> <!-- 放入第一行文字 --> <p >快递牛，整体不错，蓝牙都可以秒连</p> <!-- 放入第二行文字 --> <p >来自1923134的评价</p> <!-- 最后一行文字 --> <p ><span >Redmi AirDots真无线蓝...</span><em>|</em><span >99.9元</span></p> </div></body></html>在这里插上一句：（因为我自己第一次做时出现了问题所以想向你们提醒一下）
除了正常的布局改善，我们也可以通过其他方法获得好看的图形样式
例如圆角边框和阴影，就会为我们的Web页面起到美化的作用
border-radius就是用来控制图形四角的曲度
div { /* border-radius：length;里面设置的边角圆的半径，也可也设置百分比 如果你想获得一个圆形，需要把高度宽度设置一致且length设置成图形直径的一半即可（）； 如果你想获得一个圆角矩形，只需把length设置为高度的一半即可 注意：这里的角仍旧可以单独设置 当两个值时顺序分别是左上和右下，右上和左下 当四个值时顺序分别是左上，右上，右下，左下 */ border-radius：length;}box-shadow用来设置盒子阴影
box-shadow通常有六个内部设置，一般直接简写：
下面我们给出代码示例：
<!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> /* 可以直接设置框架 */ div { height: 200px; width: 200px; box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); margin: 100px auto; } /* 也可以设置在当移动上才可显示 div:hover { height: 200px; width: 200px; box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); margin: 100px auto; } */ </style></head><body> <div></div></body></html>text-shadow用来设置盒子阴影
box-shadow通常有四个内部设置，一般直接简写：
好的，CSS进阶内容—盒子和阴影我们就讲到这里，你是否全部了解了呢？
下面我会介绍浮动定位，敬请期待哦~