CSS

一、css的概述

1.css的概念

层叠样式表 (Cascading Style Sheets【狮诶斯】，三个单词字头缩写为 CSS），他是专门用于修饰页面样式的。

比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画等等。

我们在之前的课程中对网页的基础内容有过了解。

html:超文本标记语言，网页的结构搭建，页面布局
css:层叠样式表,网页的修饰，样式的渲染
javascript:解释型的编程语言，用于与页面的交互

层叠的含义相当于我们画动画片，比如画一个耳朵。一层一层的增加样式内容，最初就是勾勒一个简单的轮廓。

2.CSS与HTML属性使用原则

html 书写样式的缺点：
- html代码变得杂乱
- 样式只用于修饰该标签，复用性很差
- 样式需要更改的时候不利于维护
使用css书写样式的优点（w3c建议我们尽量使用css的方式取代html属性）
- 样式复用性高
- 方便维护
- 使用ui框架更加便捷美观

3.css的语法规范

(1)内联样式

内联样式也可以叫行内样式，就是在html文件中的html标签中，使用style属性的样式值来完成元素的样式渲染

语法：

<span style="样式声明"></span>

样式声明：
- 由样式属性和值组成；
- 属性和值之间用冒号连接；
- 多个样式声明用分号分隔。
如：“属性：值; 属性：值;”
特点：
- 写在标签里面，缺点是影响阅读，看着乱
- 不利于修改，复用性差。
优点:
- 指定当前标签，优先级非常高

<h1>没有加任何样式，只有标签自己的样式</h1>
<h1 style="">加入字体颜色样式</h1>
<h1 style="color: red;font-size: 40px;">加入字体颜色和字体大小样式</h1>
<h1 style="font-size: 40px;">加入字体颜色和字体大小样式</h1>

(2)内部样式

在网页的头部<head>标签中增加一对<style></style>标签，在<style>标签记中定义该网页的所有样式。

语法：

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    选择器 {样式列表}
</style>
</head>

样式规则：由选择器和样式声明的列表组成就是把很多声明好的样式匹配给页面中的元素
特点：
- 需要选择器查找元素,嵌入到html文件中，影响html文件的大小
- 只能在当前页面重用
- 优先级低于内联样式
- 多用于测试和学习

(3)外部样式

单独创建css文件，在html的head标签中中link标签引入css文件。 href叫做超文本引用，它的属性值是需要引用css文件的路径。 rel属性指引入文件于当前html的关系，必写属性。

语法：

<head>
<link rel="stylesheet" href="wai.css">
</head>

样式规则：
- 与内部样式相同
- 由选择器和样式声明的列表组成
- 把很多声明好的样式匹配给页面中的元素
特点：
- 所有页面都可以使用
- 项目中最重要的样式使用方式
- 一般情况下级别低于内部样式（注意顺序）

【易错点】

css文件和html文件的距离自己都不知道在哪，乱放，但引入路径和老师的一样
一着急html中没有引入css文件
特别喜欢写绝对路径，在某个盘符的某个文件夹中，不推荐这种写法，因为一旦更换文件位置马上找不到

4.补充知识——控制台调试代码

打开控制台的方法（部分windows的打开方式是f12或者鼠标右键-检查）
查看百度的控制台
通过控制台拿到很多素材
控制台的elements展示的就是html标签及嵌套关系
找到元素的方式
查看嵌套方式
看看样式，暂时更改样式

5.css的术语

属性
值（多指数字）
关键字（css中的关键单词比如center）
属性值（值+关键词+功能符如：1px solid rgb(0,0,0)）
长度单位比如：px、pt、em、rem、vw、vh、%、deg、s、ms等
功能符（函数）
声明（属性加属性值color：red；）
声明块{}
规则集
- 不换行换行均可以，但建议换行更清晰
- 如果数值为0可以不写单位，其他必须写
- 一个样式声明列表中最后一个样式值可以不写分号其他必须写
- 多个{}之间不写分号
选择器（用来选择目标元素的特定或者指定名字）

7.css样式的特征

继承性：继承性代表某个元素使用一些样式的时候会影响到自己的子元素
- 并不是所有的属性都可以继承，只有以部分文字类样式的属性才可以继承
- 并不是只有儿子可以继承，只要是后代就可以继承
- 一般用于设置网页上的共性信息，例如网页的文字颜色、字体、文字大小等内容
- 不是所有的标签都会继承祖先元素的样式比如 :a,button等标签
层叠性
- 给一个元素在不同位置设置多个不重复的样式都会作用在该元素上
- 出现相同样式不同值的时候，会根据优先级发生改变（或不起作用，或覆盖）
优先级
- 最低优先级：浏览器默认样式
- 内部样式和外部样式谁优先要注意加载顺序
- 最高优先级：内联样式
- !important：获取最高优先级color:red!important; 注意分号的位置，放在属性值之后，与值之间用空格隔开.内联样式中你可以使用!important

二、选择器

1.基础选择器

（1）通用选择器

选择html文件内所有的元素
* {样式声明}
最常用的用法是*{margin:0;padding:0} 清除浏览器的内外边距

因为浏览器的渲染引擎对标签的表现不同因此会在编写页面支出做一些样式重制 css reset

* {
  margin:0;
  padding:0;
}

（2）元素选择器（标签选择器）

通过标签的名字来选择html元素，权重值为1
div {样式声明}
一般页面中设置某种元素的默认样式
弊端当标签很多的时候，就会出现没办法精准定位的情况

（3）id选择器

给标签的前半部分增加一个属性 id 这个属性可以指定一个唯一的不重复的值，权重值100
<div id="abc">一个标签</div>
#abc {样式声明}
id名不能以数字开头，不建议使用中文命名，尽量见名知意
多个单词连接可以用- 、_、驼峰

【例子】

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   #r { color: red;}
   #b { color: blue;}
   #g { color: green;}
  </style>
</head>
<body>
  <div id="r">div我要红色</div>
  <div id="b">div我要蓝色</div>
  <div id="g">div我要绿色</div>
</body>

【弊端】：三个div每个都有和其他重复的样式，使用id有几个弊端，过于订制化导致每一个元素都要有自己的id有一套自己的样式，代码量过大重复性过大。明明有重复的内容，但通过id选择器只能是一个一个的书写其样式，又不是很智能

<p id="p1">p我想20号字红色</p>
<p id="p2">p我想20号字绿色</p>
<p id="p3">p我想30号字红色</p>

（4）类选择器【重要】

类选择器先要使用标签的class属性赋值，类选择器的权重值10
<div class="abc">一个标签</div>
.xxx {样式声明}
类名不能以数字开头，不建议使用中文命名，尽量见名知意，多个单词连接可以用- 、_、驼峰
一个元素可以创建多个类名，每个类名之间用空格分开<div class="abc zyx">一个标签</div>

<style>
  .color-r {color: red;}
  .color-b { color: blue;}
  .font-20 { font-size: 20px;}
  .font-30 {font-size: 30px;}
</style>
<body>
  <p class="color-r font-20">p我想20号字红色</p>
  <p class="color-g font-20">p我想20号字绿色</p>
  <p class="color-r font-30">p我想30号字红色</p>
</body>

【易错点】

忘记给元素增加id或者class属性就直接开始写css样式
class的点，很容易忽略那个点
先写类名还是先定义class属性

（5）群组选择器

多个选择器名用逗号连接，可以一起完成共同样式的指定div,p,span {color: red;}
群组选择器并不是只能使用相同类型的选择器，可以是各种选择器一起参与#mydiv.b,h4 {color: blue;}

2.关系选择器

在html结构中存在三种关系，“兄弟关系”、“父子关系”、“后代关系”

（1）后代选择器

后代关系：以及嵌套或者多级嵌套
先代元素（祖先）选择器写在前面，之后写一个空格，空格后写后代元素选择器。
祖先元素后代元素 {样式声明}
需要注意的是空格不要忘记，祖先元素不一定是父级和祖父级还可以再往上的级别都是可以的
但有弊端就是级别不同的相同选择器名称，容易造成不想要的结果，因此当你需要更深的层次时，可以继续用空格加入更深层的后代。

（2）子代选择器

可以选中某个元素的直接子元素，与后代不同的是子代选择器的范围更小。
父级元素 > 子级元素 {样式声明}
子代选择器可以和后代选择器混写。
层级可以向后代选择器一样延申,区别就是子代是>连接,后代是空格连接.baba > div > div {字体颜色;}

（3）兄弟选择器

同一层的关系选择器，可以选中该元素后面的兄弟元素。
某元素选择器 ~ 该元素后面的所有兄弟 {样式声明}
需要注意的是兄弟选择器可以选到该元素后面的兄弟，而选不到之前的。

（4）相邻选择器

同一层的关系选择器，可以选中参照的元素后面紧挨着被参照元素的选择器。
某元素选择器 + 该元素后面的唯一相邻的兄弟 {样式声明}
需要注意的是，相邻兄弟选择器只能选中紧紧相邻的一个兄弟

3.伪类选择器

伪类选择器的作用是匹配同一个元素，不同状态下的样式
选择器:伪类 {样式声明}
a标签的四种状态：
- a:link 点击之前
- a:visited 访问过后
- a:hover 鼠标悬停
- a:active 点击激活

（1）静态伪类

查看a连接本身的样式:

a:link{字色};        超链接点击之前
a:visited{字色};     链接被访问过之后
a:hover {};         “悬停”：鼠标放到标签上的时候
a:active {};        “激活”： 鼠标点击标签，但是不松手时
注：以上四个伪类同时作用在同一个元素上时，需要有严格的编写顺序,顺序为 :link :vistied:hover:active 
input:focus {背景色} 某个标签获得焦点时的样式

超链接点击之前
选择器:link {样式声明}
链接被访问过之后
选择器:visited {样式声明}

（2）动态伪类

“悬停”：鼠标放到标签上的时候
选择器 :hover {样式声明}
“激活”：鼠标点击标签，但是不松手时
选择器 :active {样式声明}
某个标签获得焦点时的样式（比如某个输入框获得焦点）
选择器 :focus {样式声明}

4.伪元素选择器

CSS 伪元素用于设置元素的“指定部分”的样式一般:before和:after都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容. 有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。

常用的伪元素选择器

:before表示元素最前边的部分，紧随着标签的部分
:after表示元素的最后边的部分，紧随着标签的部分
:before{content:""}:after{content:""} content必须写

5.css优先级

（1）优先级的原则

顺序读取的优先级：是相同类型选择器采用顺序读区后来的优先
选择器的优先级：不同类型选择器，按照权重原则采用
继承的优先级：制定样式的优先级大于继承样式的优先级
复杂选择器优先级：根据权重值累加比较后采用优先级
最高优先级：!important，直接获取最高优先级，内联样式不能加!important

（2）优先级的比重大小

按CSS引入方式分:内联样式 > 内部样式 > 外部样式（注意顺序）
按元素分:id选择器（100） > 类选择器（10） > 元素选择器（1）

选择器默认自带权值，权值越高，优先级越高
!important   >1000
内联样式      =1000
id选择器      =100
class和伪类   =10
元素选择器     =1
*通用选择器    0
继承的样式     无权值

权值总结：
1.当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后比较，权值大的优先显示
2.权值相同，就近原则
3.群组选择器的权值，单独计算，不能相加
4.样式后面添加!important,直接获取最高优先级
  内联样式不能添加!important
5.选择器权值的计算，不会超过自己的最大数量级（1，10，100）
  如：100个元素选择器相加，不会大于10

三、尺寸

1.尺寸

（1）width 宽度和height 高度

定义元素的宽、高，不允许为负值，单位可以为绝对长度单位px，也可为%、em、rem、vw、vh等等。
一般情况在pc端页面布局中使用px单位。
使用百分比%单位时，代表参照父元素的宽度或者高度

单位：
px  像素
in  英寸   1in = 2.54cm
pt  磅值   1pt = 1/72in
cm  厘米
mm  毫米
项目中为了页面可以在pc，pad，phone都正常显示，我们一般会使用相对单位
em     以父元素的数值当做基本单位
rem    以html
的数值当做基本单位  （项目中用的多）
%      百分比

（2）max-width最大宽度和min-width最小宽度

max-width最大宽度,min-width最小宽度
max-height最大高度，min-height最小高度
定义元素在浏览器窗口中最小显示的宽度和高度，当窗口宽度或高度小于元素的最小宽度或高度时，浏览器出现横向或纵向的拖动条。
该值不允许负值，单位与宽度和高度一致。
一般会给pc端界面设置一个最小宽度，当低于这个宽度时出现横向拖拽条，为了不压缩页面的主要内容。

注意：如果不写宽高，各个元素默认的宽高是多少？
1.块级元素不写宽，默认宽度占满父容器宽度的100%
2.块级元素不写高，默认高度靠内容撑起来
3.行内元素，置宽高无效，宽高靠内容支撑
4.自带宽高属性的元素，设置宽高有效（img,table)

