CSS —— 层叠样式表

1，css简介

1. CSS是一种标记语言
2. 用于设置HTML页面中的文本、图片、版面的布局 和 外观显示样式。
3. 简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单

2，css语法

选择器 { key : value; }

3，css选择器1

• 选择器的作用就是根据不同的需求，把目标元素选出来。
• 选择器就是选择元素用的

• 标签选择器 ， 标签名
  • 可以选择出所有相同的标签，例如p标签等
• 类名选择器 ， .类名
  • 可以选择一个或多个指定类名的标签
• id选择器 ， #id
  • 一次只能选择一个元素（因为id不会重复）
• 通配符选择器 ， *
  • 选择所有的元素
• 后代选择器 ， 元素1 元素2
  • 前面写父级元素，空格后面写子级元素
  • 用来选择父元素中的后代元素
  • 父级选择器和子级选择器可以是任意基础选择器
• 子元素选择器 ， 元素1>元素2
  • 与后代选择器不同，子级选择器只选择父元素最近一级的目标元素
  • 只管儿子，不管孙子
• 并集选择器 ， 元素1，元素2
  • 多个选择器用逗号隔开
  • 并集选择器可以同时选择多组标签，同时为它们定义相同的样式
  • 通常用于集体声明

/* 选中所有p元素 */
p {color:red;}
/* 选中所有类名为p的元素 */
.p {color:red;}
/* 选中所有id为p的元素 */
#p {color:red;}
/* 选中所有元素 */
* {color:red;}
/* 选中p元素中的a元素 */
p a {color:red;}
/* 选中p元素中为p元素子级的a元素 */
p>a {color:red;}
/* 选中所有p元素和div元素 */
p,div {color:red;}

4，css选择器2

4.1，伪类选择器

• 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第一个，第n个元素
• 伪类选择器书写最大的特点是 用冒号:表示 ，比如:hover、:first-child。
• 伪类选择器很多，比如有链接伪类、结构伪类等

4.1-1，链接伪类选择器：

• 链接伪类选择器，用于给链接添加特殊样式
• 是专门用来选择链接元素进行设置的

链接伪类选择器有四种：

• a:link，选择所有未被访问的链接
• a:visited，选择所有已经被访问的链接
• a:hover，选择鼠标指针当前所停放的链接
• a:active，选择活动链接（鼠标按下未弹起的链接）
• 特别注意：为了确保链接伪类选择器正常生效，请严格按照LVHA的顺序声明：link、visited、hover、active

/* 未访问的是灰色，已经访问过的是橙色，停留或经过为蓝色，点击未放开的是绿色的 */
	   	a {
            text-decoration: none;
        }

        a:link {
            color: #333
        }

        a:visited {
            color: rgb(255, 102, 0);
        }

        a:hover {
            color: rgb(0, 110, 255);
        }

        a:active {
            color: rgb(0, 165, 14);
        }

4.1-2，focus伪类选择器

• input:focus
• focus伪类选择器，用来选择获取到焦点的表单元素

/* 给获取到焦点的表单元素添加特殊样式 */
input:focus {
            background-color: rgb(172, 255, 186);
            color: rgb(0, 0, 0);
            font-weight: 700;
            border: solid 1px red;
        }

4.1-3，结构伪类选择器

• 结构伪类选择器是css3新增，有些元素既没有类名，有没有属性，我们可以按照顺序选中它们

• 父元素 :first-child，选择父元素中的第一个子元素
• 父元素 :nth-child(n)，选择父元素中的第n个子元素
• 父元素 :last-child，选择父元素中的最后一个子元素
• 注意：
  • 父元素 :first-child，冒号前面不加子元素选择器的话，直接按照顺序查找选中
  • 父元素 span:first-child，冒号前面加子元素选择器，则该位置的元素必须满足子选择器才可以
  • 父元素 span:first-child，如该选择器，父元素的第一个元素必须是span元素才会生效

• 父元素 指定条件:first-of-type，选择父元素中的第一个满足指定条件的子元素
• 父元素 指定条件:nth-of-type(n)，选择父元素中的第n个满足指定条件的子元素
• 父元素 指定条件:last-of-type，选择父元素中的最后一个满足指定条件的子元素

nth-child和nth-of-type的区别

• nth-child选择的是“父元素中的第n个子元素”，不管是什么类型的
• nth-of-type选择的是“父元素中指定类型子元素中的第n个”，必须是指定类型的

参数n

• n可以是数字，关键字，公式
• 关键字：
  • even，偶数
  • odd，奇数
• 公式：
  • 2n，偶数
  • 2n+1，奇数
  • 5n，5的倍数
  • n+5，从第5个开始（包含第5个）
  • -n+5，前5个（包含第5个）
  • 注意：n为公式时，从0开始计算，第0个或超出数字会被忽略

4.2，属性选择器

• 属性选择器，根据属性来选择元素
• 用于选中具有指定属性的指定元素，需要同时满足这两个条件，类似于交集选择器

• E元素[x属性]，选择具有x属性的E元素
• E元素[x="y"]，选择具有x属性，且属性值为y的E元素
• E[x^="y"]，选择具有x属性，且属性值以y开头的E元素
• E[x$="y"]，选择具有x属性，且属性值以y结尾的E元素
• E[x*="y"]，选择具有x属性，且属性值中含有y的E元素

/* 选择有类名的div元素 */
div[class]{}
/* 选择有类名，且类名为zxf的div元素 */
div[class="zxf"]{}
/* 选择有类名，且类名以z开头的div元素 */
div[class^="z"]{}
/* 选择有类名，且类名以f结尾的div元素 */
div[class$="f"]{}
/* 选择有类名，且类名中包含x的div元素 */
div[class*="x"]{}

4.3，伪元素选择器

• 伪元素就类似于在元素的前方或后方添加了一个新元素，但是在html中我们是看不见它的，所以称为伪元素
• 而伪元素选择器，就可以帮助我们添加并设置伪元素

• 前置伪元素选择器：元素A::before
  • 在元素内部的前面插入内容
• 后置伪元素选择器：元素A::after
  • 在元素内部的后面插入内容

注意：

• 伪元素选择器必须有content属性，它用来设置伪元素内容
• before在内容的前面，after在内容的后面
• before和after 创建一个元素 ，但是属于行内元素

/* 利用伪元素选择器，添加伪元素，在元素内部的首部和尾部添加内容 */
.iconfont::after {
        position: absolute;
        right: 8px;
        top: 8px;
        font-size: 24px;
        font-weight: 900;
        font-family: "iconfont";
        content: "\e67d";
      }
      .iconfont::before {
        content: "zxf";
        line-height: 40px;
        position: relative;
        left: 8px;
        top: 0;
      }

5，css文字样式

• 字体大小，font-size
  • 控制字号大小，我们通常用的单位是px（像素），一定要跟上单位
• 字体系列，font-family
  • 实际工作中按照团队约定来选择字体
• 字体粗细，font-weight
  • 加粗是700或bold，正常是normal或者400，没有单位
• 字体样式，font-style
  • italic是倾斜，normal是正常
• 字体样式复合写法，font
  • font：样式 粗细 大小/行高 字体
  • 如果使用复合写法，各个属性的顺序不能打乱
  • 复合写法中，不需要的属性可省略，但是font-size和font-family必须写
