一、CSS的基本语法及选择器
1.常用选择器：通过选择器可以选择页面中的指定元素
- 元素选择器 p{ } h{ } div{ }
-
id选择器：作用：根据元素的id属性值选中一个元素
语法：#id属性值
-
类选择器: 作用：根据元素的class属性选中一组元素
与id相似，但class可以重复使用
语法： .class属性值
- 通配选择器的作用：选中页面中的所有元素
2.复合选择器
-
交集选择器：语法：选择器1选择器2
注意点：如果有元素选择器，要用元素选择器开头
-
并集选择器：语法：选择器1，选择器2
3.关系选择器
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接包含后代元素的元素
- 后代元素：直接或间接被祖先元素包含的元素
- 兄弟元素：拥有相同父元素的元素是兄弟元素
子元素选择器：语法：父元素>子元素
后代元素选择器： 语法：祖先 后代
兄弟元素选择器：前一个+后一个
4.属性选择器
5.伪类选择器
6.first-child和nth-child选择器的使用
- first-child选择器：选择父元素的第一个子元素
- nth-child选择器:nth-child(n)---选择父元素的第n个子元素；nth-child（odd）---选择父元素的第奇数个子元素；nth-child(even)---选择父元素的第偶数个子元素；nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个);nth-last-child(n)：选择倒数第 n 个元素； nth-last-child(n+n)：选择倒数第 n 个之前的元素。
//选择列表的第二个标签设置其背景色为红色
li:nth-child(2){
background-color: red;
}
//选择倒数第2个li
li:nth-last-child(2){
background-color: red;
}
//前三行背景色设置为绿色
li:nth-child(-n+3){
background: green;
}
//第五行及以后的背景色设置为绿色
li:nth-child(n+5){
background: green;
}
//倒数第三行字体设置为红色
li:nth-last-child(3){
color: red;
}
//倒数第三个及之前的元素字体设置为绿色
li:nth-last-child(n+3){
color:green;
}
二、超链接的伪类
1. :link
用来表示没有访问过的链接
2. :visited
用来表示访问过的链接；由于隐私原因，visit这个伪类只能修改颜色状态
3. :hover
用来表示鼠标移入的状态
4. :active
用来表示鼠标点击时的状态
5.正确的使用顺序：
a:link、a:visited、a:hover、a:active .
PS:
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面！
三、伪元素
1.伪元素表示页面中一些并不真实的存在的元素
2. ::first-letter
表示第一个字母
3. ::first-line
表示第一行
4. ::selection
表示选中的内容
5. ::before ::after
::before表示元素的开始， ::after 表示元素的最后（befor与after必须结合content属性来使用）
四、继承(发生在祖先与后代之间)
1.样式的继承：
为一个元素设置的样式同时也会应用到它的后代元素上
2.继承的好处：
利用继承可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要一次即可让所有的元素都具备该样式，方便开发。
3.并不是所有的样式都会被继承，比如与背景或布局等相关的样式都不会被继承
ps:图中p元素指定span的背景也呈现橙色是因为：默认情况下背景颜色是透明的，而p元素背景的橙色“透了出来”，使得p中的span背景也呈现橙色
五、选择器的权重
1.权重排序：
内联样式(1000)>id选择器(100)>类和伪类选择器(10)>元素选择器(1)>通配选择器(0)>继承的样式(没有优先级)
2.比较优先级时，需要将选择器的优先级进行相加计算，最后优先级越高则越优先显示
3.需要注意的是：选择器的累加不会超过其最大的数量级，如类选择器再高也不会超过id选择器
4.如果优先级计算后相同，此时则优先使用靠下的样式
5.可以在样式的后边添加!important,则此时该样式会获取到最高的优先级，甚至超过内联样式(在开发中要慎用)
六、像素和百分比
1.不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
2.百分比：
可以将属性值设置为相对于其父元素属性的百分比，这样子元素会随着父元素的变化而变化
3.em:
em是相当于元素的字体大小来计算的，1em=1font-size,em会根据字体大小的改变而改变
4.rem:
rem是相对于根元素的大小来计算的
七、RGB
1.RGB通过三种颜色(red,green,blue)的不同浓度来调配出不同的颜色,每一种颜色的范围在0-255(0%-100%)之间
2.RGBA：
在RGB的基础上添加了一个a表示不透明度(1表示完全不透明，0表示完全透明， .5表示半透明)
ps:透明度也可以通过opacity来设置，0表示完全透明，1表示完全不透明
//如豆沙绿
background-color:rgba(106,153,85,.5)
八、HSL值,HSLA值
H 表示色相(0-360)，S 表示饱和度(0%-100%)，L 表示亮度(0%-100%)
HSL(0,100%,50%)
九、文档流
1.网页是一个多层的结构，一层摞着一层，通过CSS可以分别为每一层设置样式
2.作为用户，只能看到网页最顶上一层
3.这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认在文档流中进行排序
4.元素有两个状态：在/不在文档流中
5.元素在文档流中的特点：
（1）块元素：
- 在页面中独占一行
- 默认宽度是父元素的全部（会把父元素撑满），默认高度是被内容撑开（子元素）
- 无论宽度是多少，块元素都独占一行
（2）行内元素：
- 在页面中不会独占一行
- 行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列
- 行内元素的默认宽度和高度是被内容撑开的
十、盒子模型
1.概念：
CSS将页面中的所有元素都设置为了一个矩形的盒子，每个盒子都由以下几个部分构成：内容区(content)，内边距(padding)，边框(border)，外边距(margin)
2.内容区(content)
- 元素中的所有子元素和文本内容都在内容区中排列
- width,height分别设置内容区的宽度和高度(!!!不是整个盒子的大小)
3.边框(border)
(1)概念：
边框属于盒子边缘，边框里边属于盒子内部，外边属于盒子外部
(2)要设置边框，至少需要3个样式：
- 边框的宽度：border-width
- 边框的颜色：border-color
- 边框的样式：border-style
(3)border-width:可以用来指定四个方向的边框宽度（默认值是2-3个像素）
//分别代表“上右下左”四个方向的边框宽度
border-width:10px 20px 30px 40px
- border-width的值(border-color 同理)：
四个值：上 右 下 左（顺时针）
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
- 此外，也可以用border-top-width,border-left-width,border-right-width,border-bottom-width来单独指定某 一个边的宽度
(4)border-style:
- solid 表示实线
- dotted 表示点状虚线
- dashed 表示虚线
- double 表示双线
(5)可以直接用border简写属性，通过此属性可以设置边框所有的相关样式，并且没有顺序要求
border: solid 10px orange
4.内边距(padding)
(1)概念：内容区与边框之间的距离叫做内边距
(2)内边距的设置会影响到盒子的大小，盒子的大小由内边距、边框和内容区共同决定
(3)可以用padding-top、padding-right、padding-left、padding-bottom设置四个方向的内边距，也可用padding同时指定四个方向的属性，规则与border-width一样
5.外边距(margin)
(1)外边距不会影响可见框的大小，但会影响盒子的位置和盒子实际占用空间的大小
(2)可以用margin-top、margin-right、margin-left、margin-bottom设置四个方向的内边距，也可用margin同时指定四个方向的属性，规则与border-width一样
(3)默认情况下，设置左和上边距会移动元素自身，设置下和右边距会移动其他元素
(4)外边距可以是正值，也可以是负值
6.水平方向的布局
(1)元素在其父元素中水平方向的位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right共同决定
(2)一个元素在其父元素中，必须满足margin-left、border-left、padding-left、width、padding-right、border-right、margin-right的和等于其父元素内容区的宽度。如果不相等，则称为过度约束，等式会自动调整。
- 如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
(3)上述七个值中有三个的值可以设置为auto，分别是width、margin-left、margin-right：
- 如果某个值为auto,则会自动调整auto的值以使等式成立
- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
- 如果将三个值都设为auto，则外边距都是0，宽度最大
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值(经常使用这一特点使一个元素在其父元素中水平居中)
7.垂直方向的布局
(1)子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则会溢出
(2)可以用overflow属性处理溢出的情况，overflow属性是在父元素中设置的
(3)可选值：
- visible:默认值 子元素会从父元素中溢出，在父元素外部的位置显示
- hidden：溢出部分将被裁剪而不会显示
- scroll：生成两个滚动条，可以通过滚动条查看内容
- auto：根据需要生成滚动条
8.外边距的折叠
(1)相邻的垂直方向外边距会发生重叠现象
(2)兄弟元素间的相邻垂直外边距会取两者之间的较大值（两个值都是正值情况下）
- 如果一正一负，则取两者的和
- 如果都是负值，则取两者中绝对值大的
(3)兄弟元素之间的外边距的重叠，对于开发是有利的，不需要进行处理
(4)父子元素间相邻外边距，子元素的会传递给父元素
(5)父子元素外边距的重叠会影响到页面的布局，必须进行处理
9.行内元素的盒模型
(1)行内元素不支持设置宽度和高度
(2)行内元素可以设置padding、border、margin，但垂直方向的设置不会改变布局
(3)display属性用来设置元素显示的类型，可选值有：
- inline:将元素设置为行内元素
- block:将元素设置为块元素
- inline-block:将元素设置为行内块元素（既可以设置宽高又不会独占一行）
- none:元素不在页面中显示
(4)visibility属性用来设置元素的显示状态，可选值有：
- visible：默认值，元素在页面中正常显示
- hidden：元素在页面中隐藏不显示，但是依然占据页面的位置（与display的none区分）
十一、浏览器的默认样式
//出去无序列表间的间距和项目符号
ul{
margin:0;
padding:0;
list-style:none;
}
//去除p默认的上左外边距
body{
margin:0；
}
//去除段落间的间距
p{
margin:0;
}
//将所有的margin和padding的值都设置为0
*{
margin:0;
padding:0;
}
十二、盒子的大小
box-sizing用来设置盒子尺寸的计算方式，可选值有：
- content-box：默认值，宽度和高度用来设置内容区的大小
- border-box：宽度和高度用来设置整个盒子的大小(即width和height指的是内容区、内边距和边框的总大小)
十三、轮廓阴影和圆角
1.outline:用来设置元素的轮廓线，用法与border一模一样，边框与轮廓不同的是轮廓不会影响到可见框的大小。
2.轮廓阴影：
(1)box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
(2)第一个值代表水平偏移量，正值向右移动，负值向左移动
(3)第二个值代表垂直偏移量，正值向下移动，负值向上移动
(4)第三个值代表阴影的模糊半径（越大越模糊）
//示例
box-shadow:10px 10px 50px rgb(0,0,0,.5)
(5)第四个值代表阴影的颜色
3.圆角
(1)border-radius：用来设置圆角，其值为圆角设置的圆的半径大小
- 四个值：左上 右上 右下 左下
- 三个值：左上 右上 /左下 右下
- 两个值：左上/右下 右上/左下
- 一个值：左上右上右下左下
- 将其值设置为50%，显示效果为一个圆
(2)也可以用border-xxx-radius来设置，如border-top-radius：10px 20px(其中第一个值表示水平方向半径大小，第二个值表示垂直方向半径大小)
十四、浮动
1.通过float属性来设置元素的浮动，浮动可以使一个元素向其父元素的左侧或右侧移动
2.float的可选值：
- none：默认值，元素不移动
- left/right：元素向左/右移动
3.元素设置浮动后，水平布局的等式不需要强制成立
4.元素设置浮动后，会完全从文档流中脱离，不再占用文档流的位置，所有元素下边的还在文档流中的元素会自动向上移动
5.浮动的特点：
- 浮动元素会完全脱离文档流，不再占用文档流中的位置
- 设置浮动以后元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过它上边浮动的兄弟元素，最多与其一样高
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
6.元素设置浮动后有一些属性会发生改变
- 块元素不再独占一行
- 脱离文档流后，块元素的宽度和高度默认被内容撑开
- 脱离文档流后，行内元素的特点变得与块元素一样
十五、高度塌陷和BFC
1.高度塌陷：
在浮动布局中，父元素的高度默认是子元素撑开的。当子元素浮动后，其会完全脱离文档流，无法撑起父元素的高度，导致父元素的高度丢失
2.BFC：块级格式化环境，开启BFC后该元素会变成一个独立的布局区域
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素子元素与父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
3.开启BFC的方法：
- 设置元素的浮动（不推荐）---float
- 将元素设置为行内块元素（不推荐）---display
- 将元素的overflow设置为一个非visible的值，如hidden，auto(副作用较小) ---overflow
- 开启绝对或固定定位
- 有根元素或存在父元素
4.clear:
可以使用clear属性来清除浮动元素对当前元素所产生的影响（原理：设置清除浮动后，系统会自动为元素添加上一个上外边距）
5.clear的可选值：
- left : 清除左侧浮动元素对当前元素的影响
- right: 清除右侧浮动元素对当前元素的影响
- both : 清除两侧中影响最大的那侧
6.利用after伪类解决高度塌陷
.box1::after{
content:'';
display:block;
clear:both;
}
7.clearfix：可以同时解决高度塌陷和外边距重叠问题
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
十六、定位
1.定位是一种更高级的布局手段，通过定位可以将元素摆放到页面的任意位置（定位的层级都一样）
2.使用position属性来设置定位，可选值有：
- statics：默认值，元素是静止的没有开启定位
- relative：开启元素的相对定位
- absolute：开启元素的绝对定位
- fixed：开启元素的固定定位
- sticky：开启元素的粘滞定位
3.相对定位(relative)的特点：
- 元素开启相对定位后，如果不设置偏移量，元素不会发生任何的变化(偏移量:top bottom left right )
//示例
position:relative;
top:100px;
- 相对定位是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级，不会使元素脱离文档流
4.绝对定位(absolute)的特点：
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质，行内元素变成块元素，块的宽度被内容撑开
- 绝对定位会使元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的(正常情况下，包含块指的是离当前元素最近的祖先块元素；在开启绝对定位情况下，包含块是离当前元素最近的开启了定位的祖先元素；如果所有的祖先元素都没有开启定位，则根元素就是当前元素的包含块)
5.固定定位(fixed)的特点：
- 固定定位也是一种绝对定位，所有固定定位的大多数特点与绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位
- 固定定位的元素不会随网页的滚动条滚动
6.粘滞定位(sticky)的特点：
- 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
position:sticky;
top:10px;
7.绝对定位元素的位置
(1)水平布局：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度。当发生过度约束时，
- 如果9个值中没有auto,则自动调整right值以使等式成立
- 如果有auto，则自动调整auto值以使等式成立
- 可设置auto的值的有margin、width、left和right。因为left和right的值默认是auto，所以如果不知道left和right，则等式不满足时会自动调整这两个值
(2)垂直布局:top+margin-top+margin-bottom+border-top+border-bottom+height+bottom+padding-top+padding-bottom=包含块的高度
8.z-index属性
对于开启了定位的元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大元素的层级越高，层级越高越优先显示。如果层级一样，则优先显示靠下的元素。祖先元素的层级再高也无法盖过后代元素。
思考
1.块级元素和行内元素的区别：
块元素在页面中独占一行，行内元素在一条直线上从左向右排列；行内元素的高度和宽度和顶/底边距不可以设置；行内元素中不能放任何块元素，块级元素可以包含行内元素和块元素。
2.display: none 和 visibility: hidden 的区别：
两者都会将元素在页面中隐藏不显示，不同的是设置visibility：hidden后，元素在页面中隐藏不显示，但依然占据页面的位置。
3. 相邻的行内元素之间为什么会有空隙？如何能够消除这些间隙：
间隙由空格、换行或回车所产生的空白符所导致；解决方法：人为删去空格（格式排版不美观）;设置父级元素的font-size=0；设置浮动
4.清除浮动的方法有哪几种？
设置clear:both;触发BFC清除浮动；使用after伪元素清除浮动；修改父元素的overflow属性为overflow：auto/hidden；用clearfix属性
5.content-box 和 border-box 的区别：
content-box：默认值，宽度和高度用来设置内容区的大小；border-box：宽度和高度用来设置整个盒子的大小(即width和height指的是内容区、内边距和边框的总大小)
6.定位的方式和使用场景:
静态定位：默认方式，没有边偏移；相对定位：相对原先位置移动，原来的位置继续占有，后面的盒子不会占用原先的位置；绝对定位：相对于祖先元素为参考系，绝对定位不再占有原先的位置；固定定位：常用于广告图片；粘滞定位：以浏览器的可视窗口为参考系，可以在浏览器页面滚动时保持不变。相对定位和绝对定位的使用场景：子绝父相，常用于logo的定位。
7.元素居中的方法：
用固定宽度加外边距实现水平居中；用绝对定位加负的左外边距实现水平居中；用文本居中加行内块实现水平居中；使用绝对定位加外边距实现水平居中；使用弹性盒子实现水平居中
<div style="width:200px;
margin:0 auto;">
内容
</div> //第一种
<div style="position:relative;">
<div style="width:200px;position:absolute;left:50%;margin-left:-100px">
内容
</div>
</div> //第二种
<div style="text-align:center;">
<div style="display:inline-block;">
用文本居中加行内块实现水平居中
</div>
</div> //第三种
#father{
position:relative;
}
#son{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin:auto;
}//第四种
#father{
display: flex;
justify-content: center;
align-items: center;
} //第五种
十七、字体族
1.字体相关的样式：
- color:用来设置字体的颜色
- font-size:用来设置字体的大小(em--相当于当前元素的一个font-size.rem--相当于根元素的一个font-size)
- font-family:字体族(字体的格式)，可选值为:serif(衬线字体)、sans-serif(非衬线字体)、monospace(等宽字体)，cursive(花体字)，fantasy(特殊艺术效果的字体)。font-family可以同时指定多个字体，多个字体间使用，隔开，字体生效时优先使用第一个，第一个无法使用时则使用第二个，以此类推。
font-family:'Courier New',Courier,monospace
- font-weight:设置字重 字体的加粗，可选值有：normal(默认值，不加粗)，bold(加粗)，100-900 九个级别(没什么用)
- font-style:设置字体的风格，可选值有：normal,italic(斜体)
- font-face:font-face可以将服务器中的字体直接提供给用户去使用
font-face{
font-family:'指定字体的名字';
src:url('服务器中字体的路径');
}
ps:计算机中的字体查询：计算机->C盘->Windows->Fonts
十八、图标字体
在使用图标时，将图标直接设置为字体，然后通过font-face的形式来引入字体，这样便可以通过使用字体的形式来使用图标
十九、行高
1.定义：
行高指的是文字占有的实际高度
2.可以通过line-height来设置行高
大小可以是px,em,也可以是一个整数(则行高是字体的指定的倍数)
3.字体框：
字体存在的格子，设置font-size实际上是设置字体框的高度
4.行高会在字体框的上下平均分配
5.行间距=行高-字体大小
二十、字体的简写属性
1.可以用font来设置字体的相关的所有属性
- 语法：font:字体大小/行高 字体族
//行高可以省略不写，相当于用默认值
font:50px/2 'Times New Roman',Times,serif;
2.除了基本的字体大小和字体族，还可以设置字体的其他属性
font:bold italic 50px/2 微软雅黑，'Times New Roman',Times,serif;
二十一、文本的水平和垂直对齐
1.text-align:文本的水平对齐，可选值：
- left:左侧对齐
- right:右侧对齐
- center:居中对齐
- justify:两端对齐
2.vertical-align:元素的垂直对齐，可选值：
- baseline:默认值，基线对齐
- top:顶部对齐
- bottom:底部对齐
- middle:居中对齐
ps:vertical-align只对行内元素有效
二十二、文本的其他样式
1.text-decoration:设置文本修饰，可选值：
- none:什么都没有
- underline:下划线
- line-through:删除线
- overline:上划线
2.white-space:设置网页如何处理空白，可选值：
- normal:正常
- nowrap:不换行
- pre:保留空白
p{
width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
二十三、背景
1.background-color:设置背景颜色
2.background-image:设置背景图片
- 如果图片小于元素，则背景图片会自动在元素中平铺
- 如果图片大于元素，则有一部分图片无法显示
- 如果一样大，则正常显示
3.background-repeat:设置背景的重复方式，可选值：
- repeat:默认值，背景沿着x轴，y轴双方向重复
- repeat-x
- repeat-y
- no-repeat:背景图片不重复
4.background-position:设置图片的位置，可选值：
- top
- bottom
- left
- right
- center
ps:使用方位词时必须要同时指定两个值！！！
//通过方向词设置
position:center right
//通过偏移量来设置位置,第一个值表示水平偏移量，第二个值表示垂直偏移量，偏移量可以是负的
position:100px 120px
5.background-clip:设置背景范围，可选值：
- border-box:默认值，背景会出现在边框下面
- content-box:背景只会出现在内容区
- padding-box:背景只出现在内容区和内边距
6.background-origion:背景图片的偏移量计算的原点
- border-box:默认值，偏移量从边框处开始计算
- content-box:偏移量从内容区处开始计算
- padding-box:偏移量从内边距处开始计算
7.background-size:背景图片的大小
background-size:100px 100px
//第一个值表示宽度，第二个值表示高度
//如果只有一个值，则第二个值默认是auto
background-size:cover
//图片比例不变，将元素铺满
background-size:contain
//图片比例不变，将元素在页面中完整显示
8.background-attachment:设置背景图片是否跟随元素滚动，可选值:
- scroll:默认值，背景图片会跟随元素滚动
- fixed:背景会固定在页面中，不会随元素滚动
9.background:背景相关的简写属性
background:#bfa url() no-repeat center center boreder-box content-box 100px 120px fixed;//如果图片大小设置为contain，则必须写在center后面，即center center/contain
//border-box代表的是background-origion的值，content-box代表的是background-clip的值
ps:background-size必须写在background-position后面，并且用/隔开；background-origion必须写在background-clip前面
二十四、雪碧图
1.解决图片闪烁的方法：
将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示图片，这样图片会同时加载到网页中，可以有效地避免出现闪烁的问题。这个技术在网页应用中十分广泛，被称为CSS-Sprite
2.雪碧图的使用步骤：
- 先确定要使用的图标
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景图片
- 设置一个偏移量以显示正常的图片
3.雪碧图的特点：一次性将多个图片加载进页面，降低请求的次数，加快访问的速度，提升用户的体验
二十五、渐变
1.线性渐变：颜色沿着一条直线发生变化
- 渐变是图片，需要通过background-image来设置
- 线性渐变的开头可以指定一个渐变的方向:to left/right/top/bottom或xxxdeg(deg表示度数)或turn(表示圈)
- 线性渐变可以设置多种颜色，默认情况下颜色平均分配
background-image:linear-gradient(red,yellow)//红色在开头，黄色在结尾，中间是过渡区域
background-image:linear-gradient(to right,red,yellow)//红色在左边，黄色在右边，中间是过渡区域
background-image:linear-gradient(red 20px,yellow 80px)
background-image:repeating-linear-gradient(red 50px,yellow 100px)
2.径向渐变：放射性效果
- 语法：radial-gradient(大小 at位置，颜色 位置，颜色 位置)
- 默认情况下，径向渐变的形状根据元素的形状来计算（正方形-->圆形，长方形-->椭圆形），但也可以手动指定径向渐变的大小（circle-->圆形,ellipse-->椭圆形,closest-side-->近边,closest-corner-->近角,farthest-side-->远边,farthest-corner-->远角）
background-image:radial-gradient(red,yellow)
background-image:radial-gradient(ellipse,red,yellow)//椭圆形渐变效果
background-image:radial-gradient(100px 100px,red,yellow)//指定径向渐变的大小为100px 100px
background-image:radial-gradient(100px 100px at 0 0,red,yellow)//at 0 0代表圆心的位置
二十六、表格
1.表格的创建：使用table标签创建表格
- tr 表示表格中的一行
- td 表示一个单元格
- colspan 表示横向合并单元格
- rowspan 表示纵向合并单元格
2.长表格:可以将一个表格分成三个部分
- 头部 thead(th 表示头部的单元格)
- 主体 tbody
- 底部 tfoot
3.表格的样式：
-
border-spacing:指定边框之间的距离
-
border-collapse:设置边框的合并
ps:浏览器会自动添加tbody标签，所以table不是tr的父元素
- 默认情况下元素在td中是居中的，可以通过vertical-align来修改（margin:0;vertical-align：middle使得表格中的文字水平与垂直方向都居中，可以利用这一特点使元素居中）
4.表单
-
form的属性 action:表单要提交的服务器的地址
-
readonly和disabled的区别：前者数据会提交，后者不会
二十七、过渡
1.transition:通过过渡可以指定一个属性发生变化的切换方式
transition:height .3s
2.属性：
- transition-property:指定要过渡的属性(多个属性使用时用，隔开；如果所有属性都需要过渡，则使用all)
- transition-duration:指定过渡效果的持续时间
- transition-timing-function:过渡的时序函数(ease:默认值，减速开始，先加速，再减速；linear:匀速运动；ease-in:加速运动，速度越来越快；ease-out:减速运动，速度越来越慢；ease-in-out:先加速再减速;cubic-bezier():指定时序函数;steps(time,start/end):end是默认值，表示在时间结束时执行过渡，start相反)
- transition-delay:设置过渡时间的延迟
3.可以用transition简写属性，但需要注意的是：如果有两个时间，第一个表示持续时间，第二个是延迟时间。
二十八、动画
1.设置关键帧的名字:animation-name
@keyframes name{
• from{}
• to{}
• }
2.设置动画的执行时间：animation-duration
3.设置动画的延时：animation-delay
4.设置动画的时序函数:animation-timing-function，有5个值：ease（默认），ease-in，ease-out，ease-in-out和linear，也可以自定义函数
5.设置动画的执行次数：animation-itertion-count
animation-itertion-count:infinite//动画执行无限次
6.设置动画执行的方向：animation-direction
- normal:默认值，从from到to进行
- reverse:从to到from执行
- alternate:从from到to执行，重复执行动画时反向执行
- alternate-reverse:从to到from执行，重复执行动画时反向执行
7.设置动画的执行状态：animation-play-state
- running:默认值，动画执行
- paused:动画暂停
8.设置动画的填充模式:animation-fill-mode
- none:默认值，动画执行完毕，回到初始位置
- forwards:动画执行完毕，停在结束位置
- backwards:动画延时等待时，元素就会处于开始位置
- both:结合了forwards和backwards
9.transform属性：
- rotate:旋转
- scale:缩放
- translate:平移
- skew:倾斜
10.animation：简写属性
二十九、弹性布局
1.flex(弹性盒，伸缩盒):是css中的一种布局手段，主要用来代替浮动完成页面的布局；flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
2.弹性容器：要使用弹性盒，必须将一个元素设置为弹性容器。我们用display来设置弹性容器
- display:flex 设置为块级弹性容器
- display:inline-flex 设置为行内的弹性容器
3.弹性元素：弹性容器的子元素是弹性元素，一个元素可以同时是弹性容器和弹性元素
4.flex-direction：指定容器中弹性元素的排列方式
- row:默认值，弹性元素在容器中水平排列
- column:弹性元素在容器中纵向排列
- row-reverse:弹性元素在容器中反向水平排列
- column-reverse:弹性元素在容器中反向纵向排列
ps：主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向的称为侧轴
5.flex-grow:指定弹性元素的伸展系数，即当父元素有多余空间时，子元素如何伸展
- 默认值是0
- 可改为其他数值，这样剩余空间会按比例分配给子元素
6.flex-shrink:指定弹性元素的收缩系数
- 默认值是0
- 可改为其他数值，这样父元素空间不足以容纳子元素时，会按比例收缩子元素
7.flex-wrap:设置弹性元素是否在弹性容器里自动换行
- nowrap:默认值，不换行
- wrap:元素沿着辅轴方向自动换行
- wrap-reverse:元素沿着辅轴反方向自动换行
8.flex-flow：flex-direction和flex-wrap的简写属性
flex-flow:row wrap;
9.justify-content:设置如何分配主轴上的空白空间
- flex-start:元素沿着主轴起边排列
- flex-end:元素沿着主轴终边排列
- center:元素居中排列
- space-around:空白分布到元素两侧
- space-evenly:空白均匀分布到元素的单侧
- space-between:空白均匀分布到元素之间
10.align-items:设置元素在辅轴上如何对齐
- stretch:默认值，将元素的长度设置为相同的值
- flex-start:元素不会拉伸，沿着辅轴起边对齐
- flex-end:沿着辅轴终边对齐
- center:元素居中对齐
- baseline:基线对齐
justify-content:center;
align-items:center;//主轴、辅轴都居中对齐
11.弹性元素的样式
(1)flex-grow:设置弹性的增长系数
(2)flex-shrink:设置弹性元素的缩减系数
(3)flex-basis:设置元素在主轴上的的基础长度，默认值是auto，表示参照元素自身的高度或宽度
(4)flex:设置弹性元素的三个样式：增长 所见 基础
(5)align-self：子类在交叉轴上的对齐方式 flex items可以通过align-self覆盖flex container设置的align-items，共6个取值：auto（默认值，遵从flex container设置的align-items）；stretch、flex-start、flex-end、center、baseline，效果和align-items一样。