（3）溢出的处理

默认是纵向

溢出
overflow：
取值：visible 默认值，溢出部分可见

hidden 溢出部分掩藏

scroll 不管是否溢出，x轴和y轴方向都添加滚动条

auto 只有溢出才有滚动条，不溢出没有
overflow-x 设置水平轴滚动条
overflow-y 设置垂直轴滚动
如何设置成横向溢出
内部容器，设置宽度，大于外部容器的宽度

四、颜色

1.英文颜色

在开始编写代码初期会使用一些英文，英文数量较少，英文记忆较难，并且真实开发的时候会参照ui给的标注图。一般不会使用英文的颜色，所以在练习时使用。

https://seo.juziseo.com/tools/web_color/

常用的英文颜色：

red红色,green绿色,blue蓝色,black黑色,yellow黄色
transparent透明

2.十六进制颜色

项目开发中，ui与前端的沟通除了会给素材图，还有标注图，ui设计大多数会给出十六进制颜色。但十六进制颜色无法体现透明度和饱和度。在标注图中体现的井号开头6位的数字和字母叫做十六进制颜色

(1) 标注图

(2) 十六进制颜色书写方法

#	红色	绿色	蓝色
#	rr	gg	bb

十六进制颜色由 # 开头后面跟六位数字或字母。
数字的范围是0-9，字母的范围是a-f，字母大小写均可。
后面的字母和数字分成三组，每两位为一组，前两位代表红色范围，中间两位代表绿色范围，最后两位代表蓝色范围
如果两位一组的内容相同,可简写为三位。如：#FF00AA —> #F0A