• 字体颜色，color
  • 颜色通常用十六进制表示，例如#ff000
• 文本对齐，text-align
  • 控制文本的水平对齐方式
  • left是左对齐，center是居中对齐，right是右对齐
• 文本缩进，text-indent
  • 用于指定文本的第一行的缩进，通常是将 段落的首行缩进
  • 通常是以em为单位，缩进几个字，可以是负值
• 文本装饰，text-decoration
  • underline是下划线，none是取消修饰样式
• 文本行高，line-height
  • 控制行之行之间的距离
  • 当行高与元素高度相同时，文字会垂直居中

6，css样式表的引入方式

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

• style标签理论上可以放到HTML文档的任何地方，但一般会放在文档的head标签中
• 通过此种方式，可以方便控制当前整个页面的元素样式设置
• 代码结构清晰（因为样式和元素做到了分离），但是并没有实现结构与样式完全分离（因为style样式仍然在html文档内部）
• 可以控制一整个页面

行内式样式表
行内样式表（内联样式表）是 在元素标签内部的style属性中设定的CSS样式 。适合与修改简单样式
< div style="color: red; font-size: 24px;" > 今晚打老虎 < /div >
style=" key : value; key : value; "

• style其实就是标签的属性
• 在双引号中间，写法要符合CSS规范
• 书写繁琐，没有体现出结构与样式相分离的思想，不推荐大量使用
• 可以控制当前的标签设置样式

外链式样式表
实际开发中都是外部样式表。适用于样式比较多的情况。核心是：样式单独写成一份CSS文件，之后把CSS文件引入到HTML页面中使用。
< link rel="stylesheet" href="css文件路径" >

• 新建一个后缀名（格式）为.CSS的样式文件，把所有的CSS代码都放入此文件中
• 在HTML页面中，使用 < link > 标签引入这个文件
• rel属性，定义当前文档与被链接文档之间的关系，在这里rel指定为“stylesheet”（样式表），表示被链接引入的文档是一个样式表文件
• href属性，定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径
• 外部样式表的优点：实现了结构和样式完全分离，和样式共享（因为一个样式表可以同时被多个html引用）

7，Emmet语法简述

Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，Vs code内部已经集成该语法。

• div*n，快速生成n个div盒子
• ul>li，生成有父子关系的盒子
• div+p，生成有兄弟关系的盒子
• .lei或p#isid，生成具有类名或id的元素
• .zxf$*3，生成有顺序编号的元素
• .zxf{内容}，在生成的元素内部添加内容

这里只是简单介绍，感兴趣可以去专门查询

8，元素的显示模式

• 元素显示模式就是元素（标签）以什么方式进行显示，比如div是自己占一行，而一行可以放多个span
• HTML元素一般分为块元素和行内元素两种类型

块元素：

• 比较霸道，自己占一行
• 高度，宽度，外边距以及内边距都可以控制 （盒子可以给宽度和高度）
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或块级元素
• 注意：文字类的块元素（如p、h1）内不能使用块级元素

常见的块元素：
h1 ~ h6、p、div、 ul、 li 等，其中 div 标签是最典型的块元素

行内元素：

• 相邻行内元素在一行上，一行可以显示多个
• 高、宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

常见的行内元素：
a、strong、b、em、i、del、s、ins、u、span 等，其中 span 标签是最典型的块元素

行内块元素：
有些特殊的元素同时具有块元素和行内元素的特点，我们把它称作行内块元素。

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
• 默认宽度就是它本身的宽度（行内元素特点）
• 高度、宽度、外边距和内边距都可以控制（块元素特点）

常见的行内块元素：
input、img、td

元素显示模式转换：
display属性可以设置元素的显示模式

• display : block;，转换为块级元素
• display : inline;，转换为行内元素
• display : inline-block;，转换为行内块元素

9，css背景样式

通过css的背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等

9.1，背景颜色

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

• background-color: red;
• 属性值可以为十六进制的颜色、rgb颜色
• 背景色半透明：rgba(xx,xx,xx,.5)
  • 最后一个参数alpha，控制透明度，值在0~1之间
  • 小数点前面的0可以省略
• 当值为transparent时，代表背景颜色为透明色，不设置该属性时背景颜色也是透明色

9.2，背景图片

实际开发中常见于 logo 或者一些装饰性的小图片或者是超级大的背景图片。相比于图片标签直接插入标签，背景图片的优点是更便于控制位置（精灵图也是一种运用场景）

background-image 属性描述了元素的背景图像

• background-image: url(url路径)
• 背景图的路径要放在url()括号内
• 属性值为none时，代表没有背景图

9.3，背景平铺

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

background-repeat

• background-repeat: repeat/no-repeat/repeat-x/repeat-y
• repeat，横向 和 纵向 平铺（默认）
• no-repeat，背景图片不平铺
• repeat-x，只在横向平铺
• repeat-y，只在纵向平铺

9.4，背景图片位置（定位）

利用background-position属性可以改变图片在背景中的位置

background-position

• background-position : x y;
• background-position : top left;

参数：

• 参数代表的意思是：x坐标和y坐标。
• 参数值可以是方位名词或精确单位
• 精确单位： 百分数/由浮点数字和单位标识符组成的长度值
• 方位名词： top/center/bottom/left/center/right

如果参数是方位名词:

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

参数是精准单位:

• 参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
• 只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

参数是混合单位:

• 两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
• 混用时，第一个之一定要写x坐标的方位词或精准位置，否则定位会失效

9.5，背景图片固定（附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment

• background-attachment : scroll/fixed
• 属性值为scroll时，背景图片随着元素内容一起滚动
• 属性值为fixed时，背景图片固定

9.6，背景样式复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量

当使用简写属性时，没有特定的书写顺序，一般习惯顺序为：

• background：颜色 图片 平铺 滚动 坐标位置;
• background: #fff url（） repeat-y fixed top;

10，css的三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级

10.1，层叠性

相同选择器重复给同一个元素设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

• 层叠性的3个条件：元素相同、属性相同、优先级相同
• 样式冲突，遵循的原则是后来居上，后面的样式会覆盖前面的样式
• 样式不冲突，就不会层叠

10.2，继承性

现实中的继承：我们继承了父亲的姓
CSS中的继承：子标签会继承父标签的“某些”样式，如文本颜色和字号。简单理解就是：子承父业。

• 恰当的使用继承可以简化代码。降低CSS样式的复杂性
• 子元素可以继承父元素的样式
• 龙生龙，凤生凤，老鼠的儿子会打洞

10.3，优先级

css样式的优先级：

• 在选择器相同的情况下，由层叠性决定优先显示哪一个
• 在选择器不同的情况下，由选择器的权重决定优先显示哪一个
• 选择器权重越大越优先

选择器权重：

选择器	权重
继承性 或 *(通配符)	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，标签选择器权重=1，类选择器权重=10，ID选择器权重=100，行内样式表=1000，！important权重为=无穷大
• 继承的权重=0，如果该元素没有被选择器直接选中，不管父元素权重多高，子元素继承到的权重都是0
• 如果是复合选择器，则会有权重叠加，需要计算权重。
• 计算权重的时候，权重是不能进位的，比如，即便是由10个元素选择器组成的后代选择器，权重得出的10，任然要放在第四组的位置（0,0,0,10），也就是权重的四组数字不能在组与组之间进位，比较大小从左往右

