本文详细介绍了CSS的三大特性：层叠性、继承性和优先级，通过实例解析了样式冲突的解决、样式继承的规则以及选择器权重的计算。同时，深入探讨了CSS盒子模型，包括边框、内边距和外边距的概念，以及如何利用它们进行网页布局。此外，还提到了外边距合并现象及其处理方法，以及清除内外边距的技巧，为网页布局打下坚实基础。
1.CSS的三大特性
CSS有三个非常重要的特性：层叠性、继承性、优先级。
1.1层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
1.2继承性
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解就是：子承父业。
行高的继承
<style>
body {
color: pink;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素 body 的行高 1.5 */
/* 这个1.5 就是当前元素文字大小 font-size 的1.5倍 所以当前div 的行高就是21像素 */
font-size: 14px;
}
p {
/* 1.5 * 16= 24 当前的行高 */
font-size: 16px;
}
/* li 没有手动指定文字大小 则会继承父亲的文字大小 body 12px 所以li 的文字大小为12px 所以当前li的行高 12 * 1.5 = 18 */
</style>
</head>
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
<ul>
<li>我没有指定文字大小</li>
</ul>
</body>
1.3优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
<style>
div {
color: pink !important;
}
.test {
color: red;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color:purple;">你笑起来真好看</div>
</body>
优先级注意：
<style>
/* 父亲的权重是100 */
#father {
color: red;
}
/* p继承的权重为0 */
/* 所以以后我们看标签到底执行哪个样式，就先看这个标签有没有直接被选出来 */
p {
color: pink;
}
body {
color: red;
}
/* a链接浏览器默认指定了一个样式：蓝色的 有下划线 a{color: blue;} */
a {
color: green;
}
</style>
</head>
<body>
<div id="father">
<p>你还是很好看</p>
</div>
<a href="#">我是单独的样式</a>
</body>
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
<style>
/* 复合选择器会有权重叠加的问题 */
/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */
ul li {
color: green;
}
/* li 的权重是0,0,0,1 1 */
li {
color: red;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */
.nav li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
权重小练习
1、
<style>
.nav {
color: red;
}
/* 继承的权重是0 */
li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没WiFi</li>
</ul>
</body>
2、
<style>
/* .nav li 权重是11 */
.nav li {
color: red;
}
/* 需要把第一个小li 颜色改为 粉色加粗？ */
/* .pink 权重是10 .nav .pink 权重是20 */
.nav .pink {
color: pink;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink">人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没WiFi</li>
</ul>
</body>
2.盒子模型
页面布局需要学习三大核心，盒子模型，浮动和定位，学习好盒子模型能非常好的帮助我们布局页面。
2.1看透网页布局的本质
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子Box。
- 利用CSS设置好盒子样式，然后摆放到相应位置。
- 往盒子里面装内容。
网页布局的核心本质：就是利用CSS摆盒子。
2.2盒子模型（Box Model）组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。
2.3边框（border）
border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）边框样式 边框颜色
<style>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细 一般情况下都用px */
border-width: 5px;
/* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框 */
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color 边框的颜色 */
border-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
<style>
div {
width: 300px;
height: 200px;
/* border-width: 5px;
border-style: solid;
border-color: pink; */
/* 边框的复合写法 简写 */
/* border: 5px solid pink; */
/* 上边框 */
border-top: 5px solid pink;
/* 下边框 */
border-bottom: 10px dashed purple;
}
</style>
</head>
<body>
<div></div>
</body>
2.4表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
2.5边框会影响盒子实际大小
<style>
/* 我们需要一个200*200的盒子，但是这个盒子有10像素的边框 */
div {
width: 180px;
height: 180px;
background-color: pink;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
2.6内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
padding属性（简写属性）可以有一到四个值。
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
<style>
h1 {
/* width: 100%; */
height: 200px;
background-color: pink;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
2.7外边距（margin）
margin属性用于设置外边距，即控制盒子与盒子之间的距离。
margin简写方式代表的意义跟padding完全一致。
外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度（width）。
- 盒子左右的外边距都设置为auto。
2.8外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况：
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的塌陷
2.8.1相邻块元素垂直外边距的合并
2.8.2嵌套块元素垂直外边距的合并
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
2.9清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
<style>
/* 这句话也是我们css的第一行代码 */
* {
margin: 0;
padding: 0;
}
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
<span>行内元素尽量只设置左右的内外边距</span>
</body>
3.PS基本操作
因为网页美工大部分效果图都是利用PS（Photoshop）来做的，所以以后我们大部分切图工作都是在PS里面完成。
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