3. rgb()颜色

rgb()函数，小括号中是三个参数，用逗号分隔
rgb中的r代表红色色值，g代表绿色色值，b代表蓝色色值。
它们的取色范围是0-255之前的256个值。
rgba(0,0,0,0.5) a代表透明度，取值范围是0-1之间的数字。颜色的透明，而不是元素的透明。

  <!-- 英文颜色 -->
  <div style="color: red;"></div>
  <!-- 十六进制颜色 -->
  <div style="color: #ff0000;"></div>
  <!-- rgb进制颜色 -->
  <div style="color: rgb(92, 39, 146);"></div>

4. web安全色

web安全色是用于网页的标准色彩，它比标准的rgb色彩要少。如果网页设计的时候用了非web安全色，那这个网页在不同的电脑显示出来可能是不同的颜色。

不同的平台（Mac、PC等）有不同的调色板，不同的浏览器也有自己的调色板。这就意味着对于一幅图，显示在Mac上的Web浏览器中的图像，与它在PC上相同浏览器中显示的效果可能差别很大.

http://www.bootcss.com/p/websafecolors/

五、边框属性border

1. 边框样式

border元素的边框线，由好几个部分组成的，分别可以设定元素的边框宽度、样式和颜色。

border简写方式

border:width style color;

border-width边框宽度，长度单位如：px
border-style边框样式，
- border-style: none;无轮廓,border-color与border-width将被忽略
- border-style: solid;实线
- border-style: dotted;点线
- border-style: dashed;虚线 IE6下显示为点线效果
- border-style: double;双实线
border-color边框颜色
边框有四个方向(上右下左):
- border-top上边框
- border-right右边框
- border-bottom下边框
- border-left左边框