11，盒模型

我们可以把HTML元素都看成一个盒子，由：边框、内边距、外边距、实际内容组成

11.1，边框

• border-width，设置边框大小，单位是px
• border-style，设置边框样式
  • solid为实线
  • dotted为圆点线
  • dashed为虚线
• border-color，设置边框颜色
• border-top/bottom/left/right可以设置单方向边框
• border：1px solid red;，边框简写

表格的细线边框
我们原本的表格边框比较粗一点，原因是每条边框线其实是两个单元格的边框线合并叠加到一起的，利用border-collapse可以让边框线变细

border-collapse : collapse;

• collapse单词是合并的意思
• 利用该属性，可以把两个相邻单元格的边框合并到一起

边框大小会额外增加盒子的实际大小，因为在界面显示中，边框会变成盒子的外描边部分。对此，我们有两种方案解决：

• 测量盒子大小的时候，不量边框
• 如果测量的时候包含了边框的大小，则需要width/height减去边框宽度

11.2，内边距

因为盒子里边的内容都是紧贴着盒子的边缘排列的，视觉上会显得很拥挤，所以我们利用padding来设置内容和盒子的间距

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

• padding-left，设置左内边距
• padding-right，设置右内边距
• padding-top，设置上内边距
• padding-bottom，设置下内边距

内边距简写：

• padding：
• 一个值，上下左右
• 两个值，上下 左右
• 三个值，上 左右 下
• 四个值，上 右 下 左，顺时针

设置内边距时：

• padding影响了盒子实际大小
• 如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
• 如果这个盒子没有设置宽度，则这时给它指定 padding值 ，不会撑开盒子

11.2，外边距

外边距： 主要用于控制盒子和盒子之间的距离，margin属性用于设置外边距。

• 外边距margin的上下左右 和 简写 和内边距一致。

11.3，盒子的水平居中

text-align

• text-align属性能控制文字水平对齐方式，还能控制行内元素和行内块元素水平对齐方式
• text-align：center; 文字、行内元素、行内块元素水平居中

margin : auto;

• 块级盒子水平居中，margin的左右值要改为auto，上下值不会影响水平居中效果

11.4，外边距塌陷

使用margin定义盒子的外边距时，垂直方向的块元素可能会出现外边距的合并

11.4-1，相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相邻时，如果上面的元素有margin-bottom（下外边距）
• 下面的元素又有margin-top（上外边距），这时，他们的垂直间距并不等于margin-bottom与margin-top之和
• 取两个值中的较大者为垂直间距这种现象被称为相邻块元素垂直外边距的合并
• 解决方法：
  • 只给上面的盒子添加下外间距，而不给下面的盒子添加上外边距。
  • 只给下面的盒子添加上外边距，而不给上面的盒子添加下外边距。
    

11.4-2，嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有“上内边距”或“上边框”
• 父元素的上外边距会和子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者
• 解决方法：
  • 可以为父元素定义上边框。
  • 可以为父元素定义上内边距。
  • 可以为父元素添加overflow：hidden;
  • 设置浮动、固定定位、绝对定位（非标准流盒子不存在外边距塌陷）
    

11.5，盒子的圆角属性

border-radius，用于设置盒子的圆角属性

• border-radius : 10px;
• 属性值为一个正整数的像素值
• 属性值大于等于元素半径时，盒子为圆形
• 属性值小于元素半径时，盒子为圆角
• border-radius：20px;，（同时为四个角设置圆角半径）
• border-top-left-radius：20px;，（为左上角设置圆角半径）
• border-top-right-radius：20px;，（为右上角设置圆角半径）
• border-bottom-right-radius：20px;，（为右下角设置圆角半径）
• border-bottom-left-radius：20px;，（为左下角设置圆角半径）
• border-radius : 上左px 上右px 下右px 下左px，顺时针，设置四个角的圆角
• 为单独一个角设置圆角时，属性名，先上下，后左右

11.6，盒子阴影

box-shadow，用于设置盒子的阴影效果

• box-shadow : 水平位置 垂直位置 模糊大小 阴影大小 阴影颜色 内外阴影
• 内外阴影：默认外阴影outset，insert为内阴影

12，浮动

网页布局的核心————就是 用CSS来摆放盒子
CSS提供了 3种机制 来设置盒子的摆放位置，分别是普通流（标准流）、浮动、和定位，其中：

• 1，普通流（标准流）
  • 块级元素会独占一行，从上向下按顺序排列
  • 常用块级元素：div 、hr、 p、h1~6、ul、ol、dl、form、table
  • 行内元素会按照顺序，从左到右排列顺序，碰到父元素边缘会自动换行；
  • 常用行内元素：span、a、i、em、b、strong、del、s、ins、u等
• 2，浮动
  • 让盒子从普通流中浮起来，主要作用让多个块级盒子在一行显示
• 3，定位
  • 将盒子定在浏览器某一个位置————CSS离不开定位，特别是后面的js特效

12.1，为什么需要浮动？

例如：
1，如果我们想要以下多个盒子（div）水平排列成一行

2，如果我们想要实现盒子的左右对齐

虽然我们以前学过使用“行内块”（inline-block），但是它却有自己的缺陷：

• 1，它可以实现多个块级元素一行显示，但是中间会有空白缝隙，不能实现无缝衔接
• 2，它不能实现以上第二个问题，盒子分别左（右）对齐

总结：因为一些网页布局要求，标准流不能满足我们的需求了，因此我们需要浮动来完成网页布局。

12.2，什么是浮动？

浮动的概念： 浮动是指设置了浮动属性的元素会

• 1，脱离标准普通流动的控制
• 2，移动到指定位置

浮动的作用：

• 1，让多个盒子（div）水平排列成一行，因此浮动成为布局的重要手段
• 2，可以实现盒子的左右对齐等等
• 3，浮动最早是用来控制图片，实现文字环绕图片的效果

语法：

float : left/right/none

• float : left;，左浮动
• float : right;，右浮动
• float : none;，不浮动

12.3，“浮，漏，特” 特性

浮：

• 浮，指定是漂浮在标准流的上面。
• 脱离了标准流，俗称脱标

漏：

• 漏，把自己原来的位置漏给下面标准流的盒子，就是不再占有原来的位置
• 可以理解为，原来的盒子脱离了标准流，它原来的位置就会空出来，它后面的盒子就会自动补上空缺的位置
• 脱标的元素不占位置

特：

• 特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙

注意：

• 浮动会使元素的margin : auto;居中属性失效
• 浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响
• 子级盒子的浮动参照父级盒子的内容区域对齐，不会与父盒子的边框或内边距重叠
• 浮动元素只会影响它后面的标准流元素，不会影响它前面的标准流元素

12.4，清除浮动

为什么要清除浮动？

• 因为父级盒子在很多情况下，不方便给高度，但是子盒子如果是浮动状态的话，就不占有位置，没有 内容撑开父级盒子的话，父级盒子高度就会为0，就会影响下面的标准流盒子

• 如果浮动元素也能像标准流元素一样能够撑开盒子 ，就会解决很多麻烦，而 清除浮动就是专门做这个的，它可以让浮动元素像标准流元素一样，达到撑开盒子的效果 ，让父级元素自动适应匹配出合适的高度

