共计 17418 个字符，预计需要花费 44 分钟才能阅读完成。

CSS 语法

一、CSS 语法规范

1.CSS 样式规则

 <!DOCTYPE html>
 <html lang="zh-CN">
 <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>体验 CSS 语法规范</title>
     <style>
         /* 选择器 {样式}*/
         /* 给谁改样式 {改什么样式}*/
         p {
             color: red;
             font-size: 12px;
             /* 修改了文字颜色为红色，大小为12像素*/
         }
     </style>
 </head>
 <body>
     <p>
         这是一段文字
     </p>
 </body>
 </html>

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对改对象设置的具体样式
属性和属性值以 键值对 的形式出现
属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等
属性和属性值之间用英文 “ : ” 分开
多个键值对之间用英文 “ ; ” 进行区分

2.CSS 代码风格

样式格式书写

 /*1.紧凑格式*/
 h3 { color: deeppink; font-size: 20px;}
 
 /*2.展开格式*/
 h3 {
   color: pink;
   font-size: 20px;
 }

空格规范

 h3 {
   color: pink;
 }

1.属性值前面，冒号后面，保留一个空格

2.选择器（标签）和大括号中间保留空格

二、CSS 选择器

 <div>我是div</div>
 <div>我是div</div>
 <p>
     我是段落
 </p>
 <ul>
     <li>我是 ul 里面的 li</li>
 </ul>
 <ol>
     <li>我是 ol 里面的 li</li>
 </ol>

1.选择一个 div ，将里面的文字改为红色

2.选择一个 ul 里面的 li 文字改为红色

选择器分为 基础选择器 和 复合选择器

基础选择器是由 单个选择器组成 的
基础选择器又包括：标签选择器、类选择器、id 选择器 和 通配符选择器

选择器 就是根据不同需求把不同的标签选出来，字面意思，就是 **选择标签用的

1.标签选择器

 标签名 {
   属性1: 属性值1;
   属性2: 属性值2;
   属性3: 属性值3;
   ...
 }

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的

CSS 样式

作用：把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签

优点： 能快速为页面中同类型的标签统一设置样式

2.类选择器

若需要差异化选择不同的标签，单独选一个或者某几个标签，可以使用 类选择器

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 “.” 号表示。

 .类名 {
   属性1: 属性值1；
   ...
 }
 /*例：将所有拥有 red 类的 HTML 元素改为红色*/
 .red {
   color: red;
 }
 /*结构需要用 class 属性来调用 class 类的意思*/
 <div class='red'>
     变红色
 </div>

注意：

1.类选择器使用英文点号进行标识，后面紧跟类名（自定义）

2.可以理解为给标签取了一个名字

3.不要使用纯数字、中文等命名，尽量使用英文字母表示

4.命名要有意义，尽量一眼能看出命名目的

5.命名规范可见 Web 前端开发规范手册

类选择器—多类名

 <div class="red font20">
     test
 </div>

1.在标签 class 属性中写多个类名

2.多个类名中间必须用空格分开

3.id 选择器

 #id名 {
   属性1: 属性值1;
   ...
 }
 <!--例,将 id 为 nav 元素中的内容设置为红色-->
 #nav {
   color: red;
 }

注意：id 属性只能在每个 HTML 文档中出现一次，一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

4.通配符选择器

* {
	属性1: 属性值1;
	...
}

在 CSS 中，通配符选择器使用 “*” 定义，它表示选取页面中所有元素（标签）
通配符选择器不需要调用，自动就给所有的元素使用样式

5.总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	p { color: red;}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多	.nav { color: red;}
id 选择器	一次只能选择1个标签	id 属性只能在每个 HTML 文档中出现一次	一般和 js 搭配	#nav { color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊使用	* { color: red;}

三、CSS 字体属性

1.字体系列

