一、css基本概念
1.1css认识
（1）css定义：层叠样式表
（2）css的作用： 给页面中的Html标签设置样式
1.2css引入方式
1.内嵌式
<style>
p {
color: red;
}
</style>
2.外联式
<link rel="stylesheet" href="./style.css">
3.行内式
<p style="color: green;">我也是一个p标签</p>二、选择器
2.1标签选择器
Ø 结构：标签名 { css属性名：属性值； }
Ø 作用：通过标签名，找到页面中所有这类标签，设置样式
Ø 注意点：
标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签
2.2类选择器
Ø 结构：.**类名** { css属性名：属性值； }
Ø 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
Ø 注意点：
所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签
2.3 id选择器
Ø 结构：#id**属性值** { css属性名：属性值； }
Ø 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
Ø 注意点：
所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签
2.4通配符选择器
Ø 结构：* { css属性名：属性值； }
Ø 作用：找到页面中所有的标签，设置样式
Ø 注意点：
开发中使用极少，只会在极特殊情况下才会用到
在基础班小页面中可能会用于去除标签默认的margin和padding
三、字体与文本样式
3.1 字体样式
（1）字体大小：font-size
（2）字体粗细：font-weight
（3）字体样式：font-style
（4）字体类型：font-family
3.2 文本样式
（1）文本缩进：text-indent
（2）文本水平对齐方式：text-align
（3）文本修饰：text-decoration
3.3 line-height行高
Ø 应用：
（1）让单行文本垂直居中可以设置 line-height : 文字父元素高度
（2）网页精准布局时，会设置 line-height : 1 可以取消上下间距
3.4颜色
（1）文字颜色：color
（2）背景颜色：background-color
四种表示方式：关键词、rgb、rgba、十六进制
四.复合选择器
4.1后代选择器：空格
Ø 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
Ø 选择器语法：选择器**1** 选择器**2 { css }**
Ø 结果：• 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
Ø 注意点：
后代包括：儿子、孙子、重孙子……
后代选择器中，选择器与选择器之前通过 空格 隔开
4.2 子代选择器 >
Ø 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
Ø 选择器语法：选择器**1 >** 选择器**2 { css }**
Ø 结果：
• 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
Ø 注意点：
子代只包括：儿子
子代选择器中，选择器与选择器之前通过 > 隔开
4.3 并集选择器 ,
Ø 作用：同时选择多组标签，设置相同的样式
Ø 选择器语法：选择器**1** ， 选择器**2 { css }**
Ø 结果：
• 找到 选择器1 和 选择器2 选中的标签，设置样式
Ø 注意点：
并集选择器中的每组选择器之间通过 , 分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性
4.4 hover伪类选择器
Ø 作用：选中鼠标悬停在元素上的状态，设置样式
Ø 选择器语法：选择器:hover { css }
Ø 注意点：
伪类选择器选中的元素的某种状态
4.5结构伪类选择器
（1）作用与优势：
作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
（2）选择器
E：firdt-child{}
E: last-child{}
E：nth-child(n){}
E：nth-last-child(n){}
Ø n的注意点：
n为：0、1、2、3、4、5、6、……
通过n可以组成常见公式
偶数 2n、even 奇数2n+1、2n-1、odd
前五个 -n+5 第五个往后 n+5
五、背景
5.1 背景颜色
Ø属性名：background-color
Ø 属性值：
• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
Ø 注意点：
• 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
5.2 背景图片
Ø属性名：background-image
Ø 属性值：background-imgge:url（图片地址）
Ø 注意点：
1.背景图片中url中可以省略引号
2.背景图片默认是在水平和垂直方向平铺的
3.背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
5.3 背景平铺
Ø属性名：background-repeat（bgr）
Ø 属性值：repeat,no-repeat,repeat-x,repeat-y
5.4 背景位置
Ø属性名：background-position
Ø 属性值：background-position：水平方向位置 垂直方向位置
1.方位名词（水平：left，center，right 垂直：top，center，bottom）
2.数字＋px（坐标：圆点（0，0）盒子的左上角）
Ø 注意点：
• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
5.5 背景相关属性连写
Ø属性名：background
Ø 属性值：
• 单个属性值的合写，取值之间以空格隔开
Ø 书写顺序：
•推荐：background：color image repeat position
Ø 省略问题：
• 可以按照需求省略
• 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
Ø 注意点
如果需要设置单独的样式和连写① 要么把单独的样式写在连写的下面
② 要么把单独的样式写在连写的里面
六、显示模式
6.1 块级元素
Ø属性：display：block
Ø 显示特点：
独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高
Ø 代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
6.2行内元素
Ø属性：display：inline
Ø 显示特点：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
Ø 代表标签：
a、span 、b、u、i、s、strong、ins、em、del……
6.3行内块元素
Ø属性：display：inline-block
Ø 显示特点：
一行可以显示多个
可以设置宽高
Ø 代表标签：
input、textarea、button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
6.4元素显示模式转换
Ø 目的：改变元素默认的显示特点，让元素符合布局要求
Ø 语法：display：inline-block 转成行内块元素
display：inline 转成行内元素
display：block 转成块元素
七、盒子模型
盒子模型
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域 （border）、外边距区域（margin ）构成，这就是 盒子模型
7.1 内容区域的宽度和高度
Ø 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
Ø属性：width / height
Ø 常见取值：数字+px
7.2 边框（border ）
（1）边框（border）单个属性
Ø 作用：给设置边框粗细、边框样式、边框颜色效果
Ø 单个属性：border-width\border-style\border-color
（2）边框（border） 连写形式
Ø属性名：border
Ø 属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
（3）边框（border） 单方向设置
Ø 场景：只给盒子的某个方向单独设置边框
Ø 属性名：border - 方位名词
Ø 属性值：连写的取值
7.3 内边距（ padding ）
Ø 作用：设置 边框 与 内容区域 之间的距离
Ø属性名：padding
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！
7.4 外边距（margin）
Ø 作用：设置边框以外，盒子与盒子之间的距离
Ø属性名：margin
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！
八、浮动
（1）作用：网页布局
• 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
Ø属性名：float
Ø 属性值：left，right
Ø 特点：
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素会受到上面元素边界的影响
浮动元素有特殊的显示效果 （一行可以显示多个 ，可以设置宽高 ）
Ø 注意点：
浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中
（2）清除浮动clear:both
Ø 含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
Ø 原因：
子元素浮动后脱标 → 不占位置
Ø 目的：
需要父元素有高度，从而不影响其他网页元素的布局
方法：
① 直接设置父元素高度
② 给父元素设置overflow : hidden
九、定位
9.1 定位的基本介绍
（1）简介：
可以让元素自由的摆放在网页的任意位置
一般用于 盒子之间的层叠情况
（2）应用场景：
1.可以解决盒子与盒子之间的层叠问题
定位之后的元素层级最高，可以层叠在其他盒子上面
2.可以让盒子始终固定在屏幕中的某个位置
9.2定位的基本使用
1. 设置定位方式
Ø属性名：position
Ø 常见属性值：static,relative,absolute,fixed
2.设置偏移值:left,right,top,bottom
Ø 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
Ø 选取的原则一般是就近原则 （离哪边近用哪个）
9.3相对定位
Ø 介绍：自恋型定位，相对于自己之前的位置进行移动
Ø 代码： position：relative
Ø 特点：
需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置 → 没有脱标
Ø 应用场景：
配合绝对定位组CP（子绝父相）
用于小范围的移动
9.4绝对定位
Ø 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
Ø 代码 position：absolute
Ø 特点：
需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标
Ø 应用场景：
配合绝对定位组CP（子绝父相）
9.5子绝父相
Ø 场景：让子元素相对于父元素进行自由移动
Ø 含义：
• 子元素：绝对定位
• 父元素：相对定位
Ø 子绝父相好处：
• 父元素是相对定位，则对网页布局影响最小
9.6固定定位
Ø 介绍：死心眼型定位，相对于浏览器进行定位移动
Ø 代码：
Ø 特点：
需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标
Ø 应用场景：
让盒子固定在屏幕中的某个位置
9.7元素的层级关系
Ø 场景：改变定位元素的层级
Ø属性名：z-index
Ø 属性值：数字
• 数字越大，层级越高