1、CSS简介
1.1、CSS是什么？
CSS指的是层叠样式表（Cascading Style Sheets）
CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
CSS节省了大量工作。它可以同时控制多张网页布局。
1.2、CSS引入方式
引入方式 书写位置 作用范围 使用场景
内嵌式 CSS写在style标签中。style标签通常放在head中 当前页面 小案例
外联式 CSS写在单独的CSS文件中，通过link标签引入 多个页面 项目中
行内式 CSS写在标签的style属性中 当前标签 配合js使用
2、CSS选择器
2.1、CSS基础选择器
2.1.1 ID选择器
结构：#id属性值 { css属性名: 属性值; }
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签
2.1.2 类选择器
结构：.class { css属性名: 属性值; }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
所有标签上都有class属性，class属性的属性值成为类名
类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
一个标签可以同时有多个类名，类名之前以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签
2.1.3 通配符选择器
结构：* { css属性名: 属性值; }
作用：找到页面中所有的标签，设置样式
注意点：默认去除浏览器自带属性margin和padding
2.1.4 标签选择器
结构：标签名 { css属性名: 属性值; }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签
2.1.5 属性选择器
属性 说明
[attribute] 选择多有带 attribute 属性的元素
[attribute=value] 选择 attribute=value的所有元素
[attribute~=value] 选择 attribute属性包含单词 value的所有元素
[attribute^=value] 选择其attribute属性值以value开头的所有元素
[attribute$=value] 选择其attribute属性值以 value结束的所有元素
[attribute*=value] 选择其attribute属性中包含value子串的每个元素
结构：标签名 { css属性名: 属性值; }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签
2.2、组合选择器
选择器 作用 格式 示例
后代选择器 找后代 选择器之间通过空格分隔 .father .son { css }
子代选择器 找儿子 选择器之间通过 >分隔 .father > .son { css }
并集选择器 找到多类元素 选择器之间通过,分隔 div,p,span { css }
交集选择器 找同时满足多个选择器的元素 选择器之间紧挨着 p.red { css }
兄弟选择器 匹配p标签后的所有span元素 选择器之间通过 ~ 分隔 p ~ span
相邻选择器 匹配p标签的第一个span元素 选择器之间通过 + 分隔 p + span
2.3、伪类选择器
伪类：将特殊的效果添加到特定的选择器上，不会产生新元素
选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E:nth-child(n) 作为父元素的第n个子元素E
E:nth-last-child(n) 选择父元素的倒数第n个子元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个元素
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type 选择父元素内具有指定类型的倒数第n个E元素
E:root 选择匹配元素E所在文档的根元素，也就是html
E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type 选择父元素只包含一个同类型的子元素，且该子元素匹配E元素
E:empty 选择没有子元素的元素，且该元素也不包含任何文本节点
E:link 选择所有未被访问的链接
E:active 选择活动状态的a链接元素
E:visited 选择已经访问过的元素
E:hover 选择鼠标悬停状态的元素
E:checked 选择<input type="checkbox" checked>的元素
2.4、伪元素选择器
伪元素：在内容元素的前后插入额外的元素或样式，这些元素不在html文档中生成，只在外部可见。
选择器 功能描述
::before 创建一个伪元素放在选中元素前
::after 创建一个伪元素放在选中元素后
::first-letter 选各种元素第一行第一个字母
::first-line 选中元素的第一行
::selection 选中鼠标点击拖动选中的高亮部分
2.5、伪类和伪元素区别
伪元素只能在选择器中出现一次，而且只在末尾出现
伪类只设置样式，不会创建新元素。而伪元素会创建新元素
伪类的效果可以通过添加实际的类来实现；伪元素也可以通过添加元素来实现
3、字体和文本样式
3.1、字体样式
属性名 样式 属性值
font-size 字体大小 数组+px
font-weight 字体粗细 正常：normal或数字400; 加粗：bold或数字700
font-style 是否倾斜 正常（默认值）：normal; 倾斜：italic
font-family 字体系列 sans-serif（无衬线字体）; serif（衬线字体）; monospace（等宽字体）
font 字体连写 style weight size family
3.2、文本样式
属性名 样式 属性值
text-indent 文本缩进 数字+px; 数字+em（推荐：1em = 当前标签的font-size的大小）
text-align 对齐方式 left: 左对齐; center: 居中对齐; right: 右对齐
text-decoration 文本修饰 underline: 下划线; line-through: 删除线; overline: 上划线; none: 无装饰线
line-height 文本行高 数字+px; 倍数（当前标签font-size的倍数）
4、背景相关属性
4.1、背景颜色
属性名：background-color
属性值：
颜色取值 示例
关键字 red、green、yellow等
rgb表示法 rgb(255,255,255)
rgba表示法 rgba(255,255,255,1)
十六进制 #ffffff;
注意点：
背景颜色默认值是透明的：rgba(0,0,0,0)或transparent
背景颜色不会影响盒子大小，一般在布局中使用，方便看清盒子大小和位置
4.2、背景图片
属性名：background-image
属性值：background-image: url(‘图片的路径’)
注意点：
背景图片默认实在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景不能撑开盒子
4.3、背景平铺
属性名：background-repeat
属性值：
取值 效果
repeat （默认值）水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿水平方向（x轴）平铺
repeat-y 沿垂直方向（y轴）平铺
4.4、背景位置
属性名：background-position
属性值：background-position: 水平方向位置 垂直方向位置
4.5、img标签和背景图片的区别
img标签是一个标签，不设置宽高默认会以原来尺寸显示
背景图片只是装饰的CSS样式，不能撑开元素的宽高
5、元素的显示模式
5.1、块级元素
属性：display: block
特点：
独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等
5.2、行内元素
属性：display: inline
特点：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
代表标签：
a、span、b、u、i、s、strong、ins、em、del等
5.3、行内块元素
属性：display: inline-block
特点：
一行可以显示多个
可以设置宽高
代表标签：
input、textarea、button、select等
特殊情况：img标签有行内块元素特点，但在谷歌浏览器中显示的是inline
6、CSS三大特性
6.1、继承性
特点：子元素有默认继承父元素样式的特点（子承父业）
继承属性：
color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
应用场景：
可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
继承失效情况：被浏览器默认样式给覆盖了
6.2、层叠性
特性：
给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断
6.3、优先级
选择器 示例 权重值
!important background-color: #fff !important; 正无穷
内联选择器 <span style='color: #333;'>样式作用元素</span> 1000
ID选择器 #id 100
类选择器、属性选择器、伪类选择器 .class 10
标签选择器、伪元素选择器 div、p 1
通配符选择器 * 0
继承属性 <div style='color:#333;'><span>样式作用元素</span></div> -1
说明
权重值是256进制的
同一行的选择器权重值相加，权重值高的样式生效，如果权重值相同，后面写的覆盖前面
不是同一行的直接找按权重值相加计算，权重值高的样式生效
7、盒子模型
7.1、盒子模型介绍
盒子的概念：
页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局
浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子
盒子模型：CSS中规定盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成
7.1.1 内容的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性：width / height
常见取值：数字 + px
7.1.2 边框 (border)
作用：设置边框粗细、边框样式、边框颜色效果
属性：
作用 属性名 属性值
边框粗细 border-width 数字 + px
边框样式 border-style 实线 solid、虚线 dashed、点线 dotted
边框颜色 border-color 颜色取值
边框连写形式：边框粗细 边框样式 边框颜色
例如：border: 1px solid #333;
单方向设置：border-方位名词: 1px solid red;
7.1.3 内边距 (padding)
作用：设置边框与内容区域之间的距离
属性名：padding
常见取值：
取值 示例 含义
一个值 padding: 10px; 上下左右都设置为10px
两个值 padding: 10px 20px; 上下设置为10px、左右设置为20px
三个值 padding: 10px 20px 30px 上设置为10px、左右设置为20px、下设置为30px
四个值 padding: 10px 20px 30px 40px 上设置为10px、右设置为20px、下设置为30px、左设置为40px
单方向设置：padding-方位名词: 10px;
7.1.4 外边距 (margin)
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
常见取值：
取值 示例 含义
一个值 padding: 10px; 上下左右都设置为10px
两个值 padding: 10px 20px; 上下设置为10px、左右设置为20px
三个值 padding: 10px 20px 30px 上设置为10px、左右设置为20px、下设置为30px
四个值 padding: 10px 20px 30px 40px 上设置为10px、右设置为20px、下设置为30px、左设置为40px
单方向设置：margin-方位名词: 10px;
7.1.5 盒子实际大小计算公式
盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
问题：当盒子被border和padding撑大后，如何解决？
手动内减：手动计算多余大小，在内容中减去
自动内减：给盒子设置属性 box-sizing: border-box;
7.1.6 相邻盒子之间margin计算规则
水平方向的盒子，两者距离为margin之和
垂直方向的盒子，两者距离为margin的最大值
7.1.7 塌陷现象
场景：互相嵌套和块级元素，子元素的magin-top会作用在父元素上
结果：导致父元素一起往下移动，引起父元素塌陷
解决方式：
给父元素设置border-top或者padding-top（分割父子元素的margin-top）
给父元素设置overflow: hidden;
转换成行内块级元素 display: inline-block;
设置浮动 float: left;
添加伪类
常用清除浮动和父元素塌陷伪类：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
8、 标准流
标准流：又称文档流，是浏览器在渲染元素时默认采用的一套排版规则，规定了该以何种方式排列元素
排版规则：
块级元素：从上到下，垂直布局，独占一行
行内元素 或 行内块元素：从左到右，水平布局，空间不够自动换行
9、 浮动
9.1、浮动的特点
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素会受到上面块级元素边界的影响
浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
注意点：浮动元素不能通过父元素设置text-align:center;或本身设置margin: 0 auto;让浮动元素本身水平居中
9.2、浮动的作用
图文环绕
网页布局，让垂直布局的盒子变成水平布局