一、css简介
主要使用场景：美化网页、布局页面；
Css是层叠样式表的简称，有时也称css样式表或级联样式表；
Css也是一种标记语言，主要用于设置html页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
Css语法规范：css规则由两个主要的部分构成：选择器、一条或多条声明。
选择器 {属性：值； /*声明*/
属性：值； /*声明*/
}
⚠️：选择器是用于指定css样式的html标签，花括号内是对该对象设置的具体样式；
属性和属性值以“键值对”的形式出现；
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等；
属性和属性值之间用英文 ：分开；
多个“键值对”之间用英文 ；进行区分；
Css代码风格：1、样式书写格式
紧凑格式：h3 {color: deeppink; font-size: 20px;}
展开格式：h3 {
color: deep-pink;
font-size: 20px;
}
强烈推荐展开格式，因为更直观。
2、样式大小写风格：样式选择器，属性名，属性关键字全部用小写字母，特殊情况除外。
3、样式空格规范：属性值前面，冒号后面保留一个空格；选择器（标签）和大括号中间保留空格
二、css基础选择器
Css选择器的作用：选择器（选择符）就是根据不同需求把不同的标签选出来，简单来说就是选择标签用的，将该标签的样式改变。
选择器：分为基础基础选择器和复合选择器
基础选择器是由单个选择器组成的，基础选择器又包括：标签选择器、类选择器、id选择器、通配符选择器。
1、标签选择器
也称元素选择器，是指用html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。
语法：标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
…
}
作用：便签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签
2、类选择器
差异化选择不同的标签，单独选一个或某几个标签时，可以使用类选择器。类选择器在html中以class属性表示，在css中，类选择器以一个点 . 号显示。
哪个标签想要使用该样式，就调用这个样式的类名
类名自定义但不能用标签名
语法：
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
例如，将所有拥有的red类的html元素均设为红色
.red {
color: red;
}
结构需要用class属性来调用class类的意思
<div class="red">变红色</div>
⚠️：类选择器使用 . 进行标识，后面紧跟类名（自定义，但不能喝标签名相同）；
可以理解为给这个标签起了一个名字，来表示；
长名称或词组可以使用中横线来为选择器命名；
不要使用纯数字、中文等命名，尽量使用英文字母来表示；
命名要有意义，尽量使别人一眼就知道这个类名的目的；
命名规范：web前端开发规范手册；
类选择器-多类名：可以给标签指定多个类名，从而达到更多的选择目的，公共样式可写在一个样式里。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。
多类名使用方式：<div class="red fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="red font20">安琪拉</div>
<div class="font14">貂蝉</div>
在标签class属性中写多个类名，多个类名中间必须用空格分开，这些标签就可以分别具有这些类名的样式。
多类名开发中使用场景：可以把一些标签元素相同的样式（共同的部分）放到一个类里面；这些标签都可以调用这个公共的类，然后再调用自己自己独有的类；从而节省css代码，统一修改也非常方便。
3、id选择器
可以为标有特定id的html元素指定特定的样式。html元素以id属性来设置id选择器，css中id选择器以 # 来定义。
语法：#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
例如，将id为nav元素中的内容设置为红色
#nav {
color: red;
}
<div id="nav"></div>
⚠️：id属性只能在每个html文档中出现一次，指的是对js的唯一性。口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
id选择器和类选择器的区别：
1、类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用；
2、id选择器好比人的身份证号码，全中国是唯一的，不得重复；
3、id选择器和类选择器最大的不同在于使用次数上；
4、类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javascript搭配使用；
4、通配符选择器
在css中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）
语法： * {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
⚠️：通配符选择器不需要调用，自动就给所有的元素使用样式；特殊情况才使用，后面讲解使用场景（以下是清楚所有的元素标签的内外边距，后期讲）
* {
margin: 0;
padding: 0;
}
三、css字体属性
Css font（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）
1、字体大小：css用font-size属性定义字体大小。
p {
Font-size: 20px;
}
Px（像素）大小是我们网页的最常用的单位；谷歌浏览器默认的文字大小为16px；不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小；可以给body指定整个页面文字的大小，而开发是也常常这样做；
2、字体系列：css用font-family属性定义文本的字体系列。
p { font-family: "微软雅黑“；}
div { font-family: arial,“microsoft yahei”,微软雅黑“；}
各种字体之间必须使用英文状态下的逗号隔开；一般情况下，如果有空格隔开的多个单词组成的字体，加引号；尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示；最常见的几个字体：body {font-family:“microsoft yahei”,tahoma,arial,“hiragino sans GB”;}
3、字体粗细：css使用font-weight属性设置文本字体的粗细。
p {
Font-weight: bold;
}
属性值normal：默认值（不加粗）；属性值bold：定义粗体（加粗的）；属性值100-900:400等同于normal，而700等同于bold，注意这个数字后面不跟单位。 学会让加粗标签（比如h和strong标签等）不加粗，或者其他标签加粗。实际开发时，我们更喜欢用数字表示粗细。
4、文字样式：css使用font-style属性设置文本的风格（如斜体）
p {
Font-style: normal;
}
属性值normal：默认值，浏览器会显示标准的字体样式 font-style：normal；
属性值italic：浏览器会显示斜体的字体样式。
平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。
5、字体复合属性：字体属性可以把以上文字样式综合来写，这样更节约代码。
body {
font: font-style font-weight font-size/line-height font-family;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开；不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
6、字体属性总结
属性 表示 注意点
Font-size 字号 我们通常用的单位是像素px，一定要跟上单位
Font-family 字体 实际工作中按照团队约定来写字体
Font-weight 字体粗细 加粗700或者bold，不加粗是400或者normal，数字不跟单位
font-style 字体样式 倾斜italic 不倾斜normal。工作中我们最常用的是normal
Font 字体连写 字体连写是有顺序的 不能随意换位置； 其中字号和字体必须同时出现
四、css文本属性
Css text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
1、文本颜色：css中用color属性定义文本的颜色
Div {
Color: red;
}
表示方式 属性值
预定义的颜色值 red，green，blue，pink等
十六进制 #FF6600, #FF0000, #666666（两字符号相同可简写#666）
RGB代码 rgb（255，0，0）或者rgb（100%，0%，0%）
开发中最常用的是16进制
2、对齐文本：text-align属性用于设置元素内文本内容的水平对齐方式
Div {
Text-align: center;
}
属性值：left左对齐（默认值）；right右对齐；center居中对齐；
3、装饰文本：text-decoration属性规定添加到文本的装饰，可以给嗯本添加下划线、删除线、上划线等。
div {
Text-decoration: underline;
}
属性值：none默认，没有装饰线（最常用）；underline下划线，链接a标签自带下划线（常用none取消其下划线）；overline上划线（几乎不用）；line-through删除线（不常用）
重点记住如何添加下划线？如何删除下划线？其余了解即可。
4、文本缩进：text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
div {
Text-indent: 10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
p {
Text-indent: 2em;
}
Em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
5、行间距：line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
p {
Line-height: 26px;
}
行间距包括：上间距、文本高度、下间距。上下间距相同。
6、文本属性总结
属性 表示 注意点
Color 文本颜色 我们通常用十六进制，而且能简写就简写#fff
Text-align 文本对齐 可以设定文字水平的对齐方式center、left、right
Text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离 text-indent：2em
Text-decoration 文本修饰 主要是添加下划线和取消下划线
Line-height 行高 控制行与行之间的距离
五、css引入方式
1、css的三种样式表
按照css样式书写的位置（或引入的方式），css样式表可以分为三大类
A、行内样式表（行内式）
B、内部样式表（嵌入式）
C、外部样式表（链接式）
2、行内样式表
行内样式表也称内联样式表，是在元素标签内部的style属性中设定css样式。适合于修改简单样式。
style其实就是标签的属性；在双引号中间，写法要符合css规范；可以控制当前标签设置样式；由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候可以考虑使用；使用行内样式表设定css，通常也被称为行内式引入。
3、内部样式表
内部样式表也称内嵌样式表，是写到html页面内部。是将所有的css代码抽取出来，单独放到一个
六、emmet语法
Emmet语法的前身是zen coding，它使用缩写，来提高html/css的编写速度。vscode内部已经集成该语法。
1、快速生成html结构语法
生成标签直接输入标签名，按tab键即可，比如div 然后按tab键，就可以生成
生成多个相同标签，加上 * 就可以了，比如 div*3 就可以快速生成3个div；
生成父子级关系的标签，可以用 > ，比如 ul>li 就可以了；
生成兄弟关系的标签，用 + 就可以了，比如div+p；
生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了；默认是生成div标签，要想生成其他标签，可以在 .demo前或者 #demo前加上想要的标签名。比如 p.demo tab键。
生成div类名是有顺序的，可以用自增符号$ .demo$*3 tab键；
在生成的标签内部写内容用{}表示。比如 p{我是个大sb} tab键；
2、快速生成css样式语法
Css基本采取简写形式即可：
比如w200 按tab键 可以生成 width：200px；
比如lh26 按tab键 可以生成 line-height：26px；
七、css的复合选择器
1、什么是复合选择器：在css中，可以根据选择器的类型把选择器分为基础选择器和复合选择器。复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素（标签）；
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等；
2、后代选择器（重点）
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 { 样式声明 }
上述语法表示选择元素1里面的所有元素2（后代元素）
例如：
ul li { 样式声明 } /* 选择ul里面所有的li标签元素 */
元素1和元素2中间用空格隔开；元素1是父级，元素2是子级，最终选择的是元素2；元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可；元素1和元素2可以是任意基础选择器。
3、子选择器（重点）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法：
元素1>元素2 { 样式声明 }
上述语法表示选择元素1里面的所有直接后代（子元素）元素2
例如：
div>p { 样式声明 } /* 选择div里面所有最近一级p标签元素 */
元素1和元素2之间用大于号隔开；元素1是父级，元素2是子级，最终选择的是元素2；元素2必须是亲儿子，其孙子、重孙之类都不归它管。简单来说就是亲儿子选择器。
4、并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1, 元素2 { 样式声明 }
上述语法表示选择元素1和元素2.
例如：
ul,div { 样式声明 } /* 选择ul和div标签元素 */
元素1和元素2中间用英文逗号隔开；逗号理解为和的意思；并集选择器通常用于集体声明。
5、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第n个元素；
伪类选择器书写的最大特点是用冒号 : 表示，比如 :hover、 :first-child.
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以先学习最常用的链接伪类选择器。
6、链接伪类选择器
链接伪类选择器注意事项：为了确保生效，请按照LVHA的顺序声明 ：link、：visited、：hover、：active；
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式；
链接伪类选择器实际工作开发中的写法：
/* a是标签选择器 所有的链接 /
a {
color: gray;
}
/ :hover 是链接伪类选择器 鼠标经过 /
a:hover {
color: red; / 鼠标经过的时候，由原来的灰色变成了红色 */
}
7、:focus伪类选择器
:focus 伪类选择器用于获得焦点的表单元素。焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color: yellow;
}
8、复合选择器总结
选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 .nav a
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于 .nav>p
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号 .nav,.header
链接伪类选择器 选择不同状态下的链接 跟链接相关 较多 重点记住a{}和a:hover实际开发用
:focus选择器 选择获得光标的表单 跟表单有关 较少 input:focus
八、css元素的显示模式
什么是元素的显示模式？
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己独占一行，比如一行可以放多个span。
Html元素一般分为块元素和行内元素两种类型。
元素显示模式的分类：块元素，行内元素，行内块元素
1、块元素
常见的块元素有
-
,
,
-
,
- ,
- 等，其中div标签是最典型的块元素。
块级元素的特点：
独占一行；高度，宽度，外边距以及内边距都可以控制；宽度默认是容器（父级宽度）的100%；是一个容器及盒子，里面可以放行内或者块级元素。
⚠️：文字类的元素内不能使用块级元素；标签主要用于存放文字，因此
里面不能放块级元素，特别是不能放div标签；同理，
-
等都是文字类块级标签，里面也不能放其他块级元素。
2、行内元素
常见的行内元素有,,,,,,,,等，其中span标签是最典型的行内元素。有的地方也将行内元素成为内联元素。,
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个；高宽直接设置是无效的；默认宽度就是它本身内容的宽度；行内元素只能容纳文本或其他行内元素。
⚠️：链接里面不能再放链接；特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全。
3、行内块元素
在行内元素中有几个特殊的标签：,,,它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。
行内块元素的特点：
和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）；默认宽度就是它本身内容的宽度（行内元素的特点）；高度、行高、外边距以及内边距都可以控制（块级元素特点）；
元素显示模式的转换：特殊情况下，我们需要元素模式的转换。简单理解就是，一个模式的元素需要另外一种模式的特性，比如想要增加链接的触发范围。
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;
一个小技巧：单行文字垂直居中的代码：让文字的行高等于盒子的高度。如果行高小雨盒子高度，文字会偏上；如果行高大雨盒子高度，则文字偏下。
九、css的背景
通过css的背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1、背景颜色
background-color属性定义了元素的背景颜色。
background-color： 颜色值；
一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动置顶背景颜色为透明色。
2、背景图片
Background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）。
background-image：none| url(url);
参数none表示无背景图，默认的；参数url：使用绝对或相对地址指定背景图像。
3、背景平铺
如果需要在html页面上对背景图像进行平铺，可以使用background-repeat属性。
background-repeat：repeat | no-repeat |repeat-x |repeat-y;
参数值 作用
Repeat 背景图像在纵向和横向上平铺（默认的）
no-repeat 背景图像不平铺
Repeat-x 背景图像在横向上平铺
Repeat-y 背景图像在纵向平铺
4、背景图片位置
利用background-position属性可以改变图片在背景中的位置。
background-position：x y；
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。
参数值 说明
Length 百分数｜由浮点数字和单位标识符组成的长度值
position top｜center｜bottom｜left｜center｜right 方位名词
a、参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致；
如果只指定了一个方位名词，另一个值省略，则第二值默认居中对齐。
b、参数是精确单位
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标；
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。
c、参数是混合单位
如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标；
5、背景图像固定（背景附着）
background-attachment属性设置背景图片是否固定或者随着页面的其余部分滚动。
background-attachment后面可以制作视差滚动效果。
background-attachment：scroll｜fixed；
参数scroll，背景图像是随着对象内容滚动；参数fixed，背景图像固定。
6、背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
Background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
7、背景色半透明
css3为我们提供了背景颜色半透明效果。
background：rgba（0，0，0，0.3）；
最后一个参数时alpha透明度，取值范围在0-1之间；
我们习惯吧0.3的0省略掉，写为background：rgba（0，0，0，.3）；
注意：背景半透明是指盒子背景半透明，盒子内容不受影响；
十、css三大特性
层叠性，继承性，优先级
1、层叠性
给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠0另一个冲突的样式，层叠性主要解决样式冲突的问题。
层叠性原则：
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；
样式不冲突，不会层叠；
2、继承性
Css中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是子承父业。
恰当的使用继承可以简化代码，降低css样式的复杂性；
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）；
行高的继承性：
body {
font: 12px/1.5 ‘microsoft yahei’;
}
行高可以跟单位也可以不跟单位；
如果子元素没有设置行高，则会继承父元素的行高；
此时子元素的行高是：当前子元素的文字大小*1.5；
Body行高1.5不跟单位，让它设置为当前元素大小的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 重要的 ∞无穷大
优先级⚠️点：
权重是有4组数字组成，但是不会有进位；
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推；
登记判断从左向右，如果某一位数值相同，则判断下一位数值；
继承的权重是0，0，0，0，如果该元素没有直接选中，不管父元素权重多高，子元素的到的权重都是0；
权重叠加：只有复合选择器，才有权重叠加，需要计算权重。
十一、盒子模型
页面布局要学习的三大核心：盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。
1、网页布局的本质
网页布局的过程：先准备好相关的网页元素，网页元素基本都是盒子box；利用css设置好盒子样式，然后摆放到相应位置；往盒子里面装内容；
网页布局的核心本质：利用css摆盒子；
2、盒子模型（box model）组成
所谓盒子模型：就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
css盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框，外边距，内边距，实际内容。
border边框 content内容 padding内边距 margin外边距
3、边框border
Border可以设置元素的边框，边框有三部分组成：边框宽度（粗细），边框样式，边框颜色
语法：
border: border-width||border-style||border-color;
属性 作用
border-width 定义边框粗细，单位是px
Border-style 边框的样式，比如实线，虚线，点线呐
border-color 边框的颜色
Css边框允许你指定一个元素边框的样式和颜色：
边框简写：
border：1px solid red；没有顺序
边框分开写法：
border-top：1px solid red；/只设定上边框 其余同理/
表格的细线边框：border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：
border-collapse： collapse；
Collapse单词是合并的意思；
border-collapse： collapse；表示相邻边框合并在一起。
边框会影响盒子实际大小：边框会额外增加盒子的实际大小，因此我们有两种方案解决：
A、测量盒子大小时，不量边框；
b、如果测量的时候包含了边框，则需要width/height减去边框宽度；
4、内边距padding
padding属性用于设置内边距，即边框与 内容content 之间的距离。
属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
Padding属性（简写属性）可以有1-4个值：
值的个数 表达意思
Padding：5px； 1个值，代表上下左右都有5像素内边距；
Padding：5px 10px； 2个值，代表上下内边距5px，左右内边距是10px；
Padding：5px 10px 20px； 3个值，代表上内边距5px，左右内边距10px，下内边距20px；
padding：5px 10px 20px 30px； 4个值，上是5px，右是10px，下是20px，左是30px。顺时针。
padding会影响盒子的实际大小
当给盒子指定padding值之后，发生了两件事：
内容和边框有了距离，添加的内边距；
padding影响了盒子实际大小；
也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。
如果盒子本身没有设定width/height属性，则此时padding不会撑开盒子大小。
解决方案：如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
5、外边距margin
margin属性用于设置外边距，即控制盒子和盒子之间的距离
属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
Margin简写方式代表的意义跟padding完全一致。
外边距典型应用：
外边距可以让块级盒子水平居中，但是必须满足两个条件：盒子必须指定了宽度（width）；盒子左右的外边距都设置为auto；
.header { width: 960px; margin: 0 auto;}
常见的写法，以下3种都可以，最推荐第三种：
margin-left：auto；margin-right：auto；
margin：auto；
margin：0 auto；
⚠️：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可。
外边距合并：使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
A、相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin bottom和top之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加margin值。
B、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
也就是说整体的外边距会按照大的来，而子元素仍然在父元素的左上角。
解决方案：可以为父元素定义上边框；可以为父元素定义上内边距；可以为父元素添加overflow：hidden；
还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题，后面再总结。
6、清除内外边距
- {
margin: 0;
padding: 0;
}
这句话也是css的第一行代码
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除掉网页元素的内外边距。
⚠️：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
去掉li前面的项目符号（小圆点） ： list-style: none;
十二、圆角边框
在css3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了
border-radius属性用于设置元素的外边框圆角
语法：
border-radius：length；
radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。
参数值可以为数值或者百分比的形式；
如果是正方形，想设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%；
如果是个矩形，设置为高度的一半就可以做；
该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角；
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
十三、盒子阴影与文字阴影
Css3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
语法：
box-shadow：h-shadow v-shadow blur spread color inset；
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影尺寸
color 可选，阴影的颜色。rgba?参阅css颜色值
inset 可选，将外部阴影outset改为内部阴影
⚠️：默认的是外阴影outset，但是不可以写这个单词，否则导致阴影无效；盒子阴影不占用空间，不会影响其他盒子排列。
文字阴影：在css3中，我们可以使用text-shadow属性将阴影应用在文字上。
语法：
text-shadow：h-shadow v-shadow blur color；
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
color 可选，阴影的颜色。rgba？参阅css颜色值
十四、浮动float
传统网页布局的三种方式：普通流（标准流）、浮动、定位。
网页布局的本质就是用css来摆放盒子。把盒子摆到相应位置。
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
