1.什么是css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.css语法规范
使用html时，需要遵从一定的规范，css也是如此，想要熟练地使用css对网页进行修饰，首先需要了解css样式规则
css规则由两个主要的部分构成：选择器以及一条或多条声明
选择器是用于指定css样式的html标签，花括号内是对该对象设置的具体样式，
属性和属性值是以键值对的形式出现
属性和属性直接用英文的“：”分开
多个键值对之间用“;” 进行区分
3.css基础选择器
3.1 css选择器的作用
选择器就是根据不同需求把不同标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。
3.2 选择器分类
选择器可分为基础选择器和复合选择器两大类：
基础选择器是由单个选择器组成
基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器
3.3 字体css属性
font-family 设置字体系列
font-size 设置字号大小
font-style 设置字体样式 normal：默认值，italic：斜体
3.4 文本css属性
color 颜色属性
text-align 文本对齐（right：右对齐，center：居中对齐，left：左对齐）
text-decoration 文本装饰（underline：下划线，line-through：删除线，overline：上划线，none：默认）
text-indent 首行缩进 （取值：像素，如果写了2em，则是缩进当前元素两个文字大小的距离）
line-height 用于设置行间的距离，可以控制文字行与行间的距离
4.css复合选择器
4.1 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：元素1 元素2 { 样式声明 }
元素1和元素2之间用空格隔开
4.2 子选择器
子选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。
语法：元素1 > 元素2 { 样式声明 }
元素1是父级，元素2是子集，最终选择的是元素2
4.3 并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明，并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：元素1,元素2 { 样式声明 }
元素1和元素2中间用逗号隔开
4.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素，伪类选择器书写最大的特点就是用冒号（:）表示，比如：hover、:first-child。
因为伪类选择器很多，比较常用的有链接伪类，结构伪类等。
1）链接伪类选择器
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /*选择鼠标指针位于其上的链接 */
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
为了确保生效，请按照 LVHA 的顺序进行书写，:link - :visited - :hover -:active
2）focus伪类选择器
:focus伪类选择器用于选择获取焦点的表单元素
焦点就是光标，一般情况下，input类表单元素才能获取，因此这个选择器也主要针对表单元素来说
input:focus { border-color: yellow; }
5.css的元素显示模式
5.1 块元素
常见的块元素有 h1~h6，p，div，ul，ol，li等，其中div是最典型的块元素
块级元素的特点：
1）比较霸道，自己独占一行；
2）高度、宽度、外边距以及内边距都可以控制；
3）宽度默认是容器的100%；
4）是一个容器及盒子，里面可以放行内或者块级元素。
5.2 行内元素
常见的行内元素有a，strong，b，span，em等，其中span是最典型的行内元素
行内元素的特点：
1）相邻行内元素在一行上，一行可以显示多个；
2）高、宽直接设置是无效的；
3）默认宽度就是它本身内容的宽度；
4）行内元素只能容纳文本或其他行内元素。
5.3 行内块元素
在行内元素中有几个特殊的标签 <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。因此称它们为行内块元素。
行内块元素特点：
1）和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）；
2）默认宽度就是它本身内容的宽度（行内元素特点）；
3）高度，行高，外边距以及内边距都可以控制（块级元素特点）。
5.4 元素转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。
转换为块元素：display：block；
转换为行内元素：display：inline；
转换为行内块：display：inline-block；
6.css的背景
通过css的背景属性，可以给页面元素添加背景样式，背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。
6.1 背景颜色
background-color 属性定义了元素的背景颜色
background-color：颜色值
默认值是transparent，意思是透明的
6.2 背景图片
background-image 属性描述了元素的背景图像，实际开发常见于一些logo或者一些装饰性的小图片或者是超大的背景图片
body { background-image: url(../../../assets/img/avatar.png); }
默认值是none，意思是无背景图
6.3 背景平铺
如果需要在html上对背景图片进行平铺，可以使用background-repeat属性
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
默认情况下背景图片是平铺的
6.4 背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position：x y;
参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位
1）如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left center和 center left是一样的意思。
2）如果只指定了一个方位名词，另一个值省略，则第二个默认居中对齐。
3）如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标。
4）如果只指定了一个数值，那该数值一定是x坐标，另一个默认垂直居中。
6.5 背景图片固定
background-attachment 属性设置背景图片是否固定或者随着页面的其余部分滚动。
background-attachment：scroll | fixed
默认为scroll 随着页面的滚动而滚动。
6.6 背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background 中，从而节约代码量。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background：transparent url(image.jpg) repeat-y fixed top ;
6.7 背景颜色半透明
css3为我们提供了背景颜色半透明的效果
background：rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值范围在0~1之间
我们可以把0.3的0省略掉，写为 background：rgba(0,0,0, .3);
7.盒子模型
7.1 边框border
border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式、边框颜色。
语法：
border：border-width || border-style || border-color
| 属性 | 作用 |
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框的复合写法：
border：1px solid red; 没有顺序
边框分开写法：
border-top：1px solid red; 只设置上边框，其余同理
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
语法：
border-collapse：collapse; 表示相邻边框合并在一起
7.2 内边距padding
padding属性用于设置内边距，即边框与内容之间的距离。
padding-left、padding-bottom、padding-left、padding-right 可以设置盒子的上下左右内边距
padding属性（简写属性）可以有1~4个值
| 值得个数 | 表达意思 |
| padding:5px; | 1个值，代表上下左右都有5像素的内边距 |
| padding:5px 10px; | 2个值，代表上下内边距5像素，左右内边距10像素 |
| padding:5px 10px 20px; | 3个值，代表上内边距5px，左右内边距10px，下内边距20ox； |
| padding:5px 10px 20px 30px; | 4个值，上是5px，右是10px，下是20px，左是30px 顺时针 |
7.3 外边距margin
margin属性用于设置外边距，即控制盒子与盒子之间的距离
| 属性 | 作用 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin简写方式代表的意义和padding完全一样
外边距可以让块级盒子水平居中，但是必须满足两个条件：
1）盒子必须指定了宽度，
2）盒子左右的外边距都设置为auto。
7.4 外边距合并
使用margin定义块元素的垂直外边框时，可能出现外边距的合并。
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
1）可以给父元素定义上边框
2）可以给父元素定义上内边框
3）可以给父元素添加overflow:hidden
7.4 圆角边框
border-radius 属性用于设置元素的外边框圆角
语法：
border-radius：length;
注意:
1）参数值可以为数值或百分比的形式
2）如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
3）如果是个矩形，设置为高度的一半就可以做
4）该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
7.5 盒子阴影
css3中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子设置阴影
语法：
box-shadow：h-shadow v-shadow blur spread color insert;
| 值 | 描述 |
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色。 |
| inset | 可选，将外部阴影（outset）改成内部阴影 |
例如：
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
7.6 文字阴影
css3中新增了文字阴影，我们可以使用 text-shadow 属性为盒子设置阴影
语法：
text-shadow：h-shadow v-shadow color;
例如：
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
8.浮动
8.1 浮动特性
浮动元素具有行内块元素特性
- 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
- 行内元素同理
8.2 清除浮动
语法：
选择器{clear:属性值;}
| 属性值 | 描述 |
| left | 不允许左侧有浮动元素 |
| right | 不允许右侧有浮动元素 |
| both | 同时清除左右两侧的浮动 |
清除浮动方法
1.额外标签法也称为隔离法，是w3c推荐的做法 clear:both
2.父级添加overflow属性
3.父级添加after伪属性
4.父级添加双伪属性
清除浮动常用代码：
.clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
9.定位
9.1 定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式决定元素的定位方式，它通过css的position属性来设置，其值可以分为四个：
| 值 | 语义 |
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移就是定位的盒子移动到最终位置，有top、bottom、left和right4个属性。
| 边偏移属性 | 示例 | 描述 |
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
9.2 静态定位
静态定位是元素的默认定位方式，无定位的意思
语法：
选择器 { position：static； }
9.3 相对定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：
选择器 { position:relative; }
相对定位的特点：
1、它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
9.4 绝对定位
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：
选择器 { position:absolute; }
绝对定位的特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
9.5 固定定位
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 { position:fixed; }
固定定位小技巧：固定在版心右侧位置
1、让固定定位的盒子left:50%，走到浏览器可视区（也可以看做版心）的一半位置
2、让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐了。
9.6 粘性定位
粘性定位可以被认为是相对定位和固定定位的混合，sticky粘性的
语法：
选择器 { position:sticky;top:10px; }
粘性定位的特点：
1、以浏览器的可视窗口为参照点移动元素（固定定位特点）
2、粘性定位占用原先的位置（相对定位特点）
3、必须添加top、bottom、right、left其中一个才有效
9.7 定位叠放次序
在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）
语法：
选择器 { z-index:1; }
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
10.元素的显示与隐藏
10.1 display属性
display属性用于设置一个元素应如何显示
- display：none；隐藏对象
- display：block；除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不占有原来的位置
10.2 visibility可见性
visibility属性用于指定一个元素应可见还是隐藏
- visibility：visible;元素可视
- visibility：hidden;元素隐藏
visibility隐藏元素后，继续占有原来的位置
10.3 overflow溢出
overflow 属性指定了如果内容溢出一个元素的框（超过其指定的高度及宽度）时，会发生什么
| 属性值 | 描述 |
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超过的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分