12.5，清除浮动的本质和方法

清除浮动的本质：

• 清除浮动主要是为了解决父级元素因为子级元素浮动而引起的父级高度为0的问题。
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

12.5.1，清除浮动的方法

clear属性清除浮动

• clear : left;，清除左侧浮动影响
• clear : right;，清除右侧浮动影响
• clear : both;，同时清除两侧的浮动影响
• 尽管clear属性有三种方式清除浮动，但我们通常使用clear : both;清除浮动

额外标签法清除浮动

• 额外标签法是W3C推荐的做法，是通过在最后一个浮动元素末尾（不能是它的父级或子级，必须是它本身的后面）添加一个空的标签元素。
• 在最后一个浮动元素后面添加一个空元素
• 给这个空元素添加clear : both;属性
• 优点：通俗易懂，简单易实现
• 缺点：添加了无意义的标签，结构化差

overflow属性清除浮动

• 给父级添加overflow属性，属性值为hidden、auto、scroll都可以清除浮动
• 优点：代码简洁
• 缺点：overflow属性有一定的局限性，当内容多到一定程度时，溢出的内容会被隐藏（hidden），或者是不受控制的出现滚动条（auto、scroll）

after伪元素清除浮动

• :after伪元素方式是空元素额外标签法的升级款，好处是不用再单独加标签了
• 优点：符合闭合浮动思想，结构简单（伪元素法不会影响到结构），语义化正确。
• 缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
• 代表网站：百度、淘宝网、网易等
• 本质上也是在浮动元素后面添加了一个有clear : both;属性的空元素，只不过这个空元素是用伪元素添加的

/* .clearfix是父元素选择器 */
.clearfix:after {
conter: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* （IE6、7专有） */
*zoom: 1; 
}

双伪元素清除浮动

• 伪元素就相当于在父元素里面再加一个盒子，.父元素：before，就是在父元素内部靠前位置加一个盒子，.父元素：after，就是在父元素内部靠后位置加一个盒子
• 因为本质上都是靠加盒子来清除浮动的，（隔墙法是靠结构里面直接加盒子，伪元素法是在CSS里面利用伪元素加盒子），但是伪元素加的盒子不会影响HTML结构，所以说伪元素法是隔墙法的升级版
• 优点：代码更简洁
• 缺点：缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
• 代表网站：小米、腾讯

