CSS3

一.概述
Cascading style sheets 层叠样式表
作用：
html:负责页面结构的搭建，内容的展示（数据的承载）
css:处理页面布局，美化页面
html的属性和css的使用原则
w3c规定，尽量使用css替代html的属性，如果无法替代，才使用html属性
html属性，代码没有可重用性，没有可维护性
css代码具备一定的可重用性和可维护性，
但是，css没有把代码重用做到极致，后期需要使用scss把可重用性做到极致
二.css语法规范
1.使用css的方式
①内联样式，行内样式
在元素的style属性，编写css样式，修饰当前元素
color:red; 设置标签中文本的颜色
font-size:30px; 设置标签中字号大小
background-color: yellow; 设置标签的背景颜色
<标签 style="样式声明;样式声明;样式声明.......">
特点：不能重用，代码没有可维护性
内联样式在项目中基本不用，只在学习和测试的时候使用
②内部样式
在head标签中，编写style标签，在style标签中，通过选择器，编写样式声明
选择器：就是一条件，页面中符合这个条件的标签应用当前样式



特点：本页面中，可以重用，其它页面失效
项目中，少用内部样式，在学习和测试中大量使用
③外部样式
单独创建一个css文件，编写样式
在html中head标签中，使用link标签导入

特点：样式可以在多个页面重用，项目中使用非常多
练习
01_ex.html
h1..lorem 内联样式，背景色为pink，字体为yellow， 24px
h2..lorem 内部样式，背景为yellow 字体为purple 30px
h3..lorem 外部样式 背景purple 字体#006699 40px
通过外部样式编写h2 背景black 字体green 字号60px
2.css样式特征
①继承性
父元素的样式，作用到子元素身上
关注文本样式的继承性
特殊， a标签，不继承祖先元素的文本颜色
按钮，不继承祖先级文本颜色和字号大小
②层叠性
为一个元素设置多次样式，样式不冲突的时候，都会应用到元素上
如果冲突了，就按照优先级显示
③默认优先级
最高 内联样式
内部和外部样式，就近原则
最低 浏览器默认样式
④改变css优先级
!important 写在值与分号之间
该属性值直接获取最高优先级
!important和内联样式的关系
!important比内联高
内联样式中，不允许使用!important
练习
02_ex.html
一个p标签，内容假文
用内部样式设置文本颜色blue,字号24px
外部样式 red 40px
将外部样式引入，改变link与style的位置，f12观察效果
给p标签设置内联样式文本颜色purple ,50px
给任意属性添加!important改变其优先级，f12观察效果
三.基础选择器(重点)
1.选择器的作用
规范了页面中哪些元素可以使用定义好的样式
选择器就是一个条件，符合这个条件的元素都应用此样式
2.选择器
①通用选择器
{
样式声明；
}
所有元素都应用此样式，但是由于效率极低，我们很少使用*
*{margin:0;padding:0} 所有元素清空内外边距---样式重置，css reset
②元素选择器，标签选择器
定义页面中某种元素的公共样式
div{样式声明}
p{样式声明}
③ID选择器，专属定制
只有符合id值的元素可以使用此样式

id值{样式声明；}

④类选择器
<元素 class="类名1 类名2 类名3....">
.类名1{样式声明;}
类名格式，不能以数字开头，只能包含- _
见名知意
类选择器的分支
1.多类选择器
.类名1.类名2{样式声明}
匹配同时引用了类名1和类名2的元素
2.分类选择器
元素选择器.类名{样式声明}
匹配了引入了这个类名的，这个元素
⑤群组选择器
用逗号隔开选择器，写一组
选择器1,选择器2,选择器3.......{样式声明；}
相当于
选择器1{样式声明；}
选择器2{样式声明；}
选择器3{样式声明；}
⑥后代选择器
通过祖先元素匹配后代元素
选择器 选择器 选择器{样式声明}
通过后代关系匹配元素
⑦子代选择器
通过父元素匹配子元素
选择器>选择器>选择器{样式声明}
注意，子代选择器和后代选择器可以混写
⑧伪类选择器
匹配元素在某个状态下的样式
只对a标签生效
:link链接没有访问过的状态
:visited链接被访问过的状态
对所有元素生效
:hover鼠标悬停在元素上的状态
:active元素被激活的状态
对按钮，文本框生效
:focus 元素获取焦点时的状态

