CSS学习第三篇
- 1. CSS三大特性
- 1.1 层叠性
- 1.2 继承性
- 1.3 优先级
- 2. 盒子模型
- 2.1 为什么要学盒子模型？
- 2.2 盒子模型（Box Model）的组成
- 2.3 边框（border）
- 2.3.1 边框宽度、样式、颜色的应用
- 2.3.2 边框应用之表格细线边框
- 2.3.3 边框影响盒子实际大小
- 2.4 内边距（padding）
- 2.4.1 内边距（padding）的应用
- 2.4.2 内边距（padding） 的复合写法
- 2.4.3 内边距会撑大盒子
- 2.5 外边距（margin）
- 2.5.1 外边距让盒子水平居中
- 2.5.2 外边距合并
- 2.5.3 清除内外边距
- 后记
1. CSS三大特性
CSS有三个非常重要的特性：层叠性、继承性、优先级
1.1 层叠性
相同选择器设置相同的样式，此时一个样式就覆盖（层叠）另一个冲突的样式。因而，层叠性主要解决样式冲突的问题。
层叠性原则：
（1）样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
（2）样式不冲突：不会层叠
<!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: red;
font-size: 18px;
}
div {
color: pink;
}
</style>
</head>
<body>
<div>长江后浪推前浪，前浪死在沙滩上</div>
</body>
</html>
此时会呈现后来出现的pink：
1.2 继承性
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解：子承父业。
（1）恰当地使用继承可以简化代码，降低CSS的复杂性
（2）子元素可以继承父元素的样式
（font-、text-、line-这些元素开头的可以继承，以及color属性）
<!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: pink;
font: 18px/24px 'Microsoft YaHei';
/*font: 18px/1.5 'Microsoft YaHei';*/
}
</style>
</head>
<body>
<div>
<p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
</div>
</body>
</html>
特殊：行高的继承性
（1）行高可以跟单位也可以不跟单位
（2）如果子元素没有设置行高，则会继承父元素的行高
（3）此时子元素的行高是：当前子元素的文字大小*1.5
（4）body行高1.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>
body {
color: pink;
/* font: 18px/24px 'Microsoft YaHei';*/
font: 18px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素 body 的行高 1.5 */
/* 这个1.5 就是当前元素文字大小font-size 的1.5倍 所以当前div 的行高就是30px*/
font-size: 20px;
}
p {
/* 1.5 * 16 = 当前的行高 */
font-size: 16px;
}
/* li 没有手动指定文字大小
则会继承父亲的 文字大小 body 18px
所有li的文字大小为18px
当前li 的行高就是18*1.5=27 */
</style>
</head>
<body>
<div>1.粉红色的回忆</div>
<p>2.粉红色的回忆</p>
<ul>
<li>我没有指定文字大小</li>
</ul>
</body>
</html>
1.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生
（1）选择器相同，则执行层叠性
（2）选择器不同，则根据选择器权重执行
选择器权重如下表所示：
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者 * | 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）可以理解为类选择器永远大于元素选择器，ID选择器永远大于类选择器，以此类推
（3）等级判断从左到右，如果某一位数值相同，则判断下一位数值
（4）可以简单记忆法：通配符和继承权重为0；标签选择器为1，类（伪类）选择器为10，ID选择器为100，行内样式为1000，！important为无穷大
（5）继承的权重为0，如果该元素没有被选中，不管父元素权重多高，子元素得到的权重都是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>
.test {
color: red;
}
div {
color: pink;
}
</style>
</head>
<body>
<div class="test">你笑起来真好看</div>
</body>
</html>
请看例②：ID选择器＞类选择器
<!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>
.test {
color: red;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo">你笑起来真好看</div>
</body>
</html>
请看例③：行内样式＞ID选择器
<!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>
.test {
color: red;
}
div {
color: pink;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple;">你笑起来真好看</div>
</body>
</html>
请看例④：！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>
.test {
color: red;
}
div {
color: pink !important;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple;">你笑起来真好看</div>
</body>
</html>
请看例⑤：继承的权重为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>
/* 父亲的权重是100 */
#father {
color: red !important;
}
/* p继承的权重为0 */
/* 所以以后我们看标签到底执行哪个样式,就先看这个标签有没有被选出来 */
p {
color: pink;
}
</style>
</head>
<body>
<div id="father">
<p>你还是很好看</p>
</div>
</body>
</html>
权重叠加：若是复合选择器则有权重叠加，需计算权重
练习：
（1）div ul li → 0，0，0，3
（2）.nav ul li → 0，0，1，2
（3）a:hover → 0，0，1，1
（4）.nav a → 0，0，1，1
例如：
<!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>
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加，但是永远不会有进位 */
/* 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;
}
</style>
</head>
<body>
<ul>
<li>大猪蹄子</li>
<li>猪肘子</li>
<li>猪尾巴</li>
</ul>
</body>
</html>
2. 盒子模型
2.1 为什么要学盒子模型？
首先我们先来了解一下网页布局：
页面布局要学习三大核心：盒子模型、浮动、定位
网页布局过程：
（1）先准备好相关的网页元素，网页元素基本都是Box
（2）利用CSS设置好盒子样式，然后摆放到相应位置
（3）往盒子里面装内容
故，网页布局的核心本质：利用CSS摆盒子
因而，学好盒子模型利于我们对网页布局！
2.2 盒子模型（Box Model）的组成
所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框（border）、外边距（margin）、内边距（padding）、实际内容（content）。
2.3 边框（border）
border可以设置元素的边框，边框有三部分组成：border-width边框宽度（粗细）、border-style边框样式、border-color边框颜色。
border复合写法无顺序！
2.3.1 边框宽度、样式、颜色的应用
<!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;
/* 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>
</html>
2.3.2 边框应用之表格细线边框
<!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: 250px;
}
th {
height: 35px;
}
table,
td,
th {
/*边框border的复合写法*/
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<!-- <table align="center" border="1" cellpadding="10" cellspacing="0"> -->
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="down.jpg"></td>
<td>124</td>
<td>675432</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>212</td>
<td>7654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="up.jpg"></td>
<td>23</td>
<td>75645</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="down.jpg"></td>
<td>121</td>
<td>7676</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="up.jpg"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="up.jpg"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧 </a><a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</body>
</html>
2.3.3 边框影响盒子实际大小
<!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>
/* 我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框*/
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框会额外增加盒子的实际大小，因此我们有两种解决方案：
（1）测量盒子大小的时候，不量边框
（2）如果测量的时候包括了边框，则需要width/height减去边框宽度
2.4 内边距（padding）
2.4.1 内边距（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: pink;
padding-left: 20px;
padding-top: 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
2.4.2 内边距（padding） 的复合写法
padding复合属性：
| 值的个数 | 表达意思 |
|---|---|
| padding : 5px ; | 1个值，代表上下左右都有5像素内边距 |
| padding : 5px 10px ; | 2个值，代表上下内边距是5像素，左右内边距是10像素 |
| padding : 5px 10px 20px ; | 3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素 |
| padding : 5px 10px 20px 30px ; | 4个值，代表上内边距是5像素，右内边距是10像素，下内边距是20像素，左内边距是30像素 （顺时针） |
2.4.3 内边距会撑大盒子
解决方案：
如果要保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可
2.5 外边距（margin）
2.5.1 外边距让盒子水平居中
外边距可以让块级盒子水平居中，但是必须满足两个条件：
（1）盒子必须指定了宽度（width）
（2）盒子左右的外边距都设置了auto
注：该法是让块级元素水平居中，行内元素或者行内块元素水平居中则是给其父元素添加text-align:center即可
<!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>
.header {
width: 900px;
height: 200px;
background-color: pink;
/* margin: 0 auto; */
margin: 100px auto;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
<!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>
.header {
width: 900px;
height: 200px;
background-color: pink;
/* margin: 0 auto; */
margin: 100px auto;
text-align: center;
}
/* 行内元素或者行内块元素水平居中则给其父元素添加text-align:center即可 */
</style>
</head>
<body>
<div class="header">
<span>里面的文字</span>
</div>
<div class="header">
<img src="down.jpg" alt="">
</div>
</body>
</html>
2.5.2 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
（1）相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟元素）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top时，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者。
这种现象被称为相邻块元素垂直外边距的合并
解决方案：尽量只给一个盒子添加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>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
<!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: pink;
}
/* .one {
margin-bottom: 20px;
} */
/* .one和.two选择一个*/
.two {
margin-top: 20px;
/* margin: 30px;*/
/* margin: 30px 50px; */
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
（2）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会坍塌较大的外边距值
解决方案：
（1）可以为父元素定义上边框
（2）可以为父元素定义上内边距
（3）可以为父元素添加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>
.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>
</html>
2.5.3 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除网页元素的内外边距。
<!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>
123
<ul>
<li>abcd</li>
</ul>
>
</body>
</html>
去掉注释代码之后：（即加上清除内外边距之后）
注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。
<!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>
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
<span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>
后记
还未完成知识点：
（1）ps基本操作未写入
（2）Fastone Capture测量软件
