1.css介绍
1）CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。CSS并不是一门编程语言，是样式语言。作用就是进行网页布局和美化网页。
2）写CSS，有三种写法，内部式：CSS 写在style标签中, 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中。外部式：CSS 写在一个单独的.css文件中, 提示：需要通过link标签在网页中引入。行内式：CSS 写在标签的style属性中, 之后会配合js使用。
2.CSS选择器
1.基础选择器
1）通用选择器
1.结构：* { css属性名：属性值； }
2.所有的元素都会被选中
2）元素选择器
1.结构：标签名 { css属性名：属性值； }
2.选择的是一类标签，而不是单独某一个
3）类选择器
1.结构：.类名 { css属性名：属性值； }
2.通过类名，找到页面中所有带有这个类名的标签，设置样式
3.一个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
4）id选择器
1.结构：#id属性值 { css属性名：属性值； }
2.通过id属性值，找到页面中带有这个id属性值的标签，设置样式
3.一个标签上只能有一个id属性值，id在一个页面中是唯一的，不可重复的，一个id选择器只能选中一个标签
2.高级选择器
5）属性选择器
1.结构：[属性] { css属性名：属性值； }
6）后代选择器
选中所有的后代 空格 无论嵌套多深,只要是后代,都会选中
子代选择器 > 只会选中直接子代
7）兄弟选择器
+ 选中某个元素后面紧挨着的那个兄弟 一定是后面的 不包含自己
~ 选中某个元素后面的所有的兄弟，一定是后面的 不包含自己
8）交集选择器
同时符合两个选择器条件(两个选择器紧密连接)
9）群组(并集)选择器
符合一个选择器条件即可(两个选择器以,号分割)
10）动态伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.foo1,
.foo2 {
width: 120px;
height: 120px;
background-color: #ccc;
}
div:hover a {
color: green;
}
.foo2:hover {
color: blue;
}
</style>
</head>
<body>
<!-- 鼠标悬停在class="foo1"的div元素上，a元素变绿 -->
<div class="foo1">
foo1
<a href="#">百度一下</a>
</div>
<hr>
<!-- 鼠标悬停在class="foo2"的div元素上，内部文字变蓝 -->
<div class="foo2">
foo2
<div>百度一下</div>
</div>
</body>
</html>3.选择器优先级
1）行内样式>ID选择器>类选择器>元素选择器
2）内外部样式加载顺序：就近原则
3）!important
3.字体相关的样式
1.font-size
设置文字的大小
1）font-size: 16px; 设置字体为16px（谷歌浏览器默认文字大小是16px）
2）一个网页中常用的字体大小是12px和14px
3）有继承性
2.font-family
设置文字的字体
1）font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
设置网页的字体，按从左到右顺序，以逗号隔开。如果字体名称包含空格，则应使用引号括起
2）有继承性
3.font-weight
设置文字的粗细
1）font-weight: normal; 是默认值（normal：等于400），正常粗细
2）font-weight: bold; 常用（bold：等于700）
3）取值是100-900 100变细 900加粗
4）strong、b、h1~h6等标签的font-weight默认就是bold
5）有继承性
4.font-style
设置文字的常规、斜体显示
1）font-style: normal; 是默认值，正常
2）font-style: italic; 字体倾斜
3）有继承性
5. font-variant
设置小写字母的显示形式
1）font-variant: normal; 是默认值，正常
2）font-variant: small-caps; 将小写字母替换为缩小过的大写字母
6.line-height
设置文本的行高
1）line-height: 20px; 或 line-height: 1;
2）网页精准布局时，会设置 line-height : 1 可以取消上下间距
3）单行时，line-height的高度等于盒子的高度，文字在盒子内垂直居中
7.font
1）作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写
2）font-style、font-variant、font-weight可以随意调换顺序，也可以省略
3）line-height可以省略，如果不省略，必须跟在font-size后面
4）font-size、font-family不可以调换顺序，不可以省略
4.文本相关的样式
1.text-decoration
设置文字的装饰线
1）text-decoration: none; 无任何装饰线，可以去除a元素默认的下划线
2）text-decoration：underline; 下划线
3）text-decoration：overline; 上划线
4）text-decoration：line-through; 删除线
2.text-transform
设置文字的大小写转换
1）text-transform: lowercase; 每个单词的所有字符变为小写
2）text-transform: uppercase; 每个单词的所有字符变为大写
3）text-transform: capitalize; 每个单词的首字符变为大写
4）text-transform: none;
3.text-indent
设置第一行内容的缩进
1）text-indent: 2em; 缩进2个文字(1em = 当前标签的font-size的大小)
2）text-indent: 16px;
4.text-align
设置文本的对齐方式
1）text-align: left; 左对齐
2）text-align: center; 右对齐
3）text-align: right; 居中
4）有继承性
5）可以作用：文本；span标签、a标签（行内元素）；input标签、img标签（行内块元素）
5.元素的类型
1）块级元素
独占一行，宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高。
标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
2）行内元素
一行可以显示多个 ，并排显示，宽度和高度默认由内容撑开，不可以设置宽高。
标签：a、span 、b、u、i、s、strong、ins、em、del……
3）行内块元素
一行可以显示多个 ，并排显示（除并排显示之外，其它特性和块级元素一样）
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
标签：input、textarea、button、select……
6.盒子模型
1.内容区域
对于块级元素来说，如果没有设置宽度，宽度默认是父元素的100%
对于行内元素来说,如果没有设置宽度,宽度和高度是由内容撑起来的
对于行内元素来说,无法设置宽度和高度
2.padding内边距
写法1: 写一个值 上下左右
/* padding: 20px; */
写法2：两个值----上下 左右
/* padding: 10px 20px; */
写法3：三个值----上 左右 下
/* padding: 10px 20px 5px; */
写法4：四个值----上 右 下 左 顺时针
/* padding: 10px 20px 30px 40px; */
写法5:单独给一侧设置内边距
padding-top: 10px;
padding-bottom: 40px;
padding-left: 50px;
padding-right: 5px;3.border边框
边框宽度
/* border-width: 10px; */
边框颜色
/* border-color: red; */
边框的样式
/* solid 实线 dashed 虚线 dotted 点线 */
/* border-style: solid; */
混合写法 宽度 样式 颜色
border: 10px solid red;
给单独某一侧设置边框
/* 上下左右 top/bottom/left/right */
border-left: 5px solid yellow;
边框圆角 如果盒子是正方形,50%就是圆形
border-radius: 50%;
/* 值越大,圆角越大 */
border-radius: 10px;4.margin外边距
写法1：一个值 上下左右
margin: 20px;
写法2：两个值 上下 左右
margin: 30px 20px;
写法3：三个值 上 左右 下
margin: 30px 50px 20px;
写法4：四个值 上 右 下 左 （顺时针方向
margin: 100px 50px 120px 100px;
单独一侧设置
margin-left（left、right、top、bottom）
margin-left: 30px;
让块级元素水平居中
margin: 0 auto;
margin坍塌问题： 兄弟元素间margin最终的值是取大优先
父子元素间 解决1:给父级添加border
/* border: 1px solid red; */
常用:解决方案2:overflow: hidden;触发了一个BFC
overflow: hidden;
左浮动
解决方案3:给父元素或子元素设置浮动，触发一个BFC
/* float: left; */5.盒子阴影
阴影 x y z 阴影大小 颜色
x(左负右正) y(上负下正) z(越大越模糊)
box-shadow:h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) 模糊距离 阴影的大小 颜色
box-shadow: -10px 10px 15px 10px red;6.怪异盒模型
标准盒模型 默认
box-sizing: content-box;
怪异盒模型
box-sizing: border-box;
唯一区别:宽和高
标准盒模型/传统盒子模型 box-sizing: content-box;
在页面所占据的大小:
内容区域设置的宽度+左右padding+左右border+左右margin
怪异盒模型/新的盒子模型 box-sizing: border-box;
在页面所占据的大小:
内容区域设置的宽度(content+左右padding+border)+margin7.display属性
块级元素 display:block
行内元素 display:inline
行内块元素 display:inline-block
隐藏 display: none;
显示 display: block;7.定位方式
1.相对定位position: relative;
1）参考点：元素原本的位置
2）需要通过 left right top bottom 设置偏移量 要么使用一个，要么使用二个
3）相对定位的元素并没有脱标，原本的位置，还是被占用着
4）应用场景：A）局部位置调整 B）作为绝对定位的参考点(常用)
2.绝对定位position:absolute;
1)完全脱离标准文档流,不占据自身位置(完全脱标)
2)需要通过left right top bottom 设置偏移量 要么使用一个，要么使用二个
3)不设置参考点, 逐级往上找最终以body作为参考点
4)设置参考点, position:relative; position:fixed; position:absolute;
5)大部分情况下，设置参考点是通过 position:relative;(父相子绝)
6)大部分情况下，会把参考点设置到父元素上
7)通过z-index可以改变层叠顺序 值越大，越靠前
绝对定位让元素水平居中
position: absolute;
top: 50%;
left: 50%;
/* 元素自身宽高的一半 */
margin-left: -150px;
margin-top: -150px;3.固定定位position:fixed;
1)完全脱离标准文档流，叫脱标
2）需要通过 left right top bottom 设置偏移量 要么使用一个，要么使用二个
3）参考点是整个浏览器的视口
4）一个女盒子会直接变成男盒子,可以设置宽高
4.静态定位position:static;
HTML 元素的默认值，即没有定位，遵循标准文档流。表示块保留在原本应该在的位置，不会重新定位。不会受到 top, bottom, left, right影响
5.粘性定位position:sticky;
8.flex布局
四个概念：
容器:如果一个盒子设置了display: flex;那么这个盒子就叫容器(contain)
项目:容器中的直接子元素，叫项目(item)
主轴:项目默认就是在主轴上排列，默认主轴是水平从左向右的
交叉轴:和主轴垂直的那个轴，叫交叉轴。
作用:改变排列方式-沿着主轴/交叉轴排列
/* 沿着主轴排列 默认值 */
flex-direction: row;
/* 沿交叉轴排列 */
flex-direction: column;
/* 沿交叉轴排列 倒序*/
flex-direction: column-reverse;
/* 沿着主轴排列 倒序 */
flex-direction: row-reverse; 项目的总宽度>父级容器的宽度且不换行,每一个项目会进行压缩
/* 不换行(默认值) */
flex-wrap: nowrap;
/* 换行 */
flex-wrap: wrap;
/* 换行翻转 了解 */
flex-wrap: wrap-reverse;
混合写法
/* 第一个值:排列方式 column row column-reverse row-reverse */
/* 第二个值:换行 nowrap wrap */
flex-flow: column wrap;
flex-flow: row wrap;flex布局
display: flex;
/* justify-content作用:决定项目在主轴的排列顺序 */
/* 项目在主轴的起点开始排列 */
justify-content: flex-start;
/* 项目在主轴终点开始排列 */
justify-content: flex-end;
/* 项目在主轴中点开始排列 */
justify-content:center;
/* 富余空间在项目与项目之间 重要 */
justify-content: space-between;
/* 富余空间均匀环绕每个项目 中间是两侧的二倍*/
justify-content: space-around;
/* 富余空间均匀环绕每个项目 */
justify-content: space-evenly;
/* flex-wrap: wrap; */align-items决定项目在交叉轴的排列顺序
/* 项目在交叉轴的起点开始排列 默认 */
align-items: flex-start;
/* 项目在交叉轴的终点终点排列 */
align-items: flex-end;
/* 项目在交叉轴的中点开始排列 */
align-items: center;
/*了解 如果项目没有设置高度，项目会充满整个交叉轴 */
align-items: stretch;
/*了解 效果和stretch是一样的 */
align-items: normal;
/*了解 项目中文本基线对齐 */
align-items: baseline;决定主轴是多根还是一根，或者是决定项目是否换行
flex-wrap: wrap;
/* align-content决定多行项目在交叉轴上的对齐方式 */
/* 多根主轴在交叉轴的起点开始排列 */
align-content: flex-start;
/* 多根主轴在交叉轴的终点开始排列 */
align-content: flex-end;
/* 多根主轴在交叉轴的中点开始排列 */
align-content: center;
/* 交叉轴上的富余空间们于两排项目之间 */
align-content: space-between;
/* 交叉轴上的富余空间环绕两排项目之间 */
align-content: space-around;
align-content: space-evenly;项目属性：order
决定了 flex items 的排布顺序
可以设置任意整数（正整数、负整数、0），值越小就越排在前面
默认值是0 align-self
单独设置某个项目在交叉轴上的对齐方式
取值:
flex-start 在顶部
flex-end 在底部
center 在交叉轴
参照父级的高度flex-grow 左右定宽,中间自适应
<!-- 值越大,压缩的越厉害 -->
<div class="item" style="flex-shrink: 1;">one</div>
<div class="item" style="flex-shrink: 6;">two</div>
<!-- flex-basis: 200px; 指定一个项目在主轴上占据的大小 -->
<!-- flex-basis和width作用一样,都是设置宽度,flex-basis优先级更高 -->
<!-- flex后面跟一个值，这个值代表flex-grow -->
<!-- flex 是 flex-grow || flex-shrink || flex-basis 的简写,属性值可以指定1个，2个或3个值 -->9.浮动布局
1.目的：让块级盒子并排显示(同行左右布局的问题)。
实现浮动的方式：float：left(左浮动)/right（右浮动）
浮动的元素并没有完全脱离标准文档流(半脱标)
2.浮动元素的特点:
1）浮动元素脱标 （半脱离，有字围效果）
2）包裹性 如果没有设置宽度，浮动的元素宽度只会包裹内容
3）破坏性 如果子元素都浮动，都出国，父盒子如果没有设置高度，高度会变成0，就是所谓的 高度塌陷
3.清除浮动（清除对父级元素造成的影响）
1)给父级元素添加overflow: hidden;
2)加高法 给父级元素单独添加高度(用得不多,一个盒子的高度通常被内容撑起来)
3)内墙法 在父元素内部的最后面添加一个div,给这个元素设置clear: both属性
4)伪元素 说白了就是内墙法的改造 ::after
4.清除浮动（清除对兄弟元素造成的影响）：clear:both;
哪个元素受影响,就在那个元素设置clear: both;