/* .clearfix是父元素选择器 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

13，定位

前面说到，网页布局的核心就是 用CSS来摆放盒子位置。
CSS提供了 3种机制 来设置盒子的摆放位置，分别是普通流、浮动、定位。

13.1，为什么要使用定位？

将盒子定在某一个位置 自由的漂浮在其他盒子（包括标准流和浮动）的上面

例如，我们想让一个盒子固定在页面的某个位置，不会随界面滚动而更换位置。标准流和浮动都无法快速实现该效果。
所以，我们脑海应该有三种布局机制的上下顺序：

• 标准流在最底层（海底）
• 浮动的盒子在中间层（海面）
• 定位的盒子在最上层（天空）

13.2，定位介绍

定位也是用来布局的。它由两部分组成：
定位   =   定位模式   +   边偏移

13.2.1，边偏移

简单说，我们定位的盒子，是通过边偏移来移动位置的。
在CSS中，通过 top、bottom、left、right属性定义元素的边偏移：（方位名词）

• top，顶部偏移量，当前元素相对于父级元素上边缘的距离
• bottom，底部偏移量，当前元素相对于父级元素下边缘的距离
• left，左侧偏移量，当前元素相对于父级元素左侧边缘的距离
• right，右侧偏移量，当前元素相对于父级元素右侧边缘的距离
• 定位的盒子有了边偏移才有价值。一般情况下，凡是有定位的地方必定有边偏移

13.2.2，定位模式（position）

在CSS中，通过position属性定义元素的定位模式，语法如下：

• 选择器  {  position：  属性值;  }

position的属性值：

• static，静态定位
• relative，相对定位
• absolute，绝对定位
• fixed，固定定位

13.2.3，静态定位（了解）

• 静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。
• 静态定位按照标准流特性摆放位置，它没有边偏移
• 静态定位在布局时，因为是默认值，所以我们几乎不用的，但是我们要知道

13.2.4，相对定位（重要）

相对定位是元素相对于它原来在标准流的位置来说的。

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

13.2.5，绝对定位（重要）

决对定位是元素“以有定位的父级（可以是更上层级）元素的定位位置为参考系”，来移动位置（拼爹型）

• 完全脱标 ————完全不占位置
• 父元素没有定位，则以浏览器（左上角）为准定位
• 绝对定位，是以父级的定位坐标为参考系，来移动位置的（拼爹型），如果父级都没有定位，则以浏览器页面（根元素）为准移动位置
• 不保留原来的位置，完全脱标
• 因为绝对定位的盒子是拼爹的，所以通常要和父级搭配一起来使用

子绝父相：

• 父级要占有位置，子盒子要随意摆放且不占有位置，这就是子绝父相的由来

13.2.5，固对定位（重要）

固定定位是绝对定位的一种特殊形式： （认死理型）如果说绝对定位是一个矩形 那么 固定定位就类似于一个正方形（矩形的一种类型）

• 完全脱标————完全不占位置
• 只认浏览器的可视窗口————浏览器可视窗口 + 边偏移属性 来设置元素的位置
  • 跟父元素没有任何关系；单独使用的
  • 不随滚动条滚动。
• 注意：
  • 在使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度
  • 固定定位的应用场景：固定在浏览器可视窗口某个位置的布局
  • 绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中

13.2.6，浮动和定位的区别

• 行内元素添加绝对（position：absolute）或者固定定位（position：fixed），可以直接设置高度和宽度。

• 块级元素添加绝对（position：absolute）或者固定定位（position：fixed），如果不给高度或者宽度，默认大小是内容的大小。

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

• 浮动元素只会压住它下面标准流的盒子，但不会压住下面的标准流盒子里面的文字、图片（因为浮动最初发明是为了做文字环绕效果）；绝对定位（固定定位）会完全压住盒子。

13.3，绝对定位盒子的居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
在使用绝对定位时要想实现水平居中，可以按照下面的方法：

例如：水平居中

• left : 50%;，先让盒子位移父级元素的水平中心位置。
• margin-left : 负自身一半;，让盒子利用负外边距，向反方向移动自身一半

13.4，定位盒子的堆叠顺序

在使用 定位布局时，可能出现 盒子堆叠的情况
加了定位的盒子，默认 后来者居上 ，后面的盒子会压住前面的盒子

z-index属性，可以 调整盒子的堆叠顺序
z-index 的特性如下：

• 属性值：正整数、负整数、0，默认为0，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 注意：z-index 只能应用于 相对定位，绝对定位、固定定位的元素，其他的标准流、浮动、静态定位无效

13.5，定位可以改变display属性

display是显示模式，可以改变显示模式的几种方式有：

• 可以用inline-block 转换为行内块
• 可以用浮动float默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似，默认转换的特性————转换为行内块

所以说，一个行内的盒子，如果加了 浮动、固定定位、绝对定位，不用转换，就可以给这个盒子添加宽度和高度属性
浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。（所以我们以前是用padding、border、overflow解决的）

也就是说，我们给盒子加了浮动或定位，就不会有盒子垂直外边距合并的问题了

13.6，定位模式对比

14，元素的显示与隐藏

目的： 让一个元素在页面中消失或者显示出来
场景： 类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现，隐藏侧边栏等

14.1，display属性控制

display设置或检索对象是否如何显示

• display：none;，隐藏元素
• display：block;，除了转换为块元素外，还有显示元素的意思
• 特点：隐藏之后，不再保留位置

14.2，visibility可见性（了解）

visibility设置或检索是否显示对象

• visibility : visible; ，对象可视
• visibility : hidden;， 对象隐藏
• 特点：隐藏之后，继续保留位置（停职留薪）

14.3，overflow 溢出（重点）

overflow检索或设置当对象的内容超过其指定高度或宽度时，如何管理内容

• overflow : visible;，不剪切内容也不添加滚动条，让内容超出范围显示
• overflow : hidden;，不显示超出对象尺寸的内容，超出的部分隐藏掉
• overflow : scroll;，不管内容是否超出盒子尺寸，总是显示滚动条
• overflow : auto;，内容溢出时，自动显示滚动条，不超出时不显示滚动条

使用场景：

• 清除浮动
• 隐藏超出内容，隐藏掉（visibility：hidden;），不允许内容超出父盒子

14.4，显示与隐藏总结

15，用户界面样式

• 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验
• 更改用户的鼠标样式（ 滚动条因为兼容性非常差，我们不研究 ）
• 表单轮廓等
• 防止表单域拖拽

鼠标样式cursor

• cursor : default;，小白（默认样式）
• cursor : pointer;，小手（可点击）
• cursor : move;，移动（可拖拽）
• cursor : text;，文本（可选中、输入等）
• cursor : not-allowed，禁止

清除轮廓线outline

• 轮廓线是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用。
• input输入框获取到焦点时，就会有轮廓线。
• outline： outline-color outline-style outline-width
• 但是我们并不关心可以设置多少，因为我们平时都是把它去掉的
• 清除轮廓线最直接的方式是 outline:0; 或者 outline：none;

禁用文本域拖拽resize

• 默认的文本域是可以拖拽的，但是文本域拖拽后大小就会改变，从而影响到页面布局，我们可以利用resize属性禁用文本域的拖拽。
• resize : none;

16，行内（行内块）元素垂直对齐

vertical-align 垂直对齐，它只针对于 行内元素 或 行内块元素

• 设置或检索对象内容的垂直对齐方式
• vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素 或 行内块元素
• 特别是行内块元素，通常用来控制图片/表单与文字的对齐
  
  

16.1，去除图片底侧空白缝隙

图片或表单等行内块元素，它的底线会和父级盒子的基线对齐。也就是图片底侧会有一个空白间隙。
解决方法：

• 更改img vertical-align属性值，导致出现该问题的是默认的属性值baseline，
  把当前属性值改为vertical-align: middle | top | bottom等等，让图片不要和基线对齐
• 给img添加display: block; 因为图片下有间隙是行内块元素的vertical-align对齐属性（baseline属性值）导致的，而vertical-align属性只对行内块起作用，所以直接把img转换为块级元素，该属性直接失效，也就不存在问题了

17，文字溢出省略号显示

17.1，white-space（文字换行）

white-space设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容

white-space

• white-space: normal;，默认值，到达盒子边缘自动换行
• white-space: nowrap;，强制在同一行内显示所有文本，直到文本结束或者遭遇br标签才换行

17.2，text-overflow （文字溢出）

设置或检索是否使用一个省略标记（……）标识对象内文本的溢出

text-overflow

• text-overflow: clip;，不显示省略标记，而是简单地裁切掉
• text-overflow: ellipsis;，当对象内文本溢出时显示省略标记

17.3，文字溢出省略号显示步骤

• white-space ： nowrap;，首先强制一行内显示文本
• overflow ： hidden;，超出部分自动隐藏
• text-overflow ：ellipsis;，用省略号替代超出部分的文字
• 以上三步顺序不能乱，否则无效

18，精灵图技术

18.1，为什么需要精灵图？

此图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都需要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求，这将大大的降低页面的加载速度。

所以我们为什么需要精灵技术？

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

18.2，精灵图技术讲解

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中的不同位置的某个小图，通过精确定位得到精灵图中的某个小图。

这样，当用户访问该页面时，只需要向服务器发送一次请求，网页中的背景图像即可全部展示出来。

精灵图技术需要我们使用到CSS中的：

• background-image（背景图片）
• background-repeat（背景图片的平铺属性）
• background-position（背景图片的位置属性——用来定位）
• 其中最关键的是使用background-position 属性精确的定位

18.3，精灵技术使用的核心总结

CSS精灵技术主要针对背景图片，插入的图片img是不需要这个技术的

• 精确测量 ，每个小背景图片的大小和位置

• 给每个盒子指定小背景图片时， 背景定位基本都是负值

• 其实每个盒子都相当于一个孔洞，通过精准的背景图定位，把我们想要的图片，在这个孔洞中露出来

19，滑动门技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字数的导航栏。
让背景图片可以跟随字数自适应宽度，如让宽窄不同的按钮能使用同一个背景图
方法：

• 首先用一个盒子嵌套一个盒子
• 外层盒子控制左侧背景图，并使用padding-left控制左侧字体首行缩进
• 内层盒子控制右侧背景图，并使用padding-right控制右侧字体边缘间距
• 内容写在内部盒子里面
• 这样当文字内容数量变化时，左侧固定，内部盒子就会带着右侧背景图片移动，从而达到推拉门的效果

20，css画三角形

• CSS三角形使用边框做的

• 建立一个盒子，宽高为0

• 四个边框，设置相同大小，保留一条边作为三角形，另外三个边框透明色transparent

• 为了照顾兼容性，低版本的浏览器，加上 font-size: 0; line-height: 0;

div{
 	width: 0;
	height: 0;
    border: 20px solid transparent;
    border-bottom: 20px solid #000;
}

21，元素垂直水平居中

21.1，已知宽高水平垂直居中

已知盒子的宽高的情况下，我们可以通过定位（子绝父相）+外边距 的方法来实现盒子水平垂直居中

/* 子绝父相，子元素利用top：50%，left：50%，位移父元素50%，再利用 负外边距 位移自身50% */
		.box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: rgb(181, 240, 255);
        }

        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background: pink;
        }

21.2，未知宽高垂直水平居中

不知道子盒子的宽高（只知道宽或高）的情况下，我们可以通过定位（子绝父相），然后子元素边偏移left，right，top,bottom都为0，然后给一个margin：auto属性，让它自动居中

/* 子绝父相，子元素利用top、bottom、left、right均设置为0，然后margin：auto；就可以垂直水平居中 */
		.box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: rgb(181, 240, 255);
        }
        .content2 {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 220px;
            height: 220px;
            background: pink;
        }

22，BFC机制

22.1，什么是BFC？

• 块级格式化上下文
• 它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
• 具有BFC特性的元素可以看作是隔离了独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
• 具有BFC特性的盒子，就像一个独立的区域，不受外界元素影响，内部元素也不会影响到外面的元素

22.2，BFC特性