div {
  width: 200px;
  height: 200px;
  border-width: 5px;
  border-color: red;
  /*无轮廓,border-color与border-width将被忽略*/
  border-style: none;
  border-style: solid;/*实线*/
  border-style: dotted;/*点线*/
  border-style: dashed;/*虚线 IE6下显示为dashed效果*/
  border-style: double;/*双实线，两条单线与其间隔的和等于指定的border-width值*/
}

(1) 利用边框渲染立体效果

/* 凹陷的按钮 */
.d1{
  width:200px;height:50px;
  background-color:#cfcfcf;
  border-width:5px;
  border-style:solid;
  border-top-color:#616561;
  border-left-color:#616561;
  border-bottom-color:#fff;
  border-right-color:#fff;
}
/* 凸起的按钮 */
.d2{
  width:200px;height:50px;
  background-color:#cfcfcf;
  border-width:5px;
  border-style:solid;
  border-top-color:#fff;
  border-left-color:#fff;
  border-bottom-color:#616561;
  border-right-color:#616561;
}

(2)利用边框做三角形

三角形是利用边框的特性绘制的
当宽度高度为0时，单边边框的宽度和颜色已经样式就会形成三角形
但要注意书写顺序

div {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid black;
}

六、元素的分类

1.元素的显示属性

