0.概念拓展

0.1 `value`属性和`name`属性作用介绍

value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 =value的属性值

0.2 Emment语法

作用：通过简写语法，快速生成代码，VScode自带

1.CSS基本语法

CSS：层叠样式表Cascading style sheets作用：给页面中的HTML标签设置样式

CSS基本语句的结构格式为选择器{属性: 属性值;}，例如：p { text-indent: 2em;}

CSS样式的定义还需要符合如下几点语法要求：

1. 如果值为若干单词，则要给值加引号。
1. 如果要定义不止一个声明，则需要用分号将每个声明分开。其格式为选择器{属性：属性值; 属性：属性值;... }

1	body {color: #000000; background-color: #FFFFFF;}

2.CSS创建与引用

2.1内部样式表

在页面的<head>…</head>内。样式表是用<style>标签插入，一般写在title标签下面。

style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

<head>
	<title></title>
    <style type="text/css">
	    选择器1{属性:属性值; 属性:属性值; ... }      /* 注释内容 */
	    选择器2{属性:属性值; 属性:属性值; ... }
      ...
	    选择器n{属性:属性值; 属性:属性值; ... }
	</style>
</head>

注意：

CSS 标点符号都是英文状态下的；
每一个样式键值对写完之后，最后需要写分号；

CSS常见属性	作用
color	文字颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

当前页面的小案例

2.2链入外部样式表

把样式表保存为一个样式表文件.css，然后在页面的<head>…</head>内，用<link>标记链接。

<head>
  ...
  <link rel="stylesheet" href="样式表文件名.css"  type="text/css" />
  ...
</head>

多个页面，常用在项目中

2.3导入外部样式表

在内部样式表的<style>…</style>里导入一个外部样式表，导入时用@import。其格式为

<head>
  ...
  <style type="text/css">
    @import url"外部样式表文件名1.css";
    @import url"外部样式表文件名2.css";
    其他样式表的声明
  </style>
</head>

注意：导入外部样式表是在网页加载完了以后再加载样式，可能会因此导致不能及时显示网页的样式。

2.4内联/行内式样式表

直接在标签里加入style参数，参数的内容就是CSS的属性和值。<标记 style="属性:属性值; 属性:属性值 ... ">，在style参数后面的引号里的内容相当于在样式表大括号里的内容。

例如，可以将某页面body标签中的HTML代码： <body bgcolor="#FFFFFF" text="#000000">

用内联样式表的方法改为： <body style=" background-color:#FFFFFF;color: #000000; ">

尽量少用，一般仅用对页内某个标签的具体微调上
只做用于当前标签的小案例，配合js使用

2.5样式的层叠问题

如果给同一个标签设置了相同的属性，此时样式会层叠覆盖，写在最下面的会生效

CSS：层叠样式表，所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

3.CSS选择器

选择器的作用：选择页面中对应的标签找，方便后续设置样式改

3.1通用选择器

作用：找到页面中所有的标签，设置样式。指定的样式可应用在页面里的所有元素。
结构：* { css属性名：属性值； }

例如：把页面中所有支持字体属性的样式都设为“宋体”：*{ font-family: "宋体"; }

注意点：

开发中使用极少，只会在极特殊情况下才会用到
可能会用于去除标签默认的margin和padding后续讲解

<head>
	<style>
		*{
			padding:0;
			margin:0;
		}
	</style>
</head>

3.2标签/类型选择器

作用：通过标签名，找到页面中所有这类标签，设置样式
结构：标签名 { css属性名：属性值； }

注意点：

标签选择器选择的是一类标签，而不是单独某一个，可以定义几乎所有HTML标记中内容的样式，例如正文标记body、标题标记h等
标签选择器无论嵌套关系有多深，都能找到对应的标签

<head>
	<style>
		p{
			color:red;
		}
	</style>
</head>

3.3后代选择器

可以选择作为某元素后代的元素，合理地使用后代选择器，可以使HTML代码变得更加整洁
格式为选择器1 选择器2 … 选择器n{属性：属性值; 属性：属性值;... }

这里大括号中所定义样式只能应用于各选择器从左到右依次向后包含的情况，因此有时又被称为包含选择器。

table a
{
	font-size: 12px
}

3.4类选择器

通过类名定义类名时记住双引号，找到页面中所有带有这个类名的标签，设置样式
针对某种HTML元素的类选择符样式，其格式为元素名.类选择符名{属性:属性值; 属性:属性值 ... }，只能用于类选择器所属的类型的标签中
选择器中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式，其格式为：.类名 { css属性名：属性值； }或者*.类选择符名{属性:属性值; 属性:属性值 ... }，没有限制标签

注意点：

所有标签上都有class属性，class属性的属性值称为类名类似于名字
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<head>
	<style>
		.one{
			color:red;
		}
	</style>
</head>
<body>
	<div class ="one"></div>
</body>

1
2
3

.isleft{font-family:'宋体'; font-size:10pt; color: red; text-align:left} 
.isright{ font-family:'宋体'; font-size:10pt; color: red; text-align:right} 
.iscenter{ font-family:'宋体'; font-size:10pt; color: red; text-align:center}

3.6id选择器

定义ID名时记住双引号
id对某个单一元素进行识别。因此当某种样式说明仅对应于一个独特的元素时，可以通过创建和引用id选择器来实现。
结构：#id属性值 { css属性名：属性值； }或者是元素名#id选择器名{属性:属性值; 属性:属性值 ... }

注意点：

所有标签上都有id属性

id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

一个标签上只能有一个id属性值

一个id选择器只能选中一个标签

比如：下面的两个id选择器，第一个定义元素的颜色为红色，第二个定义元素的颜色为绿色。几乎所有的HTML元素都可以应用这两个id，但id属性只能在每个 HTML 文档中出现一次。

1 2	#red {color:red;} #green {color:green;}

类与id的区别：

class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

实际开发的情况：

类选择器用的最多
id一般配合js使用，除非特殊情况，否则不要使用id设置样式
实际开发中会遇到冗余代码的抽取，可以将一些公共的代码抽取到一个公共的类中去

3.7伪类选择器

CSS 伪类是添加到选择器的关键字，可指定要选择的元素的特殊状态。伪类名称由一个冒号开头，具体语法如下
选择器:伪类名 {属性: 属性值; 属性:属性值 ...}

例如，下面的:hover伪类可用于在用户将鼠标悬停在div按钮上时改变按钮的颜色。

1
2
3

div:hover {
  background-color: #F89B4D;
}

锚伪类

链接的状态包括：未被访问状态，已被访问状态，鼠标悬停状态，和活动状态，相应的锚伪类有如下4种：

a:link 超链接的正常状态未被访问前
a:visited 访问过的超链接状态
a:hover 光标移到超链接上的状态
a:active 选中超链接时的状态在鼠标单击与释放之间

锚伪类的应用格式为a：锚伪类名 {属性:属性值; 属性:属性值 ... }

类选择器也可以和锚伪类一起使用，其格式为
a.类名：锚伪类名 {属性:属性值; 属性:属性值 ... }
或
.类名：锚伪类名 {属性:属性值; 属性:属性值 ... }

注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的，而a:active 必须被置于 a:hover 之后，才是有效的。

通用伪类

在锚伪类的4个伪类名中，:link和:visited 为a标签所特有的，分别表示超链接被点击前后的两种状态；而:active和:hover 则可以适用于所有的标签元素，分别表示元素被激活按住不放时和鼠标划过悬浮时的两种状态。此外，focus伪类表示元素在获取键盘输入焦点时的状态

3.8伪元素选择器

伪元素允许对元素内容的一部分设置样式。引入伪元素以便允许完成用其他方式无法实现的设计。伪元素由两个冒号开头，具体语法为

选择器::伪元素名 {属性: 属性值; 属性:属性值 ...}

类选择器也可以和伪元素一起使用，其格式为

选择器.类名::伪元素 {属性:属性值; 属性:属性值 ... }

首字母和首行伪元素

::fisrt-letter用于向某个选择器中的文本的首字母添加特殊的样式，如p:first-letter
::first-line用于向某个选择器中的文字的首行添加特殊样式，如p:first-line

::before伪元素可以在元素的内容前面插入新内容，
::after 伪元素可以在元素的内容之后插入新内容，具体的内容则需结合content属性进行定义。

注意： ::before和 ::after伪元素默认是行内元素，即与所在元素默认内容同行排列，且宽和高不能定义，一般使用转换为块元素的方法来改变其固有的样式属性

3.9属性选择器

属性选择器可以对带有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。常见的属性选择器如表所示，其中attribute代表属性，value代表属性值。

标签选择器:标签名{css属性名:属性值;}
类选择器:.类名{css属性名:属性值;}
id选择器:#id属性值{css属性名:属性值;}
通配符选择器:*{css属性名:属性值;}

4.选择器进阶

4.1后代选择器：空格

根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：父选择器子选择器 { css }
在父选择器所找到标签的后代中，找到满足子选择器的标签，设置样式

不一定要标签：类、id都可以

注意点：后代包括：儿子、孙子、重孙子……

<head>
	<style>
		/* 这里不要用p/li等博客里面有的格式，不然会把博客的文字变红 */
		div a{
			color:red;
		}
	</style>
</head>
<body>
	<p>不变色</p>
	<div>
		<p>变色</p>
	</div>
</body>

不变色

变色

4.2子代选择器：>

根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1 > 选择器2 { css }
在选择器1的儿子中，找到满足选择器2的标签，设置样式
注意点：只包括：儿子

4.3并集/组合选择器：逗号

作用：同时选择多组标签，设置相同的样式
把相同属性和值的选择器组合起来书写，用逗号将选择器分开，可以减少样式重复定义。其格式为
选择器1, 选择器2, …, 选择器n{属性：属性值; 属性：属性值;... }

注意点：

并集选择器中的每组选择器之间通过 , 分隔

并集选择器中的每组选择器可以是基础选择器或者复合选择器

并集选择器中的每组选择器通常一行写一个，提高代码的可读性

例如，下面CSS声明中所有段落和列表项的首行文本都向右缩进两个字符，并且大小都是14px。

1
2
3

p,
div,
li { text-indent:2em; font-size:14px;}

4.4hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover { css }
注意点：伪类选择器选中的元素的某种状态
任何标签都可以添加伪类

5.字体和文本样式

5.1字体样式

字体大小：font-size

取值：数字 + px注意要带单位
谷歌浏览器默认文字大小是16px

字体粗细：font-weight

数字：100-900整百数
关键字：normal正常/bold加粗/bolder/lighter
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多

字体是否用小体大写：font-variant

normal
small-caps

字体样式：font-style

正常默认值：normal
倾斜：italic
blique

字体类型：font-family - 常见取值：`具体字体1,具体字体2,具体字体3,具体字体4..,字体系列` - 具体字体:"Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等... - 字体系列:sans-serif、serif、monospace等. - 常见字体系列： - 无衬线字体sans-serif：文字笔画粗细均匀，并且首尾无装饰；网页中大多采用无衬线字体；常见该系列字体:黑体、`Arial` - 衬线字体serif：文字笔画粗细不均，并且首尾有笔锋装饰；报刊书籍中应用广泛；常见该系列字体:宋体、Times New Roman - 等宽字体monospace：每个字母或文字的宽度相等；一般用于程序代码编写，有利于代码的阅读和编写；常见该系列字体Consolas、fira code 渲染规则:

1.从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点:

1.如果字体名称中存在多个单词，推荐使用引号包裹
2.最后一项字体系列不需要引号包裹
3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

字体类型：font属性连写

一个属性冒号后面多个值的写法：都是复合属性，如font : style weight size family;
省略要求：只能省略前两个，如果省略了相当于设置了默认值

如果需要同时设置单独和连写形式：

要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面

1
2
3

p{
	font: italic 700 66px 宋体;
}

5.2文本样式

文本缩进：text-indent

数字+px或者 数字+em推荐：1em = 当前标签的font-size的大小

文本水平对齐方式：text-align

text-align: left：左对齐
text-align: right：右对齐
text-align: center：居中对齐
如果需要让文本水平居中，text-align属性给文本所在标签文本的父元素设置

水平居中方法总结 text-align : center————text-align : center 能让哪些元素水平居中？

文本
span标签、a标签
input标签、img标签

如果需要让以上元素水平居中， text-align : center 需要给以上元素的父元素设置
图片就是img，不是在img里面，给图的父元素body添加

文本修饰：text-decoration

underline：下划线常用
line-through：删除线不常用
overline：上划线几乎不用
none：无装饰线常用，开发中会使用 text-decoration : none ; 清除a标签默认的下划线

5.3line-height行高

控制一行的上下行间距
取值：数字+px或倍数当前标签font-size的倍数

让单行文本垂直居中可以设置 line-height：文字的父元素高度
网页精准布局时，会设置 line-height:1 可以取消上下间距

行高与font连写的注意点:

如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ;

6.背景相关属性

背景颜色background-colorbgc

颜色取值：关键字、rgb表示法、rgba表示法、十六进制…
背景颜色默认值是透明： rgba0,0,0,0 、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

背景图片background-imagebgi

background-image: url'图片的路径'; 注意单引号可以省略
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
200X200的图铺满400X400，背景图片会默认复制，通过下面平铺控制是否复制

背景平铺background-repeatbgr

repeat：默认值，水平和垂直方向都平铺
no-repeat：不平铺
repeat-x：沿着水平方向x轴平铺
repeat-y：沿着垂直方向y轴平铺

背景位置background-positionbgp

background-position:水平方向位置垂直方向位置;
方位名词取值和坐标取值可以混使用

背景相关属性连写backgroundbg

单个属性值的合写，取值之间以空格隔开
书写顺序：推荐：background：color image repeat position
可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url

如果需要设置单独的样式和连写

① 要么把单独的样式写在连写的下面

② 要么把单独的样式写在连写的里面

img标签和背景图片的区别：需要在网页中展示一张图片的效果？

直接写上img标签即可：img标签是一个标签，不设置宽高默认会以原尺寸显示

iv标签 + 背景图片：需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

7.元素显示模式

标签、标记、元素：都是指尖括号里的内容

HTML嵌套规范注意点：块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
但是：p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素，但是：a标签不能嵌套a标签

7.1块级元素block

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

显示特点：

==独占一行==一行只能显示一个，后面的元素内容会换行显示

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高

即便div设置了宽度，其他同级元素也不会挤上去

看见换行的内容，就选择换行的标签

7.2行内元素inline

上图登录、注册按钮
a、span 、b、u、i、s、strong、ins、em、del、label、img、input、……

显示特点：

一行可以显示多个

宽度和高度默认由内容撑开

不可以设置宽高写了也不生效

7.3行内块元素Inline-Block

行内元素也叫行级元素，它只占据自身内容所占的位置，其它的内容在它后面显示，但是行内元素里面不能放块级元素。设置display:inline就是将元素显示为行内元素。

input、textarea、button、select、img……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

显示特点：

一行可以显示多个

可以设置宽高

7.4元素显示模式转换display属性

改变元素默认的显示特点，让元素符合布局要求

display: block——转换成块级元素，使用较多
display:inline-block——转换成行内块元素，使用较多
display:inline——转换成行内元素，使用较少
display:none——表示不显示

8.CSS特性

8.1继承

子元素有默认继承父元素样式的特点

可以继承的常见属性文字控制属性都可以继承：

color

font-style、font-weight、font-size、font-family

text-indent、text-align

line-height、letterspacing、word-spacing等。

注意：

一般来说，字体和文本属性全都可以被继承，但a标签不能直接继承父级元素的颜色，一般需要单独设置才能改变超链接及其相关伪类的颜色，也可以通过对a元素设置“color:inherit; ”来继承父级元素的颜色

li会继承父元素ul或ol的list-style属性

多数边框类的属性，如：border（边框）、padding（填充）、margin（边界）等等，都是没有继承性的。可通过对子元素设置“border:inherit;”来继承父元素的边框属性，但只能继承其直接的父级元素边框属性。填充和边界属性也是同理。

可以通过调试工具判断样式是否可以继承：

可以在一定程度上减少代码
常见应用场景：

可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式

直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效：如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

a标签的color会继承失效：其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
h系列标签的font-size会继承失效：是被浏览器默认设置的样式给覆盖掉了

8.2叠层

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

8.3优先级

==谁更精准，谁优先级越高==
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点：

!important写在属性值的后面，分号的前面！

!important不能提升继承的优先级，==只要是继承优先级最低==！

实际开发中不建议使用 !important 。

一般建议按照以下的分类顺序依次书写CSS规则：

（1）显示属性（如display、list-style、position、float、clear等）
（2）自身属性（如width、height、margin、padding、border、background等）
（3）字体和文本属性（如font、color、text-align、vertical-align、text-indent等）
（4）CSS3中新增属性（如content、box-shadow、border-radius、transform等）

8.4复合选择器：权重叠加运算【没看懂】

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
!important如果不是继承，则权重最高，天下第一！

先比较第一级数字，如果比较出来了，之后的统统不看无进位，依次类推

先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
再通过权重计算公式，判断谁权重最高
两个完全相等，谁在后面谁生效

实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况

9.盒式布局

在CSS中，页面中的所有文档元素如body、p、h1等都可以理解为盒模型

注意点：
① 设置width和height是内容的宽高！
② 设置border会撑大盒子
③ 设置padding会撑大盒子

盒子实际大小终极计算公式：

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

当盒子被border和padding撑大后，如何满足需求？
自己计算多余大小，手动在内容中减去手动内减

不会撑大盒子的特殊情况块级元素

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

9.1盒子模型的介绍

CSS 中规定每个盒子分别由：内容区域content、内边距区域padding、边框区域border、外边距区域margin构成，这就是盒子模型

利用 width 和 height 属性默认设置是盒子内容区域的大小，常见取值：数字+px
设置某个页面元素的背景颜色或者背景图片等效果，其实设置的就是盒模型边框border以内区域的背景。
边框border外的外边距margin区域是透明的，呈现的是父元素的背景。

对于盒模型而言，只有边框以内的区域才可以设置背景

盒模型的宽和高

盒模型的宽=左外边距+左边框+左内边距+内容宽度width+右内边距+右边框+右外边距
盒模型的高=上外边距+上边框+上内边距+内容高度height+下内边距+下边框+下外边距

9.2样式初始化

通过将元素的 margin 和 padding 设置为零来进行样式初始化，以覆盖这些浏览器样式。这可以分别进行，也可以使用通配符选择器*对所有元素进行设置

* {
  margin: 0;
  padding: 0;
}

缺点：通配符会匹配所有标签，会不需要使用的标签也渲染了。加大了网页的渲染时间，影响的范围比较大，一般不推荐使用。

9.3边框属性border

边框border属性是一个复合属性，它可以同时设置一个元素的四条边框的三种属性，包括边框宽度属性border-width、边框样式属性border-style和边框颜色属性border-color
其中边框样式属性用来设置边框所采用的线条样式。定义边框属性时一般要同时定义这三种属性，其格式为

border:宽度样式颜色;快捷键：==bd + tab==

1
2
3

div{
border:1px solid red;
}

a.边框宽度

边框宽度border-width：可以同时设置元素四条边框的宽度值。该属性的取值包括：medium、thin、thick和长度值数字+px

可以对四条边框的宽度采用单样式写法，其属性分别表示为

border-top-width
border-right-width
border-bottom-width
border-right-width

如：

div{
	border-width:5px;    /* 四条边框的粗细均为5px*/
	border-top-width:3px; /*上边框的粗细改为3px*/
}

还可以用最多四个属性值，最少一个属性值一次指定四条边框的粗细

border-width:上边框宽度 右边框宽度 下边框宽度 左边框宽度; 
border-width:上边框宽度 左右边框宽度 下边框宽度;
border-width:上下边框宽度 左右边框宽度; 
border-width:每条边框宽度;

b.边框样式

边框样式border-style可以同时设置元素四条边框的线条样式，它的取值包括：

none：没有边框，也即忽略边框的宽度；
dotted：点线；
dashed：虚线；
solid：实线；
double：双线；
groove：3D凹槽；
ridge：菱形边框；
inset：3D凹边；
outset：3D凸边；
hidden：隐藏边框。

c.边框颜色

边框颜色border-color可以同时设置元素四条边框的颜色，可以分为上右下左四个方向，其单个样式属性分别表示为border-top-color、border-right-color、border-bottom-color和border-left-color。对不同方向边框颜色取值的表示方法与边框宽度和边框样式的表示方法类似

9.4内边距属性padding

在CSS中，内边距padding也叫内填充，用以控制盒子中，边框border和元素element之间的距离。

内边距padding是上、右、下、左四个外边距属性的简写，而这四个方向的内边距属性分别为padding-top、padding-right、padding-bottom、padding-left。

内边距padding各属性的取值可为长度值或百分比值。
长度值：即规定一个具体的长度值，可用绝对长度单位cm，mm，in，pt也可以用相对长度单位em，px来表示。
百分比值：相对于元素所在的父元素的宽度。

取值	实例	含义
一个值	padding:10px;	上右下左都设置为10px
两个值	padding:10px20px;	上下-左右
三个值	padding:10px20px30px;	上-左右-下
四个值	padding:10px20px30px40px;	上-右-下-左-

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

单方向设置：

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

给盒子设置四周 20px 的内边距：padding : 20px ;
给盒子设置上下20px、左右30px的内边距：padding :
20px 30px ; 给盒子设置左侧50px的内边距：padding-left : 50px ;

9.5外边距margin

设置边框以外，盒子与盒子之间的距离

取值	实例	含义
一个值	margin:10px;	上右下左都设置为10px
两个值	margin:10px20px;	上下-左右
三个值	margin:10px20px30px;	上-左右-下
四个值	margin:10px20px30px40px;	上-右-下-左

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

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

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

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

10.结构伪类选择器

选择器	说明
X:first-child{}	匹配父元素中第一个子元素，并且是X元素
X:last-child{}	匹配父元素中最后一个子元素，并且是X元素
X:nth-child(n){}	匹配父元素中第n个子元素，并且是X元素
X:nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是X元素
X:nth-of-type(n){}	只在父元素的同类型X子元素范围中，匹配第n个

:nth-child → 直接在所有孩子中数个数
:nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

n的注意点：

n为：0、1、2、3、4、5、6、……

通过n可以组成常见公式

偶数：2n

奇数：odd、2n+1、2n-1

找到前5个：-n+5

找到从第5个往后：n+5

11.伪元素

一般页面中的非主体内容可以使用伪元素
区别：

元素：HTML 设置的标签
伪元素：由 CSS 模拟出的标签效果

选择器	说明
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

必须设置content属性才能生效

伪元素默认是行内元素

12.标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行

行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

14.浮动

图文环绕，网页布局

14.2浮动的代码

属性名：float
属性值：left左浮动、right右浮动

14.3. 浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果

• 一行可以显示多个
• 可以设置宽高

==浮动的元素不能通过text-align:center或者margin:0 auto==

0.概念拓展

0.1 value属性和name属性作用介绍

0.2 Emment语法

1.CSS基本语法

2.CSS创建与引用

2.1内部样式表

2.2链入外部样式表

2.3导入外部样式表

2.4内联/行内式样式表

2.5样式的层叠问题

3.CSS选择器

3.1通用选择器

3.2标签/类型选择器

3.3后代选择器

3.4类选择器

3.6id选择器

3.7伪类选择器

锚伪类

通用伪类

3.8伪元素选择器

首字母和首行伪元素

3.9属性选择器

4.选择器进阶

4.1后代选择器：空格

4.2子代选择器：>

4.3并集/组合选择器：逗号

4.4hover伪类选择器

5.字体和文本样式

5.1字体样式

5.2文本样式

5.3line-height行高

6.背景相关属性

7.元素显示模式

7.1块级元素block

7.2行内元素inline

7.3行内块元素Inline-Block

7.4元素显示模式转换display属性

8.CSS特性

8.1继承

8.2叠层

8.3优先级

8.4复合选择器：权重叠加运算【没看懂】

9.盒式布局

9.1盒子模型的介绍

9.2样式初始化

9.3边框属性border

a.边框宽度

b.边框样式

c.边框颜色

9.4内边距属性padding

9.5外边距margin

10.结构伪类选择器

11.伪元素

12.标准流

14.浮动

14.2浮动的代码

14.3. 浮动的特点

14.4. 浮动的案例

0.1 `value`属性和`name`属性作用介绍