• 内部的Box会在垂直方向,一个接一个地放置（和外面块级盒子一样，独占一行）
• 在BFC垂直方向的边距会发生重叠（和外面的盒子一样，垂直外边距合并）
• BFC的区域不会与float区域的box重叠（外面的浮动元素可以浮到外面的标准流元素上层，但是不可以浮到BFC元素的上层）
• BFC是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
  计算BFC盒子高度的时候,浮动元素也会参与计算（可以理解为，即使BFC盒子里面的块级元素浮动了，也仍然会撑开父级的高度）

22.3，BFC的触发机制

• 浮动元素，float属性除none以外的值
• 定位元素，position（absolute，fixed），绝对、固定定位
• display 为以下其中之一的值 inline-block，table-cell，table-caption
• overflow 除了 visible 以外的值（hidden，auto，scroll）

23，字体图标iconfont

字体图标的优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等… 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、字体大小等等… 本身体积更小，但携带的信息并没有削减。 几乎支持所有的浏览器 移动端设备必备良药…
使用步骤：

• 登录阿里巴巴字体网站
• 选择字体，添加至购物车
• 选择完成后，购物车中已选择的字体添加至项目，然后找到我的项目，选择将该项目的字体下载至本地
• 下载下来的文件夹为一个压缩包，将解压的文件放到HTML文件的附近路径，然后给HTML文件引入解压文件中的css文件，这样字体就算引入成功了
• 给需要使用图标字体的标签，利用font-family给该标签指定该字体就行了
• 追加字体时，在网站上找到需要追加的字体，追加到以前的项目中，然后下载该项目到本地，用该解压文件替换以前的解压文件就可以了

/* 引入字体图标的字体css样式 */
    
    

24，多媒体 音频、视频标签

音频标签audio 和 视频标签video 属于是H5新增元素（都是双标签）

音频标签audio的属性

• autoplay属性，值为autoplay，音频在就绪后马上自动播放
• controls属性，值为controls，向用户显示控件，如播放暂停按钮
• loop属性，值为loop，当音频播放结束时重新开始播放
• src属性，值为音频url，要播放的音频的url路径地址

视频标签video的属性

• autoplay属性，值为autoplay，视频在就绪后马上自动播放，谷歌浏览器需要添加muted来解决自动播放问题
• controls属性，值为controls，向用户显示控件，如播放暂停按钮
• loop属性，值为loop，当音频播放结束时重新开始播放
• src属性，值为音频url，要播放的音频的url路径地址
• width属性，值为px值，设置播放器宽度
• height属性，值为px值，设置播放器高度
• preload属性，值为auto则预加载视频，值为none不预加载视频，有了autoplay就忽略该属性
• poster属性，视频封面的url，设置加载等待时的封面
• muted属性，值为muted，静音播放

source单标签的使用
不同浏览器支持的audio（音频）文件和video（视频）文件的格式不同，为了解决兼容问题，我们可能会将一个多媒体文件做成多种格式同时上传

<audio controls loop autoplay="autoplay">

	<source src="./张敬尧 - 逍遥叹.mp3" type="audio/ogg">

	<source src="./张敬尧 - 逍遥叹.ogg" type="audio/mp3">

	<source src="通过路径选择文件" type="文件类型（音频或视频）/文件格式">

audio>

25，新增表单控件

H5新增的一些表单控件类型
通过input元素的不同type值，展现出不同的表单控件

input元素新增的type类型有：

• email，限制用户输入必须为email类型
• url，限制用户输入必须为网址url类型
• date，限制用户输入必须为日期类型
• time，限制用户输入必须为时间类型
• month，限制用户输入必须为月类型
• week，限制用户输入必须为周类型
• number，限制用户输入必须为数字类型，同时可以设置max最大值属性、min最小值属性、step箭头每次增加或减少
• tel，手机号码
• search，搜索框
• color，颜色，生成一个颜色选择表单

H5新增的表单交互属性

• required，属性值required，表示该表单内容不能为空，必填
• placeholder，占位符，表单的提示信息，存在默认值后不再显示
• autofocus，属性值autofocus，自动聚焦属性，页面加载完成后自动聚焦到指定表单
• multiple，属性值multitle，可以多选文件提交

26，动画过渡效果

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。

• 过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
• 我们现在经常和 :hover 一起 搭配使用。
• 注意： 该属性是 写在初始状态的样式中

语法：
简写：

• transition：过渡属性（width、height、背景颜色、内外边距等）过渡时间 速度曲线 开始时间;
• transition：all 2s ease 1s;
• transition：transition-property transition-duration transition-timing-function transition-delay;

属性：

• transition：简写属性
• transition-property：需要过渡的css属性的名称，all代表所有属性
• transition-duration：过渡效果花费的时长，默认是0s
• transition-timing-function：过渡效果的时间曲线（速度曲线），默认是ease。
• transition-delay：规定过渡效果何时开始（延迟时间），默认是0s

/* 从粉色方块，过渡为一个有背景的大方块 */
		.anli {
            width: 300px;
            height: 300px;
            background-color: pink;
            transition: all 1s;
        }

        .anli:hover {
            margin-bottom: 200px;
            width: 500px;
            height: 500px;
            background: repeating-conic-gradient(rgb(255, 158, 182)0%, rgb(255, 226, 158)8%, rgb(205, 255, 158)16%, rgb(158, 228, 255)24%, rgb(239, 158, 255)32%);
            background-image: url(../头像.jpg);
        }

27，HTML5新增结构语义化标签

在以往，我们使用的块级盒子大多为div盒子，但是div盒子是没有语义的，就是一个普通的盒子，为了让html的结构更加清晰，更加具有语义化，HTML5为我们新增了一些具有结构语义的标签。

新增结构语义化标签：

• header，头部标签
• nav，导航标签
• main，主体标签
• article，内容标签
• section，块级标签
• aside，侧边栏标签
• footer，尾部标签
  

注意：

• 这些标签都是双标签，且都是块级元素
• 这种语义化标签主要是针对搜索引擎的，它能让搜索引擎更好的识别网页的结构
• 这些新标签在页面中可以使用多次
• 在IE9（及IE9以下的低版本中）中，需要把这些元素转换为块级元素
• 这些标签因为在PC端中存在兼容问题，所以我们更喜欢在移动端中使用这些标签
• HTML5还增加了很多标签，以后会慢慢接触

28，css之2D移转换 transform

28.1，2D转换——移动

2D移动是2D转换里面的一种功能，可以 改变元素在页面中的位置 ，类似于定位

语法：

• 简写： transform : translate(x，y);
• x轴移动： transform : translateX（x）;
• y轴移动： transform : translateY（y）;

注意：

• 定义2D转换中的移动，沿着X轴和Y轴移动元素
• translate最大的优点：不会影响到其他元素的位置（不会挤占其他元素的位置）
• 位移距离单位可以是px，可以是百分比%
• translate中的位移百分比单位是相对于自身元素的translate：（50%，50%）
• translate对行内元素没有效果
• translate总写时，X轴和Y轴的值之间用逗号隔开

28.2，2D转换——旋转

2D旋转指的是让元素在2维平面内顺时针或逆时针旋转

语法：

• transform : rotate（度数deg）;

注意：

• rotate里面写度数，度数的单位为deg，比如rotate（45deg），顺时针旋转45度
• 角度为正数时，顺时针旋转，角度为负数时，逆时针旋转
• 默认旋转的轴心为元素的中心
• 给行内元素添加2D转换属性时，要先转换为块级元素

