致自己：CSS学习笔记三

一、CSS三大特性

1、优先级介绍

1、特性：不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式。

2、优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

3、注意点：

!important 写在属性值的后面，分号的前面
!important 不能提升继承的优先级，只要是继承，则优先级最低
实际开发中不推荐使用!important

4、代码示例：

<!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>Document</title><style>#btn {color: pink;}.box {color: skyblue;}div {color: green !important;}body {color: yellow;}</style>
</head>
<body><div class="box" id="btn" style="color: red;">测试优先级</div>
</body>
</html>

2、权重叠加计算

1、使用场景：如果是复合选择器，此时则需要通过权重叠加计算方法，判断最终那个选择器的优先级最高，则会生效。

2、权重叠加公式：每一级之间不存在进位

第一级第二级第三极第四级

（ 0 ， 0 ， 0 ， 0 ）

复合选择器中：行内样式个数，id选择器个数，类选择器个数，标签选择器个数

3、比较规则：

先比较第一级数字，如果比较出来了，后面的统统都不看
如果第一级的数字相同，则再比较第二级数字，如果比较出来了，后面的统统都不看
以此类推…
如果最终所有数字都相同，表示优先级相同，此时比较层叠性，即谁在下面，谁的样式生效

4、注意点：!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>/* #one {color: red;}.son {color: blue;}p {color: green;} *//* (行内, id, 类, 标签) *//* (0, 1, 0, 1) */div #one {color: orange;}/* (0, 0, 2, 0) */.father .son {color: skyblue;}/* 0, 0, 1, 1 */.father p {color: purple;}/* 0, 0, 0, 2 */div p {color: pink;} </style>
</head>
<body><div class="father"><p class="son" id="one">标签</p></div>
</body>
</html>

二、盒子模型

1、盒子模型介绍

1、盒子模型的概念：页面中的每一个标签都可以看作是“盒子”，通过盒子的视角更方便进行布局；浏览器在渲染网页的时候，会将网页中的元素看作是一个个矩形的区域，我们称之为“盒子”。

2、盒子模型：CSS中规定每个盒子分别由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，即盒子模型。

2、内容区域的宽度和高度

1、作用：利用width和height属性设置盒子内容区域的大小

2、属性：width、height

3、取值：数字+px

<!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>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div>文字</div>
</body>
</html>

3、边框

1、作用：给盒子设置边框粗细、边框样式、边框颜色等效果

2、单个属性：

属性名	属性值	说明
border-width	数字+px	边框粗细
border-style	实线solid、虚线dashed、点线dotted	边框样式
border-color	颜色取值	边框颜色

3、边框连写：单个属性的连写，取值之间使用空格隔开

border：10px solid red;

4、盒子某个方向设置单个属性：border-方位名词

border-left：10px solid red;
border-top:10px dashed green;
border-right:10px dotted blue;
border-bottom:10px double yellow;

5、盒子实际大小初级计算公式

盒子宽度 = 左边框 + 内容宽度 + 右边框
盒子高度 = 上边框 + 内容高度 + 下边框

<!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>Document</title><style>div {width: 200px;height: 200px;background-color: pink;/* border: 1px solid red; */border-left: 1px solid green;border-top: 2px dashed blue;border-right: 3px dotted yellow;border-bottom: 4px double skyblue;}</style>
</head>
<body><div>内容</div>
</body>
</html>

4、内边距

1、作用：设置边框与内容区域之间的距离

2、属性名：padding

3、常见取值：

取值	示例	含义
一个值	padding：10px;	上右下左都设置为10px
两个值	padding：10px 20px;	上下设置为10px，左右设置为20px
三个值	padding：10px 20px 30px;	上10px，左右20px，下30px
四个值	padding：10px 20px 30px 40px;	上10px，右20px，下30px，左40px

4、单方向设置内边距：只给盒子某个方向设置内边距

属性名：padding-方位名词
属性值：数字+px

5、盒子实际大小最终计算公式：

盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

6、当盒子被border和padding撑大之后，计算盒子大小时需要手动在内容中减去。

