CSS
三大特性（层叠性、继承性、优先级 ）
CSS 三大特性之层叠性
在开发中出现样式层叠时候：对一个元素多次设置同一个样式，会使用最后一次设置的属性值 。
样式层叠的原则：样式冲突，就近原则，后定义，后生效；样式不冲突，无论定义先后，始终有效。
CSS 三大特性之继承性
CSS 的继承性的好处：可以从一定程度上简化代码 。
子元素通常能够继承哪些样式：子元素会继承父元素的某些样式，如文本颜色、字体属性等。
用 Chrome 的调试工具可以查询哪些属性是继承的：
*行高的继承
行高不跟单位表示文字大小的倍数，例如 1.5 表示以文字大小的 1.5 倍作为行高。
在 body 中指定行高 1.5 的最大优势：子元素可以根据自己的文字大小自动调整行高。
CSS 三大特性之优先级
学习优先级能解决的问题：当同一个元素被指定了多个选择器，需要掌握了 CSS 的优先级，才能准确地分析出到底 会应用哪个选择器中的样式
选择器的权重：
*优先级注意的问题
1.权重的数字不能进位
2.类选择器永远大于标签选择器
3.继承的权重是0
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>
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加,但是永远不会有进位 */
/* 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>
</html>
盒子模型原理
网页布局的三大核心：盒子模型 → 浮动 → 定位
盒子模型 - 边框 border
在 CSS 中可以通过border属性来设置边框
能够设置的边框样式：
边框的复合写法：
边框的复合写法没有顺序要求，推荐写法：
border: 1px solid #000;
可以单独设置一个边框：
*表格细线边框
适用场景：仅仅适用于表格
border-collapse: collapse
可以把相邻的边框合并到一起
*边框会影响盒子实际大小
如何解决：
1.测量盒子大小时，不测量边框。
2.width / height 减去边框宽度。
盒子模型 - 内边距 padding
内边距的应用场景:设置内容与边框之间的距离 .
分别设置四个方向的内边距:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
*padding 内边距的复合写法
*padding 会影响盒子实际大小
如何解决:width / height 减去多出来的 padding
案例：
利用 padding 撑开盒子巧做等距离的导航栏
相关取值：
- 上边框 3px #ff8500
- 下边框 1px #edeef0
- 盒子高度 41px ，背景色 #fcfcfc
- 文字颜色 #4c4c4c
参考代码：
<!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>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
font-size: 0;
}
.nav a {
/* a属于行内元素 此时必须要转换 行内块元素 */
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a><a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>
*处理 inline-block 的间隙（面试题）
将父级元素的字体设置为 0，内部重新设置字体。
*padding 不会撑开盒子的情况
块元素没有指定 width 属性, padding 不会撑大盒子的宽度,但是设置 padding-top 和 padding-bottom 会撑大盒子的高度 。
盒子模型 - 外边距 margin
外边距的应用场景：控制盒子与盒子之间的距离
给一个盒子分别设置四个方向的外边距：(行内元素垂直外边距除外)
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
盒子外边距的复合写法：
*外边距典型应用-块级盒子水平居中对齐
两个条件：1. 盒子必须有宽度 2. 水平间距设置为 auto
margin：auto；
*行内元素和行内块元素水平居中
给其父盒子添加 text-align: center;
*外边距合并-相邻块元素垂直外边距
上面的盒子有 margin-bottom ，下面的盒子有 margin-top ，取最大值
解决办法：只设置一个盒子的 margin
*外边距合并-嵌套块元素塌陷
嵌套块元素塌陷的情况：
父子元素同时具有上外边距，父元素会塌陷较大的外边距。
解决方案：
1.顶部增加边框
2.顶部增加 padding
3.父级元素overflow: hidden; （推荐）
*清除内外边距
开发时要做清除内外边距的事情的原因：
网页元素很多都带有默认的内外边距，而且浏览器的默认值也不尽相同，清除内外边距可以避免默认样式对布局的干扰 。
推荐的清除内外边距的方案:
* {
margin: 0;
padding: 0;
}
行内元素在设置内外间距时尽量只设置左右内外间距，不要设置上下内外间距。
综合案例 - 产品模块布局
产品模块布局分析图
像素大厨切图稿
素材图片
素材代码
<div class="box">
<img src="images/img.jpg" alt="" />
<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
<div class="appraise">来自于 117384232 的评价</div>
<div class="info">
<h4>Redmi AirDots真无线蓝...</h4>
<em>|</em>
<span> 99.9元</span>
</div> </div>
参考代码：
<!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;
}
body {
background-color: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
/* 让块级的盒子水平居中对齐 */
margin: 100px auto;
}
.box img {
/* 图片的宽度和父亲一样宽 */
width: 100%;
}
.review {
height: 70px;
font-size: 14px;
/* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
padding: 0 28px;
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400;
}
.info span {
color: #ff6700;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/img.jpg" alt="" />
<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
<div class="appraise">来自于 117384232 的评价</div>
<div class="info">
<h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
<em>|</em>
<span> 99.9元</span>
</div>
</div>
</body>
</html>
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！
55
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