设置中心点transform-origin
上面说到，元素旋转的轴心默认为元素的中心点，但是我们可以设置元素旋转的中心点

• transform-origin：x y;

注意：

• 转换中心点的属性设置给元素自身
• 参数x和参数y用空格隔开
• x和y默认转换的中心点是元素的中心点（50% 50%）
• x和y的值可以使用精确值px，也可以使用方位名词（top 、 bottom 、 left 、 right ）
• 只写一个方位名词时，另外一个方位词默认是center

28.3，2D转换——缩放

缩放、顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法：

• transform : scale（x，y）

注意：

• 注意其中的x和y之间用逗号隔开
• transform:scale（1,1）;宽和高都放大了一倍，相当于没有放大
• transform:scale（2,2）;宽和高都放大了2倍
• transform:scale （2）;只写一个参数时，第二个参数和第一个参数一样，相当于scale（2,2）
• transform:scale （0.5,0.5）;缩小为原来的0.5倍
• scale缩放与修改 width/height 相比较，最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
• 通过普通方式改变盒子大小，会对周围的盒子布局造成影响，而通过transform: scale（x,y）;改变盒子的大小，并不会对布局造成影响

28.4，2D转换——复合写法

transform : translate(x，y) rotate( deg ) scale(nx，ny)

• 2D转换时，3个属性值的顺序会影响旋转的效果（先旋转会改变坐标轴方向）
• 复合写法时，有位移要把位移属性放到最前面

29，动画 animation

**动画（animation）**是css3中具有颠覆性的特征之一，可通过设置多个节点来精准控制一个或一组动画，常用来实现复杂的动画效果

相比较过渡（transition），动画可以实现更多变化，更多控制，连续自动播放等效果

29.1，动画的基本使用

动画的基本使用分为两部

• 定义动画（名称和属性样式）
• 给需要动画的元素调用动画
  29.1-1，定义动画样式

@keyframes 动画名称{ }

• @keyframes 关键字用来定义动画
• 动画内部，使用 百分比% { } 来定义动画的不同阶段

@keyframes 动画名称 {
     /* 开始状态 */
  0% { 开始状态时的属性样式 }
     /* 结束状态 */
  100% { 结束状态时的属性样式 }
}

29.1-2，使用动画

animation

• 定义好动画后
• 在需要使用动画的元素样式中，通过animation关键字调用动画

div {
     /* 调用动画 */
  animation-name:动画名称 ;
     /* 持续时间 */
  animation-duration:持续时间;
}

29.2，动画序列

• 0%是动画的 开始 ，100%是动画的 完成 。这样的规则就是动画序列
• 在 @keyframes中规定某项CSS样式，就能创建由当前样式逐渐改变为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式 、任意多的次数
• 请用百分比来规定变化发生的时间，或用关键词“ from ”和“ to ”，等同于 0% 和 100%

29.3，动画常见属性

29.4，速度曲线

29.5，动画简写

• animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 结束状态 ;
• animation：name duration timing-function delay iteration-count direction fill-mode;
• 注意：简写属性里面不包括animation-play-state
• 暂停动画：animation-play-state：paused；（鼠标放上去是，暂停播放）。经常与：hover配合使用。
• 想要动画走回来（倒放），而不是直接跳回来：animation-direction：alternate；
• 盒子动画结束后，停留在结束位置：animation-fill-mode：forwards

29.6，为一个元素同时引入多个动画

一个元素是可以同时引入多个动画的，但是要写在一个animation里面，因为如果写多个animation会因为层叠性把前面的animation覆盖掉。

语法：

• animation：name duration timing-function delay iteration-count direction fill-mode , name duration timing-function delay iteration-count direction fill-mode;
• animation：动画1 , 动画2；
• 为一个元素同时定义多个动画，多个动画之间用逗号隔开

30，3D转换

30.1，认识3D坐标系

30.1-1，3D的特点

• 近大远小
• 物体和平面被遮挡后不可见

30.1-2，3维坐标系

• x轴：水平向右。注意 【 x轴右边为正值，左边是负值 】
• y轴：垂直向下。注意 【 y轴下面是正值，上面是负值 】
• z轴：垂直屏幕。注意 【 向外是正值，向内是负值 】
  

30.2，3D转换

30.2-1，3D转换知识要点

• 3D位移 ： translate3d（x,y,z）
• 3D旋转 ： rotate3d（x,y,z）
• 透视 ： perspective
• 3D呈现 ： transform-style

30.2-2，3D移动 translate3d

• 3D移动就是在2D移动的基础上多加了一个可以移动的方向，也就是Z轴方向
• transform：translateX（100px）【仅仅是在x轴上移动】
• transform：translateY（100px）【仅仅是在y轴上移动】
• transform：translateZ（100px）【仅仅是在z轴上移动】
• 简写方式1：transform：translateX（100px） translateY（100px） translateZ（100px）;
• 简写方式2：transform：translate3d（x,y,z）;其中x,y,z分别指要在移动的轴上移动的距离
• 注意：x,y,z对应的值不能省略，不需要填写时要用0填充，不能为空

30.2-3，3D移动语法

transform : translate3d( x，y，z )

30.3，透视 perspective

在2D平面产生近大远小视觉立体，但是效果只是2维的

• 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
• 模拟人类的视觉位置，可以理解为一只眼睛去看
• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑屏幕成像就越大，越远成像越小（电脑如同一间屋子，屏幕就是窗户，屋里的物体离窗户越近，你在外面看它就越大，越清楚）
• 透视的单位是像素

注意：透视写在被观察元素的父盒子上面

如下图：d就是视距，视距就是眼睛到屏幕的距离
z就是z轴，物体距离屏幕的距离，z轴越大（正值），也就离我们的眼睛越近，我们看到的物体就越大

30.4，translateZ（Z轴移动）和 perspective（透视）和区别

• perspective设置给父盒子，translateZ给子元素进行设置

• Z轴越大，物体越大，透视越大，物体越小

30.5，3D旋转（rotate3d）

3D旋转可以让元素在三维空间沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：

• transform:rotateX（45deg）：沿着x轴正方向旋转45度
• transform:rotateY（45deg）：沿着y轴正方向旋转45度
• transform:rotateZ（45deg）：沿着z轴正方向旋转45度
• transform:rotate3d（x，y，z，45deg）：沿着自定义轴正方向旋转45度（不转的为零，转的写一个数值）

30.6，3D呈现（ transform-style ）

• 3D呈现用来控制子元素是否开启三维立体环境
• transform-style：flat，子元素不开启3D立体空间（默认的）
• transform-style:preserve-3d；子元素开启立体空间
• 该属性设置给父盒子，但是影响的是子盒子
• 这个属性很重要，后面会经常用到

31，浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加

私有前缀：

• -moz-：代表firefox（火狐）浏览器私有属性
• -ms-：代表IE浏览器私有属性
• -webkit-：代表Safari（苹果）、Chrome（谷歌）浏览器私有属性
• -o-：代表Opera（欧朋）浏览器私有属性

提倡写法：

• -moz-border-radius:10px;
• -webkit-border-radius:10px;
• -o-border-radius:10px;
• -ms-border-radius:10px;