在html4的规范中明确将元素的显示方式分为“块级元素”和“内联元素”，每个元素都带着自己本身的显示属性。

display属性定义了元素显示方式，按照何种类型显示
display: block; 显示为块级元素
display: inline; 显示为内联元素
display: inline-block; 行内块显示，属于内联元素
display: table; 表格显示
display: none; 不显示

span内联宽高无效变为block后有效，p宽高有效变为inline后无效，ainline-block，宽高有效横着排，h1设置none消失，div给宽高table后高被硬撑开

span{
 width:100px;
 height:100px;
 background-color:red;
 /*内联元素变成块级元素宽高有效*/
 display:block;
}
p{
 width:100px;
 height:100px;
 background-color:blue;
 /*块级元素变成内联元素宽高无效*/
 display:inline;
}
a{
 width:100px;
 height:100px;
 background-color:green;
 /*内联元素变成行内块显示宽高有效*/
 display:inline;
}
h1{
 width:100px;
 height:100px;
 background-color:orange;
 /*不显示就看不到了也不占位置了*/
display:none;
}
div{
 width:100px;
 height:100px;
 background-color:hotpink;
 /*变成table显示之后高度会被内容撑开，不被100限制，表格的特点就是“随多的”撑开*/
 display:table;
}

2. 内联元素

内联元素也可以叫行内元素，在相加宽度小于浏览器宽度时，可以和其他行级元素处于一行，不用必须另起一行。元素的高度、宽度及顶部和底部边距不可设置（除了具有宽高属性的元素以外比如img、input等）常见的行元素：<a>、<span>、<input>、<select>、<textarea>、<button>、<img>

(1) inline

内联元素也可以叫行内元素
display: inline; 将元素变为内联元素
在相加宽度小于浏览器宽度时，可以和其他行级元素处于一行
元素的高度、宽度及顶部和底部边距不可设置（除了具有宽高属性的元素以外比如img、input等）
常见的行元素：<a>、<span>、<input>、<button>、<img>

(2) inline-block

inline-block我们可以称之为行内块显示，但它不是作为单独的显示形式存在的，比如<button>的默认样式就是inline-block。行内块显示不是元素类型，它属于内联元素页面显示时每一个a标签中都含有一个缝隙，是因为空格换行造成的。

display: inline-block;行内块显示，但它不是作为单独的显示形式存在的
可以调整宽度和高度并且横向排列的布局，比如：导航。
常见行内块显示元素：<button> <img>

(3) 幽灵空白节点