练习：01_ex.html

一个a标签
访问后，文本颜色orange
被激活时，文本颜色green
鼠标悬停 red
未被访问 pink
当上述4种伪类作用到一个元素上时，需要按照一定顺序编写，所有效果才能都实现
爱恨原则 love & hate
:link : visited :hover :active
一个div，内容假文
使用id选择器，设置文本为red,背景为yellow
使用元素选择器，设置文本为blue,背景为pink
写完打开f12，观察问题
对就近原则产生了疑问！！！
9.选择器的权值问题
每种选择器都自带权值，权值就是选择器的重要程度
权值越高，优先级越高
!important >1000
内联样式 1000
id选择器 100
类选择 10
伪类 10
元素选择器 1
*通用 0
继承的样式 无

总结：
1.当一个选择器中含有多个选择器时，需要将每个选择器的权值进行相加
权值大的优先显示
2.如果权值相同，按照就近原则显示
3.一旦添加了!important，直接获取最高权值
4.群组选择器，每个逗号之间的选择器权值单独计算
5.选择器权值的计算，不能进位(不能超过本身的数量级)

四.尺寸和边框
1.尺寸属性
width:
height:
min-width
max-width
min-height
max-height
附加知识点,尺寸单位
1.css中，只有0可以不加单位，其它尺寸都要添加单位
2.px 像素
3.in 英寸 1in=2.54cm
4.pt 磅值 1pt=1/72in
5.cm
6.mm

---

7.% 找父元素尺寸的百分比
但是当父元素是body的时候，body高度默认为无限，元素高度不能用百分比
8.em 以父元素的取值为一个基本单位 1em=父元素的取值
9.rem 以html的取值为一个基本单位 1rem=html的取值
页面中默认1rem=16px
2.html中允许设置尺寸的元素
块级元素
行内元素
行内块
设置尺寸有效
设置宽高无效
设置尺寸有效
默认宽，父元素宽度100%
不设置高度，默认高度
①没有内容，高度为0
②有内容，高度正好被内容撑开
默认宽高靠内容撑开
浏览器会分配默认尺寸给行内块
问题，不同浏览器给行内块默认分配的尺寸，差异较大
这里一定统一
3.溢出的处理
容器较小，内容较大，就会发生溢出效果
默认情况下，溢出是纵向的
overflow: visible; 默认值，溢出部分显示
hidden 溢出部分隐藏
scroll 不管是否溢出，都显示x,y轴的滚动条
auto 溢出的时候才在溢出方向添加滚动条
overflow-x: scroll;
verflow-y: scroll;单独设置x轴和y轴的滚动条
注意：溢出底层原理很复杂，由于这个原理，溢出可以解决很多css的特殊情况
这些解决方案都不是主流方案
附加知识点，颜色取值
1.颜色的英文单词
2.#跟着6个数字(16进制)，每两个数字一个色段，rgb

ffffff #000000 #ff0000 #00ff00 #0000ff

3.#rrggbb 简写为 #rgb

000 #fff #f00 #ff0 #0f0 #00f #f0f #0ff

4.用10进制表示rgb
rgb(r,g,b); 取值为 0~255
5.rgba(r,g,b,a) a:alpha 透明度 0全透明 1不透明
6.全透明的英文单词 transparent 相当于rgba(0,0,0,0)
4.边框
①边框的简写方式
border:width style color;
width 边框宽度 px rem
style 边框样式 solid 单实线
dotted 小圆点的虚线
dashed 短线的虚线
double 双实线
color 边框颜色
注意：1.css中所有的简写，都要对应最简方式 border:style;
2.去除边框 border:none/0;
②单边的定义
单独设置某一条边的样式
border-top/right/bottom/left:width style color;
去除某一条边的边框 border-top/right/bottom/left:0;
③单属性的定义
单独设置4个方向的某一个边框属性
border-style:
border-width:
border-color:
④单边单属性的定义
定义某一个方向边框的某一个属性
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
5.倒角
把元素的直角倒成圆角
border-radius: 圆角的半径
px rem
% 50%就是一个圆
单角的定义
border-top-left-radius: 20%;
border-top-right-radius:80%;
border-bottom-left-radius: 80%;
border-bottom-right-radius:20%;
6.边框阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow 阴影水平偏移量
v-shadow 垂直偏移量
blur 模糊程度
spread 大小
color; 颜色
inset 内部阴影
7.轮廓
环绕在边框外圈的一条线，轮廓不占页面空间
outline：width style color;
outline:0;
五.框模型
盒子模型---------所有元素皆为框
所有元素在页面上都占据空间，计算元素在页面占据空间的公式