32，背景大小和多背景图

背景大小：

• background-size：宽高像素px;，精准像素控制背景图大小
• background-size：百分比%;，暗元素大小百分比控制背景图大小
• background-size：cover;，短边填满元素
• background-size：contain;，长边填满元素

多背景图片简写：

• background : url( 路径 ) no-repeat left top，url( 路径 ) no-repeat right bottom;
• background : 背景1，背景2;
• 为元素设置多个背景图片时，用逗号将两组背景属性隔开即可

33，css渐变

在CSS中，CSS的渐变相当于图像，我们可以使用：

background属性的一些属性值来定义渐变

• linear-gradient（角度deg，色1进度1%，色2进度2%），线性渐变
• repeating-linear-gradient（角度deg，色1进度1%，色2进度2%），把最大渐变长度作为周期，自动循环，重复渐变
• radial-gradient（），径向渐变
• repeating-radial-gradient（），把最大半径作为周期，自动循环，重复渐变
• conic-gradient（），锥形渐变
• repeating-conic-gradient（），以最大角度作为周期，自动循环，重复渐变

背景渐变前面可以写渐变区域的大小，和该区域的定位

语法：

• background：radial-gradient（大小px at x坐标 y坐标 ，颜色1号0%，颜色二号100% ）

	.box {
	/* 定义一个径向渐变，渐变大小为100px，并定位渐变位置为 距离左上角 100px 100px */
        background: radial-gradient(
            100px at 100px 100px,
            rgb(255, 162, 162) 0%,
            rgb(147, 224, 255) 50%,
            rgb(194, 141, 255) 100%
          )
          no-repeat;
        width: 300px;
        height: 300px;
        margin: 10px;
      }

	.box {
	/* 定义一个线性渐变，倾斜度45度，到元素百分之10位置为一个周期，并向后循环渐变 */
        background: repeating-linear-gradient(
          45deg,
          rgb(255, 162, 162) 0%,
          rgb(147, 224, 255) 5%,
          rgb(194, 141, 255) 10%
        );
      }

34，flex弹性盒子

flex为新的布局模式，灵活布局，旨在布置更复杂的应用程序和网页。
Flex 布局的全称为 CSS Flexible Box Layout Module，是 W3C 提出的一种新型页面布局方案，第一个版本于 2009 年推出，到现在为止，W3C 一共发布了 13 个版本，最新版本于 20181119 推出，用于以Web应用程序和复杂网页通常需要的方式分配空间和对齐内容。

• 采用flex布局的元素称为flex容器，它的所有子元素自动成为容器成员，称为flex项目flex item
• 通过给父级添加flex属性，来控制子元素的位置和排列方式

弹性布局常见的属性：

设置主轴方向 flex-direction

• row，主轴方向从左向右（默认）
• row-reverse，主轴方向 从右向左
• column，主轴方向 从上向下
• column-reverse，主轴方向 从下向上

主轴子元素排列方式（对齐方式）justify-content

• flex-start，从头开始排列（头部对齐）（默认）
• flex-end，从尾部开始排列（尾部对齐）
• center，居中对齐
• space-around，平分剩余空间
• space-between，两端对齐，再平剩余空间

侧轴子元素排列方式（单行）align-items

• flex-start，从头部开始（头部对齐）
• flex-end，从尾部开始（尾部对齐）
• center，居中显示
• stretch，拉伸（无高度时，高度拉满；有高度时，拉伸不显示）（默认）

侧轴子元素排列方式（多行）align-content
当有多行（列）元素时，行（列）与行（列）之间的对齐排列方式

• flex-start，从头部开始（头部对齐）
• flex-end，从尾部开始（尾部对齐）
• center，居中显示
• space-around，平分空间
• space-between，首尾的两行/列 靠两端对齐，中间的行/列 平分剩余空间
• stretch，拉伸（无高度时，高度拉满；有高度时，拉伸不显示）（默认）

是否换行 flex-wrap

• wrap，换行
• nowrap，不换行

复合属性 flex-flow
flex-flow是flex-direction（主轴方向）和flex-wrap（换行）属性的复合属性

• flex-flow： row wrap ;

以上属性皆是加给父盒子的，下面是加给子元素的属性

• flex
  • 值为数字或百分比
  • 定义子项目分配剩余空间
  • 当子元素在一行或一列内可以装下时，可以用数字作为值（比如每个子元素的值都为1，平分剩余空间）
  • 当子元素在一行内装不下时，可以用百分比，这个百分比是相对于父级的（比如宽一百的盒子，一行放5个盒子，并且要放置多行，则每个盒子的flex值为20%即可）
• align-self
  • 子元素在侧轴上的排列方式属性
  • 单独设置该项目自己在侧轴上的排列方式
  • 可覆盖父元素设置的侧轴子元素排列方式
  • 默认值auto，表示继承父元素的align-items，如果没有父元素则等同于stretch
• order
  • 数字，默认值为0
  • 数字越小，在当前轴上，顺序越靠前

35，怪异盒子

盒子模型的组成部分：width + height( content内容 ) + padding + border

• 我们常见的盒模型可以分为标准盒模型 和 怪异盒模型
• 由 box-sizing 属性控制盒模型模式

标准盒模型：

• 标准盒模型：实际大小 = width + height（content内容）+ padding + border;
• 盒子属性：box-sizing : content-box;
• 内边距+实际大小+内边距 的总和变大的话会撑大盒子,向外扩张

怪异盒模型：

• 怪异盒模型：实际大小= width + height（content内容 + padding内边距+ border 边框）;
• 盒子属性：box-sizing : border-box；
• 盒子的大小是一定的，不会变,（内边距+实际大小+内边距）的总和变大，就会向内部压缩

36，透明属性 opacity

opacity 属性可以设置元素的透明度，并且元素内容和背景都会受到opacity透明度属性的影响

语法：

• opacity : 0~1;
• 属性值为0到1

div { 
/* 50%透明度 */
	opacity:.5; 
}

37，字体渐变

通过以下三个属性控制字体的渐变样式：

• background-image: linear-gradient(to right, rbg(0,0,0)0%, rgb(22,22,22)100%);，渐变属性
• -webkit-background-clip : text;，剪切文字背景
• color : transparent;，将文字颜色设置为透明色
• 以上三个属性不分顺序

.se {
       /* 为元素设置 字体渐变样式 */    
        background-image: repeating-linear-gradient(
          to right,
          rgb(255, 196, 206) 0%,
          rgb(255, 76, 151) 25%,
          rgb(80, 255, 255) 50%
        );
        -webkit-background-clip: text;
		color: transparent;
      }

38，css数值运算 calc( )

calc()从字面看我们可以把它理解为一个function函数，calc是calculate单词（计算）的缩写，是CSS3新增的一个功能，可以用来计算指定元素的长度，动态计算长度值

加减乘除运算符：

• 例如：width : calc（100% / 9）
• 注意：加减乘除运算符+、-、*、/的两侧要用空格隔开，+-加减不用空格会报错，*/乘除不会报错，但是也建议用空格隔开
• 切记：运算符两侧用空格隔开

不同单位的数值运算：

• 例如：width : calc（10% + 30px）

calc( ) 可以嵌套使用：

• 例如：width : calc（10% + calc(100px * 2) ）