p {font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei","微软雅黑"}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: “Microsoft YaHei”, tahoma, arial, “Hiragino Sans GB”;}

2.字体大小

p {
    font-size: 20px;
}

CSS 使用 font-size 属性定义字体大小

px （像素）大小是网页中最常用的单位
谷歌浏览器默认的文字大小为 16 px
不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小
可以给 body 指定整个页面文字的大小
标题标签比较特殊，需要单独指定文字大小

补充：若需要将字体缩小到小于 12px 则：

p {
  font-size: 12px;
  line-height: 36px;
  /* 用 transform的scale缩放属性将字体缩放，实际上并没有改变字体大小，只是将标签缩放了 */
  transform: scale(0.8);
}

3.字体粗细

p {
    font-weight: bold;
}

CSS 使用 fort-weight 属性设置文本字体的粗细

属性值	描述
normal	默认值
bold	定义粗体（加粗）
100-900	400 等同于 normal, 700 等同于 bold 注意数字后不要跟单位

4.文字样式

p {
    font-style: normal;
}

CSS 使用 font-style 属性设置文本的风格

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式

5.字体复合属性

body {
    font: font-style font-weigt font-size/line-height font-family;
    /*例*/
	font: italic 700 16px 'Microsoft yahei';
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（默认值），但 必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

6.字体属性总结

属性	表示	注意点
font-size	字号	常用单位为 px (像素)，后要跟单位
font-family	字体	注意与团队沟通确定字体
font-weight	字体粗细	加粗为 bold 或 700，不加粗为 normal 或 400，注意数字不跟单位
font-style	字体样式	倾斜为 italic 不倾斜为 normal
font	字体连写	字体连写有顺序，不能随意换位置。字号和字体必须同时出现

四、CSS 文本属性

CSS 文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进，行间距等

####

1.文本颜色

div {
    color: red;
}

color 属用于定义文本的颜色

表示	属性值
预定义的颜色值	red green 等
十六进制	#FF0000, #FF6600,#29D794
RGB 代码	rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)

2.对齐文本

div {
    text-align: center;
}

text-align 属性用于设置元素内的文本内容对齐方式

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

3.装饰文本

div {
    text-decoration: underline;
}

text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

属性值	描述
none	默认（可以去掉链接下划线）
underline	下划线(链接自带下划线)
overline	上划线
line-through	删除线

4.文本缩进

div {
    text-indent: 10px;
}

text-indent 属性用来指定文本的第一行缩进，通常是 段落的首行缩进

p {
    text-indent: 2em;
}

em 是一个相对单位，就是当前元素 1个文字的大小，如果当前元素没有设置大小，就会按照父元素1个文字的大小

5.行间距

p {
    line-height: 26px;
}

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

6.文本属性总结

属性	表示	注意点
color	文本颜色	通常用十六进制表示
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常用于段落首行缩进两个字
text-decoration	文本修饰	通常用于添加 / 取消下划线
line-height	行高	控制行与行之间的距离

五、CSS 的引入方式

按照 CSS 样式书写的位置（引入的方式），CSS 样式表分为三大类

1.内部样式表（嵌入式）

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

内部样式表式写到 HTML 页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般放在文档的 <head> 标签中
通过这种方式，可以方便控制整个页面中的元素样式设置
代码结构清晰，但是没有实现结构与样式完全分离

2.行内样式表（行内式）

<div style="color: red; font-size: 12px;">文本内容</div>

style 其实就是标签的属性
在双引号中间，写法要复合 CSS 规范
可以控制当前的标签设置样式
由于书写繁琐且结构与样式相分离，推荐对当前元素添加简单样式时少量使用
使用行内样式表设定 CSS ，通常也被称为 行内式引入

3.外部样式表（链接式）

<link rel="stylesheet" href="css文件路径">

实际开发多用外部样式表，核心是样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用

引入外部样式表分两步：

1.新建一个后缀名为 .css 的样式文件，内写 CSS 代码

2.在 HTML 页面中，使用 <link> 标签引入这个文件

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”, 表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的 URL ，可以是相对路径或绝对路径

使用外部样式表设定 CSS ，通常也被称为 外链式 或 链接式引入 ，这种方式最常用

六、Chrome 调试工具

Chrome 浏览器提供了一个调试工具，可以用来调试我们的 HTML 结构和 CSS 样式

1.打开调试工具

打开 Chrome 浏览器，按下 F12 或 右键—检查

2.使用调试工具

1.Ctrl+滚轮可以放大 / 缩小开发者工具代码大小

2.一边为 HTML 架构，另一边为 CSS 样式

3.CSS 样式可以改动数值和查看颜色

4.Ctrl+0 复原浏览器大小

5.如果点击元素，发现右侧没有样式引入，可能是类名或者样式引入错误

6.如果有样式，但是样式前面有 黄色叹号提示，则是样式属性书写错误

七、Emmet 语法

1.快速生成 HTML 结构语法

1.生成标签，直接输入标签名按 tab 键即可

2.如果想要生成多个相同标签，加上 * 即可，例：div*3 快速生成三个 div

3.如果有父子级关系的标签，可以用 >，例：ul > li

4.如果有兄弟关系的标签，用 + ，例：div + p

5.如果生成带有类名或者 id 名字的，直接写 .类名 或者 #id名 tab 键就可以了

6.如果生成的 div 类名是有顺序的，可以用自增符号例：*5`

7.如果想要在生成的标签内部写内容，可以用 { } 表示

2.快速生成 CSS 样式语法

<!--tac +tab-->
text-align: center;

<!--ti2em +tab-->
text-indent: 2em;

<!--w100 +tab-->
width: 100px;

<!--h100 +tab-->
height: 100px;

<!--lh26 +tab-->
line-height: 26px;

<!--tdn +tab-->
text-decoration: none;

3.快速格式化代码

VsCode 快速格式化代码：shift + alt + f 或右键 – 格式化文档

八、CSS 的复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为 基础选择器 和 复合选择器，复合选择器为基本选择器组合形成

1.后代选择器（重要）

后代选择器 又称为 包含选择器，可以选择父元素里面子元素

元素1 元素2 { 样式声明 }
ul li { 样式声明 } /* 选择 ul 里面所有的 li 标签元素 */

元素1 和元素2 中间用 空格隔开
元素1 是父级，元素2 是子集，最终选择的是 元素2
元素2 只要是元素1 的后代即可
元素1 和元素2 可以是任一基础选择器

2.子选择器（重要）

子元素选择器 只能选择作为某元素的最近一级子元素

<head>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

元素1 和元素2 中间用 大于号 隔开
元素1 是父级，元素2 是子级，最终选择的是元素2

3.并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式

元素1,元素2 { 样式声明 }
ul,
div { 样式声明 }		/* 选择 ul 和 div 标签元素 */

元素1 和元素2 中间用 逗号隔开
并集选择器常用于集体声明

4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果

伪类选择器书写最大的特点是 用冒号 ( : ) 表示，比如 :hover、:first-child

链接伪类选择器

a:link			/* 选择所有未被访问的链接 */
a:visited		/* 选择所有已被访问的链接 */
a:hover			/* 选择鼠标指针位于其上的链接 */
a:active		/* 选择活动链接 （鼠标按下未弹起的链接） */

链接伪类注意事项

1.为了确保生效，要按照 LVHA 的顺序声明 link – visited – hover – active (记忆： lv 包包 hao)

2.因为 a 链接在浏览器中具有默认样式，所以在实际中要给链接单独指定样式

`:focus`伪类选择器

:focus 伪类选择器 用于选取获得焦点的 表单元素

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器主要针对于表单元素来说

input:focus {
    background-color:yellow;
}

5.复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>a
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住 `a{}` 和 `a:hover` 实际开发的写法
`:focus`选择器	选择获得光标的表单	跟表单相关	较少	`input:focus` 记住这个写法

九、CSS 的元素显示模式

元素显示模式就是 元素（标签）以什么方式进行显示，比如 <div> 自己占一行，一行可以放多个 <span>

HTML 元素一般分为 块元素 和 行内元素

1.块元素

常见的块元素有： <h1>-<h6> <p> <div> <ul> <ol> <li> 等，其中 <div> 标签 最典型的块元素

块元素特点：

1.独占一行

2.高度，宽度，外边距以及内边距都可以控制

3.宽度默认是容器（父级宽度）的100%

4.是一个容器及盒子，里面可以放行内或者块级元素

注意：

文字类的元素内不能使用块元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是 <div>
同理，<h1>-<h6> 等都是文字类块级标签，不能放其他块级元素

2.行内元素

常见的行内元素有 <a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等，其中 <span> 标签是 最典型的行内元素，有的地方也将行内元素称为 内联元素

行内元素特点：

1.相邻行内元素在一行上，一行可以显示多个

2.高、宽直接设置是无效的

3.默认宽度就是他本身内容的宽度

4.行内元素只能容纳文本或者其他行内元素

注意：

链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

3.行内块元素

在行内元素中有几个特殊的标签–<img/>,<inputt/>, <td>，他们 同时具有块元素和行内元素的特点。有些资料称他们为 行内块元素

特点：

1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）

2.默认宽度就是本身内容的宽度（行内元素特点）

3.高度、行高、外边距以及内边距都可以控制（块级元素特点）

4.元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度高度	它本身内容的宽度

5.元素显示模式的转换

特殊情况下，我们需要元素模式的转换，比如想要增加链接 <a> 的触发范围

<head>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color:pink;
            /* 把行内元素 a 转换为块级元素*/
            display: block;
        }
        div {
            width: 150px;
            height: 50px;
            background-color: purple;
            /* 把块级元素 div 转换为行内元素 */
            display: inline;
        }
        span {
            width: 100px;
            height: 30px;
            background-color: skyblue;
            /* 转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
    <div>
        我是块级元素
    </div>
    <span>我是行内元素</span>
</body>

6.工具使用–snipaste

Snipaste 是一个简单但强大的截图工具

常用快捷方式：

F1 可以截图，同时测量大小，设置箭头，书写文字等
F3 在桌面置顶显示
点击图片，alt 可以取色（按下 shift 可以切换取色模式)
按下 esc 取消图片显示

7.技巧–使单行文字垂直居中（竖直方向）

让文字的行高等于盒子的高度

十、CSS 的背景

1.背景颜色

background-color: 颜色值;

background-color 属性定义了元素的背景颜色

一般情况下元素的背景颜色默认值是 transparent （透明），也可手动指定背景为透明

2.背景图片

background-image: url(url);
/*不要忘记 url*/

background-image 属性描述了元素的背景图像，实际常用于 logo 或者一些装饰性图片或者超大的背景图片，

优点是非常便于控制位置

参数值	作用
none	无背景图
url	使用绝对或相对地址指定背景图像

3.背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

4.背景图片位置

background-position: x y;

利用 background-position 来改变图片在背景中的位置,可以使用 方位名词 或者 精确单位

参数值	说明
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

1.参数是 方位名词

如果指定的两个值是方位名词，则两个值前后顺序无关( top left = left top )
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2.参数是 精确单位

如果参数值是精确坐标，第一个值为 x 第二个值为 y
如果只指定一个数值，第一个为 x，第二个垂直居中

3.参数是 混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值为 x 坐标，第二个值为 y 坐标

5.背景图像固定（背景附着）

background-attachment: scroll | fixed

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动效果

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

6.背景复合写法

为了简化代码，可以将属性合并简写在同一个属性 background 中，一般习惯约定顺序为

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background: transparent url(image.jpg) repeat-y fixed top;

7.背景颜色半透明

background: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha（透明度），取值范围在0~1之间
可以把0.3的0省略掉，写为 .3
盒子里面的内容不受影响

8.背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色 / 十六进制 / RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat / no-repeat / repeat-x / repeat-y
background-position	背景位置	length / position 分别是 x 和 y 坐标
background-attachment	背景附着	scroll (背景滚动) / fixed(背景固定)
背景简写	简约书写	背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
背景色半透明	背景颜色半透明	`background: rgba(0,0,0,0.3);` 后面必须是四个值

十一、CSS 的三大特性

1.层叠性

<style>
    div {
        color: red;  <!--被覆盖-->
        font-size: 18px;
    }
    div {
        color: green;
    }
</style>

相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个 冲突的样式。

层叠性原则：

样式冲突，遵循 就近原则，那个样式 离结构近，就执行哪个样式
样式不冲突，不会层叠

2.继承性

<head>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            我继承了 div 的属性
        </p>
    </div>
</body>

CSS 中的继承，子标签会继承父标签的某些羊水，如文本颜色和字号

恰当的继承可以简化代码，降低 CSS 的复杂性
子元素可以继承父元素的样式（text-, font-, line- 这些元素开头的可以继承，以及 color 属性）

行高的继承性

body {
    font: 12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为 1.5
此时子元素的行高为当前子元素的文字大小 * 1.5
body 行高 1.5 这样写的最大优势就是可以根据自己文字的大小自动调整行高

3.优先级

当同一个元素指定多个选择器，就会产生优先级

选择器相同，则执行层叠性
选择器不同，则根据 选择器权重 执行

选择器	权重
继承或者 *	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 ，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重永远是0

权重叠加：

如果是复合选择器，则会有权重叠加，需要计算权重

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

十二、盒子模型

1.网页布局本质

网页布局过程：

1.先准备好相关的网页元素，基本都是盒子 box

2.利用 CSS 设置好盒子样式，然后摆放在相应位置

3.往盒子里装内容

网页布局核心本质：利用 CSS 摆盒子

2.盒子模型组成

盒子模型：CSS 盒子模型本质是封装周围的 HTML 元素，包括边框、外边距、内边距和实际内容

边框

border: border-width | border-style | border-color

属性	作用
border-width	定义边框粗细，单位为 px
border-style	边框的样式
border-color	边框颜色

border-style:

solid 实线边框 dashed 虚线边框 dotted 点线边框

边框简写：

border: 1px solid red;		/* 没有顺序 */

边框分开写法：

border: 1px solid blue;			/* 除了上边框，其余都为蓝色 (层叠)*/
border-top: 1px solid red;		/* 只设定上边框， 其余同理 top bottom left right*/

表格的细线边框：

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框

border-collapse: collapse;

collapse 单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起

边框影响盒子实际大小：

边框会额外增加盒子的实际大小，因此有两种方案：

1.测量盒子大小时，不量边框

2.若测量包含了边框，则需要 width / height 减去边框宽度

内边距

padding 属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

内边距复合写法：

值的个数	表达意思
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像素顺时针

注意：内边距会影响盒子大小（撑大），若盒子本身没有指定 width / height 属性，则不会撑开

解决：如果保证盒子和效果图大小一致，则让 width / height 减去多出来的内边距大小 即可

外边距

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 属性用于设置外边距，即盒子与盒子之间的距离

margin 的简写方式与 padding 一致

外边距的典型运用

外边距可以让盒子 水平居中 ，需两个条件

1.盒子必须指定宽度

2.盒子 左右外边距 都设置为 auto

.header { 
    width: 960px;
    margin: 0 auto;
}

常见写法

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中，给其父元素添加 text-align: center 即可

外边距合并问题

若上下两个兄弟关系的块元素相遇时，上面的下外边距大于下面的上外边距，则会 取两个值中的较大者

解决方案: 尽量只给一个盒子添加 margin 值

对于有父子关系的块元素，两者同时有上外边距时，父元素会塌陷较大的外边距值

解决方案：

1.可以为父元素定义上边框

2.可以为父元素定义上内边距

3.可以为父元素添加 overflow: hidden

清除内外边距

网页元素很多都带有默认的内外边距，且不同浏览器默认的也不一致，因此在布局前，要清除下网页元素的内外边距

* {
    padding: 0;		/* 清除内边距 */
    margin: 0;		/* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，转换为块级和行内块元素就可以了

十三、圆角边框

border-radius: length;

border-radius 属性用于设置元素的外边框圆角

参数值可以为数值或者 百分比 的形式
如果是 正方形 想要设置成一个圆，把数值设置为高度 / 宽度的一半即可，或直接写 50%
如果是矩形，设置为 高度的一半即可
该属性为 简写属性，可以跟四个值，分别代表 左上角、右上角、右下角、左下角（顺时针）
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius（只改一个角）

十四、盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	属性值
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

注意：

1.默认的是外阴影（outset），但是不能写这个单词，否则阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列

十五、文字阴影

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

CSS 浮动

一、浮动导读

有很多布局效果标准流无法完成，此时可以使用浮动完成布局。因为浮动

可以改变元素标签默认的排列方式，浮动最典型的应用：让多个块级元素在一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

选择器 { float: 属性值; }

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

二、浮动特性

1.浮动元素会脱离标椎流（脱标）

浮动的盒子不再保留原先的位置，若盒子后存在标准流，则会与标准流重叠（类似图层）

2.浮动元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则他们会按照属性值 一行内显示并且顶端对齐排列

注意： 浮动的元素是互相贴靠在一起的（无缝隙），如果父级宽度装不下，则多出的盒子会另起一行对齐

3.浮动的元素会具有行内块元素的特性

任何元素都可以添加浮动，不管原先是什么模式的元素，添加浮动之后具有 行内块元素 相似的特性

若行内元素添加了浮动，则不需要转换块级，可直接添加高度和宽度

若块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子之间没有缝隙

三、浮动布局注意点

1.浮动和标准流的父盒子搭配

先用标准流的父元素排上下位置，之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，防止出现问题

浮动的盒子只会影响浮动盒子后的标准流，不会影响前面的标准流

四、清除浮动

1.为什么要清除浮动

由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

2.清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了

选择器 {clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

实际开发中几乎只用 clear: both;

清除浮动的策略是：闭合浮动

3.清除浮动方法

额外标签法

额外标签法 也称为 隔墙法，是 W3C 推荐的做法

额外标签法 会在浮动元素末尾添加一个空的标签，例如 <div style="clear: both"></div>，或者其他标签

如（<br/>等）

例：

<head>
    <style>
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="float"></div>
        <div class="float"></div>
        
        <div class="clear"></div>  <!--墙-->
    </div>
    <div class="footer"></div>
</body>

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差注意：要求这个新的空标签必须是块级元素

父级添加 overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll

优点：代码简洁
缺点：无法显示溢出的部分

:after 伪元素法

:after 方式是额外标签法的升级版，给父元素添加：

.clearfix:after {
    content: "";		/*必有*/
    display: block;		/*必有*/
    height: 0;
    clear: both;		/*核心*/
    visibility: hidden;
}
.clearfix {		/*IE 6、7 专有*/
    *zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：需要照顾低版本浏览器
代表网站：百度、淘宝、网易等

双伪元素清除浮动

双伪元素是在浮动元素的前后添加一个空的标签

给父元素添加：

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

优点：代码更简洁
缺点：照顾低版本的浏览器
代表网站：小米、腾讯等

4.清除浮动总结

为什么要清除浮动：

1.父级没高度

2.子盒子浮动了

3.影响下面布局了

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂	添加许多无意义标签，结构化较差
父级 `overflow:hidden`	书写简单	溢出部分会隐藏
父级 after 伪元素	结构语义化正确	由于 IE 6、7 不支持 `:after`，有兼容性问题
父级双伪元素	结构语义化正确	由于 IE 6、7 不支持 `:after`，有兼容性问题

CSS 属性书写顺序

1、布局定位属性：

diplay / position / float / clear / visibility / overflow (建议 display 第一个写)

2、自身属性

width / height / margin / padding / border / background

3、文本属性

color / font / text-decoration / text-align / vertical-align / white-space break-word

4、其他属性（CSS 3)

content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient….

CSS 定位

一、为什么需要定位

1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的

所以：

1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

2.定位则是可以让盒子自由的在某个盒子内移动位置或固定在屏幕中某个位置，并且可以压住其他盒子

二、定位组成

定位：将盒子定在某一个位置

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式，边偏移 则决定了该元素的最终位置

1.定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位 static （了解）

静态定位是元素的 默认定位方式，无定位的意思

选择器 { position: static;}

静态定位按照标准流特性摆放位置，没有边偏移
静态定位在布局很少用到

相对定位 relative （重要）

相对定位 是元素在移动位置的时候，是相对于它 原来的位置 来说的

选择器 { position: relative;}

相对定位是相对于自己原来的位置来移动的
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标）

绝对定位 absolute （重要）

绝对定位 是元素在移动位置的时候，是相对于它 祖先元素 来说的

选择器 { position: absolute;}

如果 没有祖先元素 或者 祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位，则以 最近一级的有定位的祖先元素 为参考点移动位置
绝对定位 不再占有原先的位置 （脱标）

绝对定位技巧：盒子居中

加了绝对定位的盒子是不能通过 margin: auto 水平 / 垂直居中的

1.left / top 走 50%

2.margin left / top 负值往左边 / 上面走自己盒子宽度的一半

固定定位 fixed （重要）

固定定位 是元素 固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

选择器 { position: fixed;}

以浏览器的可视窗口为参照点移动元素
跟父元素没有关系
不随滚动条滚动
固定定位 不占有原先的位置（脱标）

固定定位技巧：固定在版心右侧位置

1、让固定定位的盒子 left：50%，走到浏览器可视区的一半

2、让固定定位的盒子 margin-left: 版心宽度的一半距离，多走版心宽度的一半位置

粘性定位 sticky （了解）

粘性定位 可以被认为是相对定位和固定定位的混合

选择器 { position: sticky; top: 10px;}

以浏览器的可视窗口为参照点移动元素
粘性定位 占有原先的位置
必须添加 top、left、right、bottom 其中一个才有效
跟页面滚动搭配使用，兼容性较差，IE不支持

2.边偏移

边偏移就是定位的盒子移动到最终位置

边偏移属性	实例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

3.子绝父相

意思为：子级是绝对定位的话，父级要用相对定位

子级绝对定位，不会占用位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

4.定位的叠放次序 z-index

在使用定位布局时，可能出现盒子重叠的情况，此时可以使用 z-index 来控制盒子的前后次序（z轴）

选择器 { z-index: 1;}

数值可以是正整数，负整数或0，默认是 auto ，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不加单位
只有定位的盒子才有 z-index 属性

5.定位拓展

定位的特殊特性

绝对定位和固定定位与浮动类似

1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度

2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

绝对定位（固定定位）会完全压住盒子

浮动元素 只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
绝对定位（固定定位）会 压住下面标准流所有的内容

6.定位总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否	相对于自身位置移动	常用
absolute 绝对定位	是	带有定位的父级	常用
fixed 固定定位	是	浏览器可视区	常用
sticky 粘性定位	否	浏览器可视区	较少

元素的显示与隐藏

类似于广告，点击关闭便会隐藏起来，在刷新之后重新出现

本质：让一个元素在页面中隐藏或者显示出来

一、display 显示隐藏

display 属性用于设置一个元素如何显示

display: none; 隐藏对象
display: block; 除了转换为块级元素外，还有显示元素的意思display 隐藏元素后，不再占有原来的位置

二、visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏

visibility: visiable; 元素可见
visibility: hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置

三、overflow 溢出显示隐藏

overflow 属性指定了如果内容溢出一个元素的框时，会发生什么

属性值	描述
visible	不剪切内容也不添加滚动条（默认）
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管是否超出内容，总是显示滚动条
auto	超出自动显示滚动条，不超出则不显示

CSS 高级技巧

一、精灵图

1.为什么需要精灵图

一个网页中往往会应用很多小的背景图像进行修饰，当网页中的图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求

2.精灵图 (sprites) 的使用

使用精灵图核心：

1、精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片中

2、这个大图片也称为 sprites 精灵图或雪碧图

3、移动背景图片位置，此时可以使用 background: position;

4、移动的距离就是这个目标的 x 和 y 坐标，注意网页中的坐标有所不同

5、因为一般情况下都是往上往左移动（指精灵图），所以数值一般为负值

CSS 基础

CSS 语法

一、CSS 语法规范

1.CSS 样式规则

2.CSS 代码风格

样式格式书写

空格规范

二、CSS 选择器

1.标签选择器

2.类选择器

类选择器—多类名

3.id 选择器

4.通配符选择器

5.总结

三、CSS 字体属性

1.字体系列

2.字体大小

3.字体粗细

4.文字样式

5.字体复合属性

6.字体属性总结

四、CSS 文本属性

1.文本颜色

2.对齐文本

3.装饰文本

4.文本缩进

5.行间距

6.文本属性总结

五、CSS 的引入方式

1.内部样式表（嵌入式）

2.行内样式表（行内式）

3.外部样式表（链接式）

六、Chrome 调试工具

1.打开调试工具

2.使用调试工具

七、Emmet 语法

1.快速生成 HTML 结构语法

2.快速生成 CSS 样式语法

3.快速格式化代码

八、CSS 的复合选择器

1.后代选择器（重要）

2.子选择器（重要）

3.并集选择器（重要）

4.伪类选择器

链接伪类选择器

:focus伪类选择器

5.复合选择器总结

九、CSS 的元素显示模式

1.块元素

2.行内元素

3.行内块元素

4.元素显示模式总结

5.元素显示模式的转换

6.工具使用–snipaste

7.技巧–使单行文字垂直居中（竖直方向）

十、CSS 的背景

1.背景颜色

2.背景图片

3.背景平铺

4.背景图片位置

5.背景图像固定（背景附着）

6.背景复合写法

7.背景颜色半透明

8.背景总结

十一、CSS 的三大特性

1.层叠性

2.继承性

行高的继承性

3.优先级

优先级注意点：

权重叠加：

十二、盒子模型

1.网页布局本质

2.盒子模型组成

边框

表格的细线边框：

边框影响盒子实际大小：

内边距

外边距

外边距的典型运用

`:focus`伪类选择器