div有背景色放一个img幽灵空白节点宽高100%看效果，有缝隙，使用两种去掉方法

解决方法：

将img变为块元素display: block;，实际布局常用
把父级div元素font-size: 0;去掉空白节点

/*去掉空白节点方法一display:block;*/
div{
width:300px;
background-color:red;
}
div img{
 width:300px;
 height:300px;
 display:block;
}

/*去掉空白节点方法二把当前元素中所有的空白节点的字号变为0*/
div{
 width:400px;
 background-color:red;
 font-size:0;
}
div img{
 width:25%;
}

2. 块级元素

每个块级元素都是独自占一行，其后的元素也只能另起一行
元素的高度、宽度、行高和顶底边距（内外）都是可以设置的
元素的宽度如果不设置的话，默认为父元素的宽度
高度为内容高度，如没有内容高度为0
常见的块级元素：<div>、<p>、<h1>、<ol>、<ul>、<li>、<table>、<form>

七、溢出

1. 溢出效果

(1) 文字内容溢出

在css中块级元素的内容超出了元素的框，叫做溢出。默认纵向溢出。
溢出的文字将兄弟元素挤下去，而是盖住了兄弟元素。

两个div100*100内容都lorem，溢出的文字将兄弟元素挤下去，而是盖住了兄弟元素。