图片10.png

我们更关注宽度，因为页面宽度是有限的，高度无限的
margin 外边距，边框以外的距离
padding 内边距，边框到内容区域之间的距离
1.margin
在f12中显示为橘黄色
改变margin,元素在页面发生位移效果
margin:v1; 同时设置4个方向外边距
margin-top
margin-right
margin-bottom
margin-left
向让本元素位移，就只能修改上外边距和左外边距
右外边距和下外边距不会让本元素位移，之后让后续离自己远一点
在f12中显示为橘黄色
改变margin,元素在页面发生位移效果
margin:v1; 同时设置4个方向外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
取值：px/rem
%,父元素宽度的百分比
auto 对上下外边距无效
让当前元素(块级,表格)在父元素中，水平居中
向让本元素位移，就只能修改上外边距和左外边距
右外边距和下外边距不会让本元素位移，之后让后续离自己远一点
margin:v1; 同时设置4个方向外边距
margin:v1 v2; 上下 左右 margin:0 auto; margin:100px auto;
margin:v1 v2 v3; 上 左右 下 margin:10px auto 20px;
margin:v1 v2 v3 v4; 上右下左
margin的使用场合：
①改变元素在页面位置的时候使用
②元素与元素之间的距离
2.外边距引发的特殊效果
①外边距的合并
两个垂直外边距相遇时，会合并成一个，最后的取值以数值大的为准
解决方案：1.设计页面的时候规避
2.只给一个元素写外边距
②关于块级元素，行内，行内块元素的完整总结
块级 行内 行内块
设置宽高有效 设置宽高无效 设置宽高有效
默认宽，父元素100%
默认高，靠内容撑开 宽高靠内容撑开 不同浏览器分配不同的默认宽高
独占一行 与其它行内行内块共用一行 与其它行内行内块共用一行
4个方向外边距都有效 上下外边距无效 4个方向外边距有效
改变上外边距，会带着同一行其它行内，行内块元素一起移动
③自带外边距元素
*{margin:0;padding:0}
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,
input,legend,li,ol,p,pre,td,textarea,th,ul
body 外边距8px
ul 上下16px外边距 左内边距40px
④外边距的溢出
在特殊情况下，子元素的上外边距会作用到父元素上
特殊情况：1.父元素没有上边框
2.父元素内容区域的上沿和子元素内容区域的上沿重合
解决方案：1.给父元素添加上边框,但是元素实际占地高度增加了
2.给父元素添加上内边距,但是元素实际占地高度增加了
3.给父元素设置overflow：hidden/auto
但是，子元素就不能溢出显示了
4.给父元素添加一个大儿子，必须是空table

3.内边距
边框到内容区域之间的距离
margin在页面中是透明的，f12是橘黄色，改变元素的位置
padding 在页面中是元素背景色，f12是绿色，感觉上改变元素大小，实际改变内容区域的位置
padding:v1; 同时设置4个方式内边距
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4; 上右下左
padding-top
padding-right
padding-bottom
padding-left
注意，padding的取值 px/rem/% 没有auto
padding的使用时机
1.把元素撑开

