第一章 CSS概述
1.1、概述
CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS 定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档然后引用该文档就可以改变所有页面的布局和外观。
1.2、语法
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明
1.3、注释
注释是用来解释你的代码并且可以随意编辑它，但是浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束，如下：
/* 这是一个注释 */
p {
/* 这是一个注释 */
color: red; text-align: center;
}1.4、如何创建并引用
1.4.1、外部样式表（外联式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title></title>
<!--引入外部样式表-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>外部样式</p>
</body>
</html>1.4.2、内部样式表（内联式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入内部样式表-->
<style>
p {
color: red; text-align: center;
}
</style>
</head>
<body>
<p>外部样式</p>
</body>
</html>1.4.3、内联样式（行内式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--引入内联样式-->
<p style="color: red;text-align: center">外部样式</p>
</body>
</html>1.5、三种引入优先级
- 三种引入方式内容属性不冲突：三种方式会同时起作用。
- 三种引入方式内容属性会冲突：
- 内联式和外联式冲突，内联式位于外联式上方。— 由外联式决定
- 内联式和外联式冲突，外联式位于内联式上方。— 由内联式决定
- 三种方式并存且冲突。 — 由行内式决定
注意：当属性值内存在**“!important ”**关键字的时候，优先使用该类方式导入属性值。
格式：key: value !important;
举例：color: red !important;
第二章 CSS选择器
2.1、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的id的名称，必须唯一且不能重复。
需求描述 ：为id为part1的段落添加红色字体样式
<p id="part1">段落1</p>
<p id="part2">段落2</p>
#part1 {
color: red;
}2.2、class选择器
class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的class的名称，可以不唯一且可以重复。
需求描述 ：为class为green的段落添加绿色字体样式，为class为bold的段落添加加粗字体样式
<p class="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>
.green {
color: green;
}
.bold {
font-weight: bold;
}2.3、标签选择器
除了使用id选择器和class选择器，我们也可以直接使用标签选择器。
需求描述 ：为所有段落标签添加黄色字体样式，为所有超链接标签添加红色字体样式
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<a href="https://www.baidu.com/">打开百度，你就知道！</a>
p {
color: yellow;
}
a {
color: red;
}2.4、子代选择器
子代选择器可以选择当前元素的所有儿子元素。定义的时候用 > 隔开。
需求描述 ：为div标签下所有h1儿子节点设置为红色文本样式
<div>
<h1>儿子标题</h1>
<span><h1>孙子标题</h1></span>
<h1>儿子标题</h1>
</div>
div>h1{
color: red;
}2.5、后代选择器
标签元素除了并列书写还可以嵌套书写，后代选择器就是用于选择嵌套标签元素的一种选择器。定义的时候用 空格 隔开。
需求描述 ：为所有段落标签中的超链接标签添加红色文本
<p class="part">
<a href="http://www.baidu.com/">打开百度，你就知道！</a>
</p>
<a href="http://www.baidu.com/">打开百度，你就知道！</a>
.part a {
color: red;
}2.6、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。定义的时候用 + 隔开。
需求描述 ：为div之后的第一个p标签元素设置为黄色文本样式
<div>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>div + p {
background-color: yellow;
}2.7、后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。定义的时候用 ~ 隔开。
需求描述 ：为div之后的所有p标签元素设置为黄色文本样式
<div>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>
div ~ p {
background-color: yellow;
}2.8、交集选择器
选择的元素必须同时满足多个条件才可以被选择，交集选择器就是干这个的。定义的时候用 标签名.ID名/类名 。
需求描述 ：为所有p标签且class为part的段落添加绿色文本样式
<p class="part">段落</p>
<h1 class="part">标题</h1>
p.part {
color: red;
}2.9、并集选择器
多种元素共享某种属性，这时候就可以使用并集选择器。定义的时候用 逗号 隔开。
需求描述 ：为p标签、h1标签、class=‘link’、id='click’的这几种元素添加红色文本样式
<p>段落</p>
<h1>标题</h1>
<a href="https://www.baidu.com/" class="link">打开百度，你就知道！</a>
<button id="click">我是按钮</button>
p, h1, .link, #click {
color: red;
}2.10、通配符选择器
通配符选择器可以匹配任何标签，我们常用于统一页面样式。
需求描述 ：将页面所有元素的字体设置为红色文本样式
<div>DIV文本</div>
<p>P文本</p>
<a href="https://www.baidu.com">打开百度，你就知道！</a>
* {
color: red;
}2.11、伪类选择器
CSS伪类是用来添加一些选择器的特殊效果。
2.11.1、anchor伪类
<a href="https://www.baidu.com/">打开百度，你就知道！</a>
a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */注意：推荐使用顺序为link、visited、hover、active
2.11.2、input伪类
| 选择器 | 示例 | 示例说明 |
| input:focus | 选择元素输入后具有焦点 | |
| input:checked | 选择所有选中的表单元素 | |
| input:disabled | 选择所有禁用的表单元素 | |
| input:enabled | 选择所有启用的表单元素 | |
| input:in-range | 选择元素指定范围内的值 | |
| input:out-of-range | 选择元素指定范围外的值 | |
| input:invalid | 选择所有无效值的元素 | |
| input:valid | 选择所有有效值的元素 | |
| input:optional | 选择没有"required"属性的元素 | |
| input:required | 选择含有"required"属性的元素 | |
| input:read-only | 选择只读属性的元素 | |
| input:read-write | 选择可写属性的元素 |
2.11.3、other伪类
| 选择器 | 示例 | 示例说明 |
| :not§ | 选择所有p元素以外的元素 | |
| p:empty | 选择所有没有子元素的p元素 | |
| p:first-child | 选择所有p元素的第一个子元素 | |
| p:first-of-type | 选择的每个p元素是其父元素的第一个p元素 | |
| p:last-child | 选择所有p元素的最后一个子元素 | |
| p:last-of-type | 选择每个p元素是其父元素的最后一个p元素 | |
| p:nth-child(2) | 选择所有p元素的父元素的正数第二个子元素 | |
| p:nth-of-type(2) | 选择所有p元素正数的第二个为p的子元素 | |
| p:nth-last-child(2) | 选择所有p元素的父元素的倒数第二个子元素 | |
| p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 | |
| p:only-child | 选择所有仅有一个子元素的p元素 | |
| p:only-of-type | 选择所有仅有一个子元素为p的元素 | |
| p:first-letter | 选择每个p元素的第一个字母 | |
| p:first-line | 选择每个p元素的第一行 | |
| p:before | 在每个p元素之前插入内容 | |
| p:after | 在每个p元素之后插入内容 |
nth-child(n)
- nth-child(n)选择某个父级元素的一个或多个特定的子元素（重点）
- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字从1开始
- n可以是关键字：even 偶数，odd奇数
- n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
| 公式 | 取值 |
| 2n | 偶数（等价于even） |
| 2n+1 | 奇数（等价于odd） |
| 5n | 5 10 15 …（5的倍数） |
| n+5 | 从第5个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第5个） |
nth-child(n)和nth-of-type(n)区别
- nth-child 对父元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E,然后再根据E 找第n个孩子.
2.12、伪元素选择器
- 伪元素选择器可以帮我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
| 选择符 | 简介 |
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before 和 after 创建一个元素，但是是属于行内元素
- before和after 都是一个盒子，都作为父元素的孩子
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- before是放在内容的前面，after是放在了内容的后面
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素 ，after 在父元素内容的后面插入元素
- 伪元素选择器 和 标签选择器 一样，权重为1
2.13、属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
需求描述 ：为类型为text和button的input标签设置一下样式
<input type="text" value="文本框">
<input type="button" value="按钮">input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}需求描述 ：如果title中包含多个单词并且以空格分隔，只要其中有hello，则为当前标签设置为蓝色字体样式
<h2>将会适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>[title~=hello] {
color: blue;
}需求描述 ：如果title中包含一个单词，只要其中有zh，则为当前标签设置为蓝色字体样式
<h2>将会适用:</h2>
<p lang="zh">Hello!</p>
<p lang="zh-cn">Hi!</p>
<h2>将不适用:</h2>
<p lang="us">Hello!</p>
<p lang="en">Hi!</p>[lang|=zh] {
color: blue;
}2.14、子串匹配属性选择器
下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7。
下表是对这些选择器的简单总结：
| 类型 | 描述 |
| [abc^=“def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
| [abc$=“def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
| [abc*=“def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
如果希望对指向 baidu 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
a[href*="baidu.com"] {
color: red;
}第三章 CSS常见样式
3.1、背景样式
CSS 背景属性用于定义HTML元素背景的样式。
| 属性 | 描述 |
| 简写属性，作用是将背景属性设置在一个声明中。 | |
| 背景图像是否固定或者随着页面的其余部分滚动。 | |
| 设置元素的背景颜色。 | |
| 把图像设置为背景。 | |
| 设置背景图像的起始位置。 | |
| 设置背景图像是否及如何重复。 |
3.1.1、background-color
background-color 属性定义了元素的背景颜色
background-color: transparent;
一般情况下默认颜色是transparent（透明），我们也可以手动指定背景颜色为透明色
3.1.2、background-image
- background-image 属性描述了元素的背景图像。
background-image : none | url(url)
| 参数值 | 作用 |
| none | 无背景图（默认） |
| url | 使用绝对或相地址指定的背景图像 |
注意：背景图片后面的地址，千万不要忘记加URL，同时里面的路径不要加引号。
3.1.3、background-repeat
- background-repeat 属性定义背景图像的平铺
background-repeat: repeat| no-repeat| repeat-x| repeat-y
| 参数值 | 作用 |
| repeat | 背景图像在纵向和横向上平铺(默认的) |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
3.1.4、background-position
- background-position 属性可以改变图片在背景中的位置
background-position: x y;
- 参数：X坐标 Y坐标
- 可以使用 方位名词 或者 精确单位
| 参数值 | 说明 |
| length | 百分数|由浮点数字和单位标识符组成的长度值 |
| position | top| center | bottom |left |center |right 方位名词 |
参数是方位名词
①：如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left
②：如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精准单位
①：如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
②：如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
参数是混合单位
①：如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
3.1.5、background-attachment
- background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment : scroll | fixed
| 参数 | 作用 |
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
3.1.6、background-size
设置背景图片大小,图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
| 参数 | 作用 |
| contain | 缩放背景图片以完全装入背景区，可能背景区部分空白，尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩） |
| cover | 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁） |
| <length> | 指定背景图片大小，不能为负值。 |
| <percentage> | 指定背景图片相对背景区的百分比 |
| auto | 以背景图片的比例缩放背景图片 |
3.1.7、background-origin
规定了指定背景图片background-image 属性的原点位置的背景相对区域。
注意：当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。
| 参数 | 作用 |
| border-box | 背景图片的摆放以 border 区域为参考 |
| padding-box | 背景图片的摆放以 padding 区域为参考 |
| content-box | 背景图片的摆放以 content 区域为参考 |
3.1.8、background-attchment
background-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
| 参数 | 作用 |
| fixed | 此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 |
| local | 此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动 |
| scroll | 此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。 |
3.1.9、背景复合写法
background ： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置/图片大小
background : transparent url(image.jpg) repeat-y fixed top/auto auto;
这是实际开发中，我们更提倡的写法。
3.1.10、背景色半透明
CSS3为我们提供了背景颜色半透明的效果
background : rgba(0,0,0,0.3);
- 最后一个参数是alpha 透明度 ，取值范围在0~1之间
- 我们习惯把0.3的 0省略掉，写为background(0,0,0,.3);
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
3.2、文本样式
CSS 文本属性用于定义HTML文本内容的样式。
| 属性 | 描述 |
| 设置文本颜色。 | |
| 设置文本方向。 | |
| 设置字符间距。 | |
| 设置行高。 | |
| 对齐元素中的文本。 | |
| 向文本添加修饰。 | |
| 缩进元素中文本的首行。 | |
| 设置文本阴影。 | |
| 控制元素中的字母。 | |
| 设置或返回文本是否被重写。 | |
| 设置元素的垂直对齐。 | |
| 设置元素中空白的处理方式。 | |
| 设置字间距。 |
👉小技巧
CSS没有给我们提供文字垂直居中的代码，这里我们可以用一个小技巧来实现单行文字垂直居中
解决方案：
- 让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。
简单理解：
- 行高的上空隙和下空隙把文字挤到中间了
- 如果是行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下
3.3、字体样式
| 属性 | 描述 |
| 在一个声明中设置所有的字体属性。 | |
| 指定文本的字体系列。 | |
| 指定文本的字体大小。 | |
| 指定文本的字体样式。 | |
| 以小型大写字体或者正常字体显示文本。 | |
| 指定字体的粗细。 |
字体属性复合写法
<style>
/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
div {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahe';
/* 复合属性：简写的方式 节约代码*/
/* 顺序：font-style font-weight font-size/line-height font-family */
font: italic 700 16px 'Microsoft yahe';
}
</style>- 顺序：文字样式 文字粗细 文字大小 文字字体
- 使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值)，但必须保留font-size 和font-family属性，否则 font 属性将不起作用
3.4、链接样式
<a href="https://www.baidu.com/">打开百度，你就知道！</a>a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */注意：推荐使用顺序为link、visited、hover、active
3.5、列表样式
CSS 列表属性用于定义HTML常见列表的样式。
| 属性 | 描述 |
| 简写属性，用于把所有用于列表的属性设置于一个声明中。 | |
| 将图像设置为列表项标志。 | |
| 设置列表中列表项标志的位置。 | |
| 设置列表项标志的类型。 |
3.6、表格样式
CSS 表格属性用于定义HTML表格的样式。
| 属性 | 描述 |
| 设置是否把表格边框合并为单一的边框。 | |
| 设置分隔单元格边框的距离。 | |
| 设置表格标题的位置。 | |
| 设置是否显示表格中的空单元格。 | |
| 设置显示单元、行和列的算法。 |
3.7、轮廓样式
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
| 属性 | 描述 |
| 在一个声明中设置所有的轮廓属性。 | |
| 设置轮廓的颜色。 | |
| 设置轮廓的样式。 | |
| 设置轮廓的宽度。 |
附：CSS三大特性
1.1、层叠性
- 相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。
- 层叠性主要解决样式冲突的问题
- 层叠性原则：
-
- 样式冲突，遵循的原则是就近原则
1.2、继承性
- CSS中的继承：子标签会继承父标签里面的某些样式
- 如文本颜色和字号等
特殊： 行高的继承
body {
font:12px/1.5 Microsoft YaHei
}- 1.5的意思：让里面所有的子元素的行高是当前文字大小的1.5倍
1.3、优先级
– 当同一个元素指定多个选择器，就会有优先级的产生
<head>
<style>
div{
color:pink;
}
.text {
color:red;
}
</style>
</head>
<body>
<div class="text">你笑起来真好看</div>
</body>- 选择器相同，则执行层叠性
- 选择器不同，则按权重
| 选择器 | 权重 |
| 继承或者 * | 0，0，0，0 |
| 元素选择器（标签选择器） | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style="" | 1，0，0，0 |
| ！important重要的 | 无穷大 |
- 类选择器权重为10
- 伪类选择器权重为10
- ID选择器权重为100
1.4、优先级注意点
- 等级判断是从左到右，如果某一位数值相同，则判断下一位数值
- 继承的权重是0
- 权重可以叠加，但是永远不会有进位
1.5、权重的叠加
- 权重叠加：如果是复合选择器，则会有权重的叠加，需要计算权重
<head>
<style>
li {
color:green;
}
/* li 的权重是 0,0,0,1 */
ul li{
color :red;
}
/* 复合选择器权重叠加，ul li权重 0,0,0,1 + 0,0,0,1 =0,0,0,2 */
.nav li{
color:pink;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
<style>- div ul li----------> 0,0,0,3
- .nav ul li -------------->0,0,1,2
- a:hover ---------------->0,0,1,1 /* 伪类选择器*/
- .nav a-------------------->0,0,1,1
第四章 CSS盒子模型
4.1、概述
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距、边框和外边距。
下面的例子中的元素的总宽度为300px：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}让我们自己算算：
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
也就是如下的图：
- 最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 最终元素的总高度计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
4.2、内边距
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 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像素，顺时针 |
4.3、边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，CSS边框属性允许你指定一个元素边框的样式和颜色。
常用的属性：
| 属性 | 描述 |
| 简写属性，用于把针对四个边的属性设置在一个声明。 | |
| 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 | |
| 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 | |
| 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 | |
| 简写属性，用于把下边框的所有属性设置到一个声明中。 | |
| 设置元素的下边框的颜色。 | |
| 设置元素的下边框的样式。 | |
| 设置元素的下边框的宽度。 | |
| 简写属性，用于把左边框的所有属性设置到一个声明中。 | |
| 设置元素的左边框的颜色。 | |
| 设置元素的左边框的样式。 | |
| 设置元素的左边框的宽度。 | |
| 简写属性，用于把右边框的所有属性设置到一个声明中。 | |
| 设置元素的右边框的颜色。 | |
| 设置元素的右边框的样式。 | |
| 设置元素的右边框的宽度。 | |
| 简写属性，用于把上边框的所有属性设置到一个声明中。 | |
| 设置元素的上边框的颜色。 | |
| 设置元素的上边框的样式。 | |
| 设置元素的上边框的宽度。 |
4.4、外边距
margin 清除周围的（外边距）元素区域，margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
常用的属性：
| 属性 | 描述 |
| 简写属性。在一个声明中设置所有外边距属性。 | |
| 设置元素的下外边距。 | |
| 设置元素的左外边距。 | |
| 设置元素的右外边距。 | |
| 设置元素的上外边距。 |
4.5、外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
①相邻块元素垂直外边距的合并
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
解决方案：
尽量只给一个盒子添加 margin 值
②嵌套块元素垂直外边距的塌陷
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加 overflow: hidden
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
附、外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件
- 盒子必须制定了宽度(width)
- 盒子左右的外边距都设置为 auto
.header {
width: 960px;
margin: 0 auto;
}左右的外边距都设置为 auto 有三种写法：
margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto;
第五章 CSS显示特性
5.1、块级元素
块级元素(block)特性：
①：比较霸道，自己独占一行
②：高度，宽度，外边距以及内边距都可以控制
③：宽度默认是容器（父级宽度）的100%
④：是一个容器及盒子，里面可以放行内或块级元素
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
注意：
①：文字类的元素内不能使用块级元素
②：<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
③：同理，<h1>~<h6>等都是文字类块级标签，里面也不能存放其他块级元素。
5.2、行内元素
行内元素的特点：
①：相邻行内元素在一行上，一行可以显示多个
②：高，宽直接设置是无效的
③：默认宽度就是它本身内容的宽度
④：行内元素只能容纳文本或其他行内元素
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
- 链接里面不能再放链接
- 特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全
5.3、行内块元素(可变元素)
**可变元素主要有：**根据上下文关系确定该元素是块元素还是内联元素
applet ,button ,del ,iframe , ins ,map ,object , script
特点：
①：和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
②：默认宽度就是它本身内容的宽度(行内元素特点)
③：高度，行高，外边距以及内边距都可以控制(块级元素特点)
5.4、元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
5.5、类别修改
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
- display:block – 显示为块级元素
- display:inline – 显示为内联元素
- display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
5.6、元素隐藏
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
但两者的区别在于：
- display:none ：使元素在网页上不可见，元素不再占用空间。
- visibility: hidden ：使元素在网页上不可见，元素仍会占用空间。
- overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
| 属性值 | 描述 |
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
第六章 传统网页布局的三种方式
网页布局的本质➡用 CSS 来摆放盒子。 把盒子摆放到相应位置
CSS 提供了三种传统布局方式：
- 普通流（标准流）
- 浮动
- 定位
6.1、标准流
所谓的标准流，就是标签按照规定好默认方式排列
- 块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等
以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。
6.2、概述
CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
6.3、浮动
6.3.1、浮动的典型应用
- 浮动最典型的应用：可以让多个块级元素一行内排列显示。
- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
什么是浮动？
- float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法：
选择器 {
float: 属性值;
}| 属性值 | 描述 |
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
- 网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
- 网页布局第二准则：先设置盒子大小，之后设置盒子的位置。
6.3.2、浮动的特性
设置了浮动（float）的元素的最重要的特性：
- 脱标：浮动元素会脱离标准流
- 浮动的盒子不再保留原先的位置
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
- 浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
- 浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
6.3.3、浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置, 我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
6.3.4、浮动的注意点
- 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
- 一个元素浮动了，理论上其余兄弟元素也要浮动
- 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
6.3.5、清除浮动
我们前面浮动元素有一个标准流的父元素, 他们有一个共同的特点,
都是有高度的.但是, 所有的父盒子都必须有高度吗?
理想中的状态, 让子盒子撑开父亲. 有多少孩子,我父盒子就有多高.
但是不给父盒子高度会有问题吗?..…
为什么要清除浮动
- 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
- 理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高.
6.3.6、清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
语法：
选择器 {
clear: 属性值;
}| 属性值 | 描述 |
| left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
- 我们实际工作中，几乎只用 clear:both
- 清除浮动的策略是：闭合浮动
- 只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
6.3.7、清除浮动的方法
- 额外标签法也称为隔墙法，是W3C推荐的做法
- 父级添加 overflow 属性
- 父级添加 after 伪元素
- 父级添加双伪元素
①额外标签法
- 额外标签法会在浮动元素末尾添加一个空的标签,例如：
- <div style = "clear:both"></div>，或者其他标签（如</br>)等
- 注意：要求这个新的空标签必须是块级元素
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差实际工作可能会遇到,但是不常用
②overflow
- 可以给父级添加overflow属性，将其属性值设置为hidden,auto或scroll
- 优点：代码简洁
- 缺点：无法显示溢出的部分
③after伪元素法
:after 方式是额外标签法的升级版。也是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6,7专有*/
*zoom : 1;
}- 优点：没有增加标签，结构更简单
- 缺点：需要照顾低版本浏览器
- 代表网站：百度、淘宝、网易等
④双伪元素
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}- 优点：代码更简洁
- 缺点：需要照顾低版本浏览器
- 代表网站：小米、腾讯等
6.3.8、浮动总结
①：父级没高度
②：子盒子浮动了
③：影响下面布局了，我们就应该清除浮动了。
| 清除浮动方式 | 优点 | 缺点 |
| 额外标签法(隔墙法) | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持：after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持：after，兼容性问题 |
6.4、定位
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现
- 浮动可以让多个块级盒子一行没有缝隙的排列显示，经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子
- 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
CSS 有三种基本的定位机制：普通流（相对定位）、绝对定位和浮动定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
6.4.1、定位的组成
定位 = 定位模式 +边偏移
- 定位模式用于指定一个元素在文档中的定位方式
- 边偏移则决定了该元素的最终位置
- 定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个
| 值 | 描述 |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left: 20” 会向元素的 left 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
注意：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
边偏移就是定位的盒子移动到最终位置。
| 边偏移属性 | 示例 | 描述 |
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素的上边线的距离 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素的下边线的距离 |
| right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
| left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
6.4.2、静态定位static(了解)
- 静态定位是元素的默认定位方式，无定位的意思
- 静态定位按照标准流特性摆放位置，它没有边偏移
选择器 {
position: static;
}6.4.3、相对定位relative
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative; left: 30px; top: 20px;
}
- 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
- 特点：
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待。（不脱标，继续保留原来位置）
- 因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
6.4.4、绝对定位absolute
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
- 绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的
- 特点：
- 如果没有祖先元素，或者祖先元素没定位，则以浏览器为准进行定位(Document 文档)
- 如果祖先元素父级有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占用原先的位置（脱标）
- 所以绝对定位是脱离标准流的
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
注意：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
①绝对定位盒子水平居中
- 加了绝对定位的盒子不能通过margin: 0 auto水平居中
- 但是可以通过以下计算方法实现水平和垂直居中
- left:50% ； 让盒子的左侧移动到父级元素的水平中心位置
- margin-left: -100px; 让盒子向左移动自身宽度的一半
.box {
position: absolute;
/* 1.left走50%，父容器宽度的一半 */
left: 50%;
/* 2.margin 负值往左边走 自己盒子宽度的一半 */
margin-left: -xx;
}6.4.5、子绝父相
意思：子级使用绝对定位，父级则需要相对定位
①：子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
②：父盒子需要加定位限制子盒子在父盒子内显示
③：父盒子布局时，需要占有位置，因此父亲只能是相对定位。
总结：因为父级需要占有位置，因此是相对定位，子盒子不要占有位置，则是绝对定位
6.4.6、固定定位fixed
固定定位是元素固定于浏览器的可视区的位置
主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变
- 特点：
-
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先的位置(脱标)
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
👉固定定位小技巧
固定定位小技巧： 固定在版心右侧位置
给父元素添加transform：translate(0).可以改变固定定位的父元素为参照点
小算法：
- 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。
- 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
6.4.7、粘性定位sticky(了解)
粘性定位可以被认为是相对定位和固定定位的混合
- 特点：
-
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位的特点）
- 必须添加top，left，right，bottom其中一个才有效
跟页面滚动搭配使用。 兼容性较差，IE 不支持。
6.4.8、定位模式总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative相对定位 | 否（占有位置） | 相对于自身位置移动 | 常用 |
| absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 常用 |
| fixed固定定位 | 是（不占有位置） | 浏览器可视区 | 常用 |
| sticky | 否（占有位置） | 浏览器可视区 | 当前阶段少 |
- 一定要记住相对定位，固定定位，绝对定位的两个大特点：1.是否占有位置（脱标否）2.以谁为基准点移动
- 重点学会子绝父相（儿子绝对定位，父亲必须相对定位）
6.4.9定位叠放次序z-index
- 在使用定位布局时候，可能会出现盒子重叠的情况
- 此时，可以用 z-index 来控制盒子的前后次序(z轴)
选择器 {
z-index: 1;
}- 数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有 z-index 属性
1347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