<style>
  .d1 {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .d2 {
    width: 100px;
    height: 100px;
     background-color: blue;
  }
</style>
<body>
  <div class="d1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil cumque ab iusto quasi modi! Odit eos ducimus sint dolorum beatae a, voluptas fugit! Expedita facere explicabo iusto sint quaerat fuga!
  </div>
  <div class="d2">
    一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段一段
  </div>
</body>

(2) 元素溢出

子元素的内容超过了父元素的内容，也叫做溢出，它是元素溢出。

2. 溢出属性和值

overflow:visible;默认超出依然显示
overflow:hidden;溢出不显示
overflow:scroll;溢出出现滚动条，不溢出滚动条轨道也默认存在
overflow:auto;溢出出现滚动条，不溢出滚动条不存在
overflow-x x轴方向滚动条 overflow-x:hidden/auto
overflow-y y轴方向滚动条overflow-y:hidden/auto

div{
 width:200px;
 height:200px;
 background-color:yellow;
 /*溢出不显示*/
 overflow:hidden;
 /*溢出出现滚动条，不溢出滚动条轨道也默认存在*/
 overflow:scroll;
 /*溢出出现滚动条，不溢出滚动条不存在*/
 overflow:auto;
}

八、圆角

网页圆角按钮，圆角的效果可以提高用户体验，尖角感觉不友好，因此css3出现了元素圆角的属性

1. 圆角的属性

例子：radius.html整体圆角，分别设置1，2，3，4个值，长方形的百分比圆角为什么会不规则

boder-radius 圆角-半径
圆角半径的值是一个长度值，可以使用px、pt、em、rem、%等
长度值越大圆角半径越大
值的分配
- 1个值代表：四个角
- 2个值代表：左上、右下
- 3个值代表：左上、右上左下、右下
- 4个值代表：左上、右上、右下、左下顺时针
- 两组值,共8个值，x轴/y轴

div {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 10px;
  border-radius: 20px;
  border-radius: 20px 50px;
  border-radius: 20px 50px 40px;
  border-radius: 20px 30px 140px 50px; 
  border-radius: 10px/40px;
}

2. 元素的四个角

border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角

div {
  width: 200px;
  height: 200px;
  background-color: red;
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

3. 圆角的极限

圆角的值是从顶点向当前轴方向延展多少像素，然后画出水平和垂直的轴，轴心是原点画一条弧线连接两个点。

最大值是边的一半，当值大于边长度50%的时候就不会有变化了。设置一个角的时候，最大值是当前边的100%。

/* 圆形 */
.div1{
 width:200px;
 height:200px;
 background-color:red;
 border-radius:50%;
}
/* 椭圆 */
.div2{
 width:400px;
 height:200px;
 background-color:blue;
 border-radius:50%;
}

九、盒子阴影

1.盒子阴影的属性

使用空格分隔每个值，先有x轴和y轴的偏移（必写），再有模糊程度，阴影的扩展大小，颜色，内外阴影（默认外阴影）

第一个值和第二个值代表： x轴上的偏移量和y轴上的偏移量（正负值）。
第三个值代表：模糊半径的大小（羽化）不允许负值。
第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。
第五个值代表：颜色值。
第六个值（可选）代表：阴影向内inset：默认阴影向外扩散。

box-shadow:
取值：h-shadow  v-shadow  blur spread color
h-shadow  水平方向的阴影偏移
v-shadow  垂直方向的阴影偏移
blur      阴影模糊距离
spread    阴影尺寸
color     阴影颜色
outset    默认值

2. 多阴影

多个阴影以逗号分隔列出的时候，他们从前到后依次被覆盖，定义越前面的阴影有越高的层级，会覆盖在后面定义的阴影之上。

.d2 {
   /*多层*/
  box-shadow: 0 0 0 10px red, 0 0 0 20px blue, 0 0 0 30px green;
}
.d3 {
  /*双色括号*/
  box-shadow: -40px -40px 0 -20px red, 40px 40px 0 -20px blue;
}

盒子阴影可以设置多层
每一个阴影效果为一组，中间用逗号分隔阴影组

十、轮廓

轮廓常出现在表单输入或者选择的部分，提醒用户你正在与它交互，位于边框边缘的外围，可起到突出元素的作用。 outline 与 border相似同样可以分成三个属性宽度，样式，颜色，但常用的用法是需要将原有的轮廓线去除，因此使用简写即可。

outline属性
简写outline:width style color;（属性值和边框一样的写法）
input标签有默认的轮廓线，清空轮廓线input {outline: none;} 或 {outline: 0;}

在边框的外围的一圈线条，被称为边框的边框
去除轮廓：{outline: none;}或 {outline: 0;}
去除边框：boder：none/0

十一、盒子模型(框模型)

1. 盒尺寸四大家族

每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。

一个元素实际占地宽度：左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
一个元素实际占地高度：上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

2. 元素内容

元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。

(1) 内联元素盒模型

内联元素的宽高是auto，宽度高度只会一直随内容的宽度高度在同步变化。设置上下内边距和外边距无效。

宽度高度是auto，靠内容撑开
设置宽度高度无效
设置上下内外边距无效
排列方式，从左至右

(2) 块级元素盒模型

块级元素就可以设置宽度和高度，
只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。
宽度高度可以设置
内外边距设置均有效果
排列方式，从上至下

3. 内边距

(1) 内边距的属性

padding指盒子的“内补间”，宽高之外到边框以内的距离。
可以设置长度，如px、em、rem等,且不支持负值
padding有四个方向分别是上、右、下、左
- padding-top 上内边距
- padding-right 右内边距
- padding-bottom 下内边距
- padding-left 左内边距

(2) 内边距的值

padding:长度值;
1个值，将用于全部的四边。
2个值，第一个用于上、下，第二个用于左、右。
3个值，第一个用于上，第二个用于左、右，第三个用于下。
4个值，将按上、右、下、左的顺序作用于四边。
取值：以px的

4.外边距

(1) 外边距的属性

margin指盒子的外边距，外边距是当前元素和其他元素之间的距离。
可以设置长度，如px、em、rem，%等,%取值都是父元素宽度的百分比取值。

1. %  是父元素的%
2.取值auto:对上下外边距无效；自动计算块级元素的左右外边距，让块级元素水平居中
  (只对设置了宽度的会计元素生效)

正值时是增大该方向外边距，负值时是缩小该方向外边距。
margin有四个方向分别是上、右、下、左
- margin-top 上外边距
- margin-right 右外边距
- margin-bottom 下外边距
- margin-left 左外边距

(2) 内边距的值

和内边距一样，外边距可以简写1～4个值，下和右不会产生效果的原因，是因为外边距其实是当前元素与同级元素之间的距离。

1个值，将用于全部的四边。
2个值，第一个用于上、下，第二个用于左、右。
3个值，第一个用于上，第二个用于左、右，第三个用于下。
4个值，将按上、右、下、左的顺序作用于四边。

(3) margin的无效情形

行内元素设置上下外边距无效，设置宽高无效

外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。因为，margin是设置同级元素间的间隔，并不是设置它在父元素中的位置。如果右侧和下面并没有元素，就不会出现效果。

(4) margin的auto取值

margin有一个特殊的取值是auto，auto对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。

块级元素在父元素中水平居中margin:上下距离 auto;
上下距离在没有的时候可以写0
内联素使用margin：auto，不能完成居中效果

.tou {
width: 400px;height: 430px;
border-radius: 50%;
border:5px solid black;
}
.jian {
width: 60px;height: 200px;
border:5px solid black;
background-color: red;
border-radius: 25% 25% 50% 50%;
}

(5) 自带外边距的元素

因不同浏览器对元素的默认渲染样式不同，所以默认的内外边距也可能不同。因此要在编写样式之前使用

css reset 进行样式统一 * {margin：0；padding：0;}
body : 四个方向各8px
ul ：上下16px外边距，“左内边距”40px

(6) 外边距合并现象

兄弟元素之外边距合并
两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。

(7) 外边距溢出

外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。
原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距力浏览器会认为你定义的是父级。
解决方案
- 父元素增加padding-top缺点：增加了父元素实际高度
- 增加父元素的边框，缺点：增加了父元素实际高度
- 父元素增加overflow: hidden/auto;，缺点，父元素就不能溢出显示内容了
- 使用空<table></table>放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连
- 使用CSS3伪元素::before给父元素添加内容,源于增加空<table></table>

.box::before{
  content:"";
  display:table;
}

（8）关于会计元素，行内元素，行内块的总结（必须特别熟悉）

行内元素特点：
设置宽高无效，宽高根据内容自动撑开
上下外边距无效，左右外边距有效
可以去其他行内元素和行内块元素共用一行，一行放不下，再折行

块级元素的特点：
设置宽高有效，如果不设置，宽度是父级元素宽度的100%
如果不设置高度，高度靠内容撑开
4个方向的外边距都有效，独占一行

行内块元素：
设置宽高有效，但是自带一个默认宽高
4个外边距都有效，当时同一行修改一个行内块的垂直外边距，整行都会跟着一个发生位置改变
可以和其他行内块元素公用一行

十二、盒子模型的运用

1. 外边距的使用场合

元素的位置微调
元素之间的距离调整

<style>
.m {
  width: 500px;
  border: 3px solid black;
  font-size: 0;
}
.m img {
  width: 100px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  /*可以整合*/
  margin: 20px 0 20px 20px;
}
</style>
  </head>
  <body>
    <div class="m">
      <img src="./img/zr/自然1.jpg" alt="">
      <img src="./img/zr/自然2.jpg" alt="">
      <img src="./img/zr/自然3.jpg" alt="">
      <img src="./img/zr/自然4.jpg" alt="">
    </div>
  </body>

2. 内边距的使用场合

改变边框内到内容之间的范围，用户“感觉”元素变大
文本与边框增加距离，把元素撑开
某些时候内边距也可以增加元素的距离
padding没有auto

<style>
.p {
  width: 500px;
  border: 3px solid black;
  font-size: 0;
}
.p img {
  width: 100px;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  /*可以整合*/
  padding: 20px 0 20px 20px;
}
</style>
  </head>
  <body>
    <div class="p">
      <img src="./img/zr/自然1.jpg" alt="">
      <img src="./img/zr/自然2.jpg" alt="">
      <img src="./img/zr/自然3.jpg" alt="">
      <img src="./img/zr/自然4.jpg" alt="">
    </div>
  </body>

3. 盒子模型的计算方式

box-sizing: content-box; 标准盒子模型
- 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
- 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
box-sizing:border-box 改变盒子模型计算方式
- 设置的宽度width = 左右border + 左右padding + 内容的宽度
- 设置的高度height = 上下border + 上下padding + 内容的高度
- 注意：可能会导致内容溢出，需要时再使用