7、不会撑大盒子的特殊情况：如果盒子没有设置宽度，此时宽度默认是父盒子的宽度，此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子。

8、自动内减：给盒子设置属性box-sizing:border-box; 即可，此时浏览器会自动计算多余的大小，自动在内容中减去。

<!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>Document</title><style>div {width: 200px;height: 200px;background-color: pink;/* 添加了4个方向的内边距 *//* padding: 50px; *//* padding 属性可以当做复合属性使用, 表示单独设置某个方向的内边距 *//* padding 最多取4个值 *//* 四值: 上  右   下  左 *//* padding: 10px 20px 40px 80px; *//* 三值 : 上   左右   下*//* padding: 10px 40px 80px; *//* 两值 : 上下  左右*//* padding: 10px 80px; */padding-left: 20px;padding-bottom: 200px;/* 內减模式,加了border和padding不需要手动减法*/box-sizing: border-box;}</style>
</head>
<body><div>内容</div>
</body>
</html>

5、外边距

1、作用：设置边框以外，盒子与盒子之间的距离

2、属性名：margin

3、常见取值：

取值	示例	含义
一个值	margin：10px;	上右下左都设置为10px
两个值	margin：10px 20px;	上下设置为10px，左右设置为20px
三个值	margin：10px 20px 30px;	上10px，左右20px，下30px
四个值	margin：10px 20px 30px 40px;	上10px，右20px，下30px，左40px

4、外边距单方向设置：只给盒子的某个方向单独设置外边距

属性名：margin - 方位名词
属性值：数字 + px

5、margin单方向设置的应用

方向	属性	效果
水平方向	margin-left	让当前盒子向右移动
水平方向	margin-right	让当前盒子往左移动
垂直方向	margin-top	让当前盒子往下移动
垂直方向	margin-bottom	让当前盒子往上移动

<!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>Document</title><style>div {width: 200px;height: 200px;background-color: pink;margin-bottom: 20px;}</style>
</head>
<body><div>内容</div><div>内容</div>
</body>
</html>

6、清除默认内外边距

1、使用场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开

始前需要先清除这些标签默认的margin和padding，后续自己设置。

2、外边距正常情况：

场景：水平布局的盒子，左右的margin正常，互不影响
结果：最终两者距离为左右margin的和

<!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>Document</title><style>* {margin: 0;padding: 0;}</style>
</head>
<body><div>内容</div><div>内容</div><p>段落</p><h1>标题1</h1><ul><li>列表</li></ul>
</body>
</html>

3、外边距折叠现象：合并现象

场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好
- 只给其中一个盒子设置margin即可

<!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>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}/* 盒子1和盒子2的外边距合并了，取最大值60 */.one {margin-bottom: 60px;}.two {margin-top: 50px;}</style>
</head>
<body><div class="one">111</div><div class="two">222</div>
</body>
</html>

4、外边距折叠现象：塌陷现象

场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动

<!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>Document</title><style>/* 父盒子随着子盒子的向下移动了50px *//* 解决方法1：给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）padding-top: 50px;解决方法2：给父元素设置overflow：hiddenoverflow: hidden;解决方法3：父元素或者子元素设置浮动float: left;解决方法4父元素或者子元素转换为行内快元素*/.father {width: 300px;height: 300px;background-color: pink;}.son {width: 100px;height: 100px;background-color: skyblue;margin-top: 50px;display: inline-block;          }</style>
</head>
<body><div class="father"><div class="son">son</div></div></body>
</html>

5、行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时
结果：
- 水平方向的margin和padding布局中有效
- 垂直方向的margin和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>Document</title><style>span {/* margin: 100px; *//* padding: 100px; */line-height: 100px;}</style>
</head>
<body><!-- 行内元素   内外边距  margin  padding --><!-- 如果想要通过margin或padding改变行内标签的垂直位置, 无法生效 --><!-- 行内标签的margin-top和bottom 不生效 --><!-- 行内标签的padding-top或botttom 不生效 --><span>span</span><span>span</span>
</body>
</html>