2.改变内容区域的位置，感觉上是元素位移(元素并没移动)
4.改变盒子模型的计算方式
默认的盒子模型：
左外边距+左边框+左内边距+内容区域宽度距+右内边距+右边框+右外边
box-sizing: content-box;
改变盒子模型计算方式
box-sizing:border-box;
我们设置的尺寸，是border以内的范围尺寸
导致盒子模型公式，左外边距+width+右外边距
当前元素，不改变外边距，元素大小不会变化
使用场合，一般使用百分比定义宽度的元素，都添加border-box
六.背景
1.背景颜色
background-color:背景颜色
2.背景图片
background-image:url(路径);
3.背景图片的平铺
容器大，背景图尺寸小，会在x轴和y轴重复的显示背景图片
background-repeat: repeat; 默认值，平铺
no-repeat; 不平铺
repeat-x x轴平铺
repeat-y y轴平铺
4.背景图片的定位
background-position:x y;
①px为单位的数字 background-position: 100px 20px;
②% background-position:20% 50%；
③关键字 background-position:left top;
x：left/center/right
y:top/center/bottom
注意：background-position:支持只取一个值。只设置x轴位移，y轴默认是居中
5.背景图片的大小
background-size:x y
①x px ypx 以px为单位的数字
②x% y%
注意，background-size:只取一个值，同时设置x轴和y轴
③cover 覆盖，图片等比缩放，充满整个容器，但是会导致图片显示不全
④contain 包含，图片等比缩放，让容器显示完整的图片，但是会导致容器有大量空白
6.背景的简写方式
background：color img repeat position;
注意：1.没有要求编写顺序
2.简写方式中，没有size
3.最简方式 background:color/img
七.渐变 gradient
渐变是指多种颜色，平缓变化的效果，让显示效果更有质感
色标，一种颜色，以及这种颜色出现的位置
一个渐变至少2个色标
渐变使用background-image:属性设置
渐变分类
①线性渐变
②径向渐变
③重复渐变
1.线性渐变
通过直线的方式填充渐变色
background-image: linear-gradient(方向,色标1,色标2..........);
方向:取值1.用关键字表示终点 to top ↑
to right →
to bottom ↓
to left ←
2.角度 45deg
色标：颜色 位置； 位置可以取值%/px
不写位置，只写颜色，那么颜色会自动凭据分配
2.径向渐变
3.重复渐变

样式编写思路
1.找到要编写样式的元素
从外往里，从左往右，从上往下
2.编写样式的步骤
①尺寸，大体位置
②背景，边框
③文本
④微调

1.线性渐变
通过直线的方式填充渐变色
background-image: linear-gradient(方向,色标1,色标2..........);
方向:取值1.用关键字表示终点 to top ↑
to right →
to bottom ↓
to left ←
2.角度 45deg
色标：颜色 位置； 位置可以取值%/px
不写位置，只写颜色，那么颜色会自动凭据分配
2.径向渐变
以圆的方式，填充渐变色
background-image: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2........);
半径 px/rem
圆心 px/rem/%/关键字 x:left/center/right y:top/center/bottom
色标 颜色 位置 位置：%是半径的百分比
px是一个绝对值，不会随着半径变化而改变
3.重复渐变
把一个渐变效果反复的执行
①重复的线性渐变
background-image: repeating-linear-gradient(45deg, #993399 0%,#669999 1%,#993399 2% );
把写好的色标，反复的执行
②重复的径向渐变
background-image: repeating-radial-gradient(100px at center center,
#000 0%,#993399 1%,#000 2%);
4.浏览器的兼容问题
低版本浏览器没有渐变属性(ie8以下)
前置，内核
-webkit- chrome/safari
-ms- ie
-moz- firefox
-o- opera
注意，线性渐变，不添加前缀，方向使用终点 to right
添加前缀，方向一定要使用起点 left
八.文本的格式化
1.字体属性
①字号大小
font-size: px/rem/pt
②字体类型
每台设备需要下载对应的字体库，才能有字体类型
字体类型取值如果带空格，建议使用双引号包裹
另外，可以用逗号连接多个字体系列，确保客户端一定有对应字体能使用
font-family: "Poiret One",chiller,"mv boli";
③字体加粗
font-weight:
关键字和数字(必须是100的整倍数，最大值为1000)
lighter 细 300
normal 普通 400
bold 加粗 600
bolder 比粗更粗 700
④字体样式
font-style: normal;
italic
⑤小型大写字母
font-variant:small-caps
⑥简写方式
font:style varian weight size family;
总结：1.顺序有要求
2.最简方式 font:size family;
2.文本属性
①文本颜色
color:
文本颜色可以被继承，但是a标签，按钮不会继承
②文本的水平对齐方式
text-align:left/center/right/ justify
margin:0 auto;和text-align:center;
margin:0 auto;让块级元素和table水平居中，让元素本身水平居中
text-align:center; 让内部的文本，行内，行内块水平居中
总结：块级和table想水平居中，使用margin:auto
文本，行内，行内块想水平居中，给父元素写text-align:center;
③行高
当行高取值大于等于字号，那么文本默认会在行高的范围内，垂直居中显示
line-height: 200px;
不带单位的数字，代表着字号的倍数
很多时候，我们会把行高设置为容器高度，让文本在容器内部垂直居中显示
这个方法，只能应用单行文本
④文本线条修饰
text-decoration: underline;下划线
overline 上划线
line-through 删除线
none; 去除所有线条，a标签去除下划线
⑤首行缩进
text-indent: 50px;
⑥文本阴影
text-shadow:h-shadow v-shadow blur color;
h-shadow 水平偏移量
v-shadow 垂直偏移
blur 模糊程度
color 阴影颜色
练习
03_EX.HTML
div中一段文本，有中文有英文
1.设置4个字体系列 2.文本大小
3.加粗并斜体 4.小型大写字母
5.两端对齐， 6.有下滑线 7.首行缩进50px
8.文本垂直居中 9.有文本阴影
九.表格的属性
1.表格的常用属性
table 尺寸，边框，背景，文本，内外边距都有效
td/th 尺寸，边框，背景，文本，内边距都有效，外边距无效
td/th的属性---->内部文本垂直对齐方式 vertical-align: top/middle/botom;
2.表格的特有属性
①表格边框的合并
border-collapse: separate; 默认值，边框分离状态
collapse 边框合并
②边框之间的距离
边框必须是分离状态border-collapse: separate;
border-spacing: px
③标题的位置
caption-side: top/bottom;
④表格显示规则
表格自动的布局 table-layout: auto;
表格尺寸，如果设置的尺寸小，内容大，以内容为准
如果设置的尺寸大，内容少，以尺寸为准
渲染效率低，必须在渲染之前把所有表格内容读取进缓存
表格固定布局 table-layout: fixed;
无论内容多大，都以设置的尺寸为准
渲染效率高，不需要读取缓存，和正常元素一样渲染
十.定位（重要************************************）
1.什么是定位，改变元素在页面中的位置
2.定位的分类
①普通流定位
②浮动定位
③相对定位
④绝对定位
⑤固定定位
3.普通流定位
每个元素都占据页面空间，前面元素失去位置，要上前补位
行内和行内块，从左往右排列，一行放不下换行
块级元素从上往下排列
默认文档流定位
4.浮动定位
就让块级元素横向显示
float:left 元素浮动后向左边对齐
right 元素浮动后向右边对齐
none 元素不浮动
浮动的特点
1.元素一旦浮动，脱离文档流(元素不占页面空间，后续元素上前补位)
2.元素浮动以后，会停靠在父元素的边缘，获取其它已浮动元素后面
3.一行显示不下所有的浮动元素，显示不下的会自动换行
5.浮动引发的特殊情况
①浮动元素占位问题
浮动元素，会在浮动方向上占据位置，不让后续浮动元素占据
②元素脱离文档流会发生的问题
1.元素不占页面空间
2.后续元素上前补位
3.脱离文档流元素如果没有定义宽度，浮动之后，宽度靠内容撑开
4.脱离文档流元素，会变成块级(可以设置尺寸，上下外边距有效)
③文本，行内，行内块不会被浮动元素压在下面，而是巧妙的避开
6.清除浮动
清除之前浮动元素带来的影响-----------之前浮动元素脱离文档流，当前元素上前补位
清除这个影响，就是不上前补位
clear：left/right/both
7.高度坍塌
发生的原因：
父元素不设置高度，靠内容撑开
所有子元素都脱离文档流---->父元素认为内部没有孩子占空间，就失去高度了
解决高度坍塌
①给父元素设置高度，项目中经常使用的方式
但是，有前提，必须提前知道子元素的个体高度，和子元素具体个数
②父元素也浮动，会影响同级其它元素，也会影响自己的父元素
③给父元素设置overflow:hidden/auto
父元素就不能够完成溢出显示的操作了
④给父元素追加一个块级的小儿子
这个块级的小儿子不设置高度，没有内容，添加clear:both
十一.其它常用样式属性
1.显示效果
visibility: visible; 默认值，显示
hidden 隐藏，不脱离文档流的隐藏
2.显示方式
设置元素按照块级，行内，行内块，表格等规则显示
display: block;块级
inline；行内元素
inline-block；行内块元素
table； 表格类型元素
none 脱离文档流的隐藏
visibility:hidden和display:none的区别
visibility:hidden 隐藏但是占据位置
display:none 不占位置的隐藏
3.透明度
rgba(r,g,b,alpha);
opacity: .3; 0纯透明1不透明
区别
rgba 只会让当前颜色变透明
opacity 会让元素本身，以及后代元素所有与颜色相关的属性都透明
4.垂直对齐方式
vertical-align:
①td/th 控制文本的垂直对齐方式 top/middle/bottom
②行内块 控制自己前后文本，行内，行内块与自己的垂直对齐方式 top/middle默认值/bottom
③img控制自己前后文本，行内，行内块与自己的垂直对齐方式top/middle/bottom/ baseline默认
5.光标的设置
光标只能调用主机系统的光标
cursor: default; 箭头
pointer 小手
wait 等待
help 帮助
text 文本
crosshair 截图十字
6.列表的样式
list-style-type: 设置列表项标识
disc;
circle
square
none
list-style-image: url(路径); 设置列表标识为图片
list-style-position:列表标识项的位置
outside;在ul左内边距中，不在li内部
inside； 在li中
简写方式 list-style:type/image position;
最简方式list-style:none;
十二.相对定位，绝对定位，固定定位
position:static; 默认值，静态，默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
注意：
1.一个元素被position修饰，并且取值为relative/absolute/fixed其中一种时
这个元素被称为已定位元素
2.当元素变为已定位元素时，会解锁4个偏移属性 top/right/bottom/left
会解锁堆叠属性 z-index
1.相对定位
position: relative; 配合偏移属性使用
①不脱离文档流----如果相对定义不写偏移属性，页面效果跟没写定位是一样的
不会影响页面其它元素
②相对定位以元素本身位置为参照在位移
使用场合：1.类似于margin做位置的微调
2.子绝父相
细节：top和bottom冲突，以top为准
left和right冲突，以left为准
2.绝对定位
position: absolute; 配合偏移属性
①绝对定位脱离文档流
②绝对定位的参照物是谁？
1.绝对定位元素如果祖先级没有已定位元素，相对于body左上角做偏移
2.绝对定位元素如果祖先级有已定位元素，
绝对定位元素会相对于 最近的 已定位的 祖先级元素 左上角做偏移
3.一般情况下使用相对定位当做已定位的祖先级元素
3.固定定位
position:fixed; 永远以body为参照物
把元素固定在页面的可视区域，不会随着滚动条滚动发生位置变化
脱离文档流
4.堆叠顺序
默认堆叠顺序，后写的元素堆叠顺序高（html编写顺序）
z-index: 默认值0 一般取值范围在-1000+1000，逻辑上最大取值21亿多
特点：
1.只有已定位元素可以设置z-index
2.不设置，默认值为0，后写的元素压着先写的元素
3.浮动和定位的堆叠顺序
浮动不能设置堆叠顺序 小于0 大于-1
4.父子元素的堆叠顺序，儿子永远压着父元素
CSS3 CORE
一.复杂选择器
1.兄弟选择器
兄弟元素：具备同一个父元素的同级元素
兄弟选择器只能通过哥哥找弟弟，往后找，不能往前找
①通用兄弟选择器
选择器1~选择器2{}
匹配选择器1后面所有符合选择器2的元素
②相邻兄弟选择器
选择器1+选择器2{}
匹配选择器1后面紧紧挨在一起的符合选择器2的元素
练习
白月光与朱砂痣---h4 h4+div{margin-top:30px}
div---白月光在照耀 div+div{margin-top:15px}
div---你才想起她的好
div---朱砂痣久难消
div---你是否能知道
标题与正文之间30px
每个正文之间15px
2.属性选择器
通过元素的属性来匹配元素 attr-->属性名 value-->属性值
[attr]{} 匹配具备attr属性的元素
[attr1] [attr2]...{ }匹配同时具备attr1，attr2属性的元素
elem[attr] [attr]{} 匹配具备attr属性的elemy元素
[attr=value]{} 匹配具备attr属性并且值为value的元素
elem[attr=value] [attr=value]{}
模糊查询
[attr=value]{}匹配attr属性值中包含value的元素
[attr^=value]{} 匹配attr属性值以value开头的元素
[attr$=value]{} 匹配attr属性值以value结尾的元素
[attr~=value]{}匹配attr属性值中包含value这个独立单词的元素
独立单词-->value前后有空格
3.伪类选择器
:link :visited :hover :active :focus
伪类选择器 使用单冒号开头
伪元素选择器 使用双冒号开头
①目标伪类
匹配被激活的锚点的样式
:target{}
②结构伪类
通过html结构关系，匹配元素
selector :first-child{} 匹配selector父元素的第一个儿子，这第一个儿子必须符合selector
selector :last-child{} 匹配selector父元素的最后一个儿子，这小个儿子必须符合selector
selector:nth-child(n){} 匹配selector父元素的第n个儿子，这儿子必须符合selector
n从1开始计数
练习04_ex.html
一个4行4列的表格，200px200px; 有边框
第一行背景色为#ffa
最后一行背景色为#ff0
第三行第二列背景色为#f0f
③:empty
绝对的丁克
selector:empty{} 匹配selector同时这个元素内不能有其它任何元素
④:only-child
匹配属于其父元素的唯一子元素（匹配是独生子女的元素）
selector:only-child{}
⑤否定伪类:not
:not(selector){} 符合selector的元素都不要，相当于取反
4.伪元素选择器
伪类选择器修饰的样式，是作用于整个元素
伪元素选择器编写的样式，作用于这个元素的一部分
::first-letter :first-letter 修饰首字符
::first-line :first-line 修饰首行字符
::selection 修饰用户选中的字符样式，只能修饰字体颜色，背景色
5.内容生成
使用css动态的改变html结构
::before{content:} 在当前元素的内容区域的最前面，添加一个行内元素，使用content添加内容
可以给这个伪元素添加任何样式
::after{content:} 在当前元素的内容区域的最后前面，添加一个行内元素
注意:after 和:before 也能生效，不推荐
6.内容生成的使用场景-------背诵代码
①外边距溢出

d3::before{

content: "";
display: table;
}
②使用内容生成，解决高度坍塌
05_ex.html
.clearfix::after {
display: block;
clear: both;
content: "";
}
二.弹性布局（重要程度*******************************************************************）
1.什么是弹性
弹性，主要解决某个元素中，子元素的布局方式
弹性布局优点，可以十分特别灵活的控制子元素的排列方向和排列状态
2.弹性布局的概念
①弹性容器
设置了display:flex
的元素，称为弹性容器，注意弹性容器本身并不是弹性布局
②弹性项目
设置了display:flex的元素的子元素们，真正应用弹性布局的元素们
③主轴--代表一个方向
弹性项目们的排列方向
主轴是x轴，主轴起点是左侧 →
主轴是x轴，主轴起点是右侧 ←
主轴是y轴，主轴起点是顶部 ↓
主轴是y轴。主轴起点是底部 ↑
④交叉轴
永远与主轴垂直的一个方向
3.语法
给父元素设置display:flex/inline-flex;
flex:让块级元素变成容器
inline-flex:让行内元素变成容器
父元素变成弹性容器，子元素变成弹性项目
当父元素变成弹性容器之后，弹性项目的上下左右对齐方式，只能使用弹性属性和margin控制
项目的float失效
容器的text-align失效
4.容器属性（父元素的属性）
控制所有的儿子们
①主轴方向
flex-direction: row;
row 默认值 →
row-reverse ←
column ↓
column-reverse ↑
②设置项目换行
当主轴空间不足，项目是否换行
flex-wrap:nowrap ; 默认值，不换行，项目会在主轴方向上压缩
wrap； 换行
③上面两个属性的简写方式
flex-flow: direction wrap;
④设置项目们在主轴上的对齐方式
justify-content: flex-start; 默认在主轴起点对齐
flex-end 主轴终点对齐
center 主轴中间对齐
space-between 两端对齐
space-around 每个项目左右空间一样大
⑤设置交叉轴上的对齐方式
align-items: flex-start; 默认值，交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴中间对齐
baseline 项目中文本的基线对齐
stretch 如果项目在交叉轴方向上没有尺寸，项目充满交叉轴

5.项目属性（子元素的属性）
控制某一个儿子