CSS概述
1.什么是css
css:cascading style sheets
层叠样式表，级联样式表，简称为样式表
2.css作用
设置html网页中元素的样式
3.HTML与css的关系
html：负责网页的搭建，内容的展示(素颜)
css:负责网页的修饰。(亚洲四大邪术)
对于元素样式的修饰，W3C建议使用css而不用html的属性
html的属性，代码不能重用，没有可维护性
二.CSS的语法规范
1.使用css的方式
①行内样式(内联样式)
将css的样式写在元素的style属性中
color:red； 字体颜色
background-color：yellow;背景颜色
font-size:32px; 字号大小
语法
<any style="样式声明"></any>
样式声明 由样式属性和样式值组成
样式属性:值;
内联样式不能重用
内联样式优先级最高
在项目中，基本不用，只有在学习和测试中使用
②内部样式
在head标签中，使用<style>定义内部样式
语法:
<head>
<style>
选择器{样式声明;样式声明;}
选择器{样式声明}
</style>
</head>
选择器就是页面能够使用当前样式的条件
div{} p{} img{} span{}
总结：内部样式，只能在本页面重用
内部样式在项目中用的少，主要用于学习和测试
③外部样式
单独创建一个.css文件，在html文件中的head标签里
使用link标签引入这个css文件
<link rel="stylesheet" href="my.css">
其中rel属性必须写，不写就不生效
项目中大批量的使用外部样式，但是，学习中用的少
2.css样式的特性
①继承性
大部分的css效果是可以直接被子元素继承的
必须是有层级嵌套关系的元素，才能继承。孩子继承父亲。
a标签的字体颜色，是不继承的
②层叠性
可以为一个元素定义多个样式
如果样式属性不冲突的时候，可以同时作用到这个元素上
③优先级
当样式属性冲突时，根据优先级去应用样式。
默认优先级，有高到低
1.内联样式
2.内部样式和外部样式，使用就近原则
3.浏览器默认样式
解释型语言---代码逐行从上往下运行，后执行会覆盖之前执行的
④调整优先级
!important 规则
h2{color:red !important;}
写在值和；之间，前面要有空格
意义，我这个值是最重要的，其它的值不要覆盖我
如果有多个!important;，那么还是遵循就近原则
三.基础选择器（重点*****）
1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式
选择器就是一个条件，符合这个条件的元素，可以应用这个样式
2.选择器详解
①通用选择器
*{样式声明}
*{margin:0;padding:0} 所有元素内外边距清0
如果取值为0，可以省略单位
②元素选择器，标签选择器
div{color:red;}
页面中所有对应元素，都应用这个样式
设置页面中某种元素的默认样式
ex:p{} img{} span{}
特殊用法：body{margin:0;padding:0;}
body以及body内的元素，都会内外边距清0
③id选择器，专属定制
只对当前页面，一个元素生效
<any id="id值"></any>
#id值{}
总结：一般id选择器在项目中很少单独使用，通常会作为子代选择器和后代选择器一部分。
④类选择器
定义页面上某个或者某类元素的样式
是一个公共样式，谁想使用，就用class调用一下
声明类选择器
.类名{样式声明}
类名的特点
1.必须有点
2.类名不能以数字开头
3.只能使用- _两种符号
引用类名
<any class="类名"> 引用时，没有点
特殊用法
1.多类选择器
一个元素引用多个类选择器
<any class="类名1 类名2 类名3 .....">
2.分类选择器
更精准的确定使用这个样式元素
增加了选择器的权值？？？坑
①.类名1.类名2{}
匹配同时引用类名1，和类名2的元素
<div class="font36 text-danger">Lorem</div>
.font36.text-danger{
font-style:italic;
}
②元素名.类名{}
h4.font36{background-color:red;}
<h4 class="font36">Lorem amet.</h4>
匹配引用了font36这个类的h4元素
5.群组选择器
将多个选择器放在一起，定义公共样式（选择器之间使用,连接）
选择器1，选择器2，选择器3........{样式声明}
6.后代选择器
通过元素的后代关系匹配元素
后代关系：一级嵌套或者多级嵌套
语法: 选择器1 选择器2 选择器3....{样式声明}
7.子代选择器
子代关系：就是一级嵌套关系
语法：选择器1>选择器2>....{样式声明}
子代选择器和后代选择器可以混写
div>p span{background-color:purple;}
8.伪类选择器
匹配元素不同状态的选择器
伪类选择器，都是以:开头
1.匹配未访问的链接
选择器:link{样式声明}
2.匹配访问后的链接
选择器:visited{样式声明}
3.鼠标悬停
选择器:hover{样式声明}
4.元素激活状态，鼠标按住元素不抬起
选择器:active{样式声明}
练习：
一个a标签，href是未访问
1.访问过后，文本颜色orange
2.被激活时，文本颜色green
3.鼠标悬停，文本颜色red
4.未访问是，文本颜色pink
以上4个伪类同时作用在一个元素上时，需要有严格编写顺序
爱恨原则 love & hate :link :visited :hover :active
:focus 匹配获取焦点元素状态
⑨选择器的权值问题
选择器默认自带权值，权值越高，优先级越高
!important >1000
内联样式 =1000
id选择器 =100
class和伪类 =10
元素选择器 =1
*通用选择器 =0
继承的样式 无权值
权值的总结
1.当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后比较，权值大的优先显示
2.权值相同，就近原则
3.群组选择的权值，单独计算，不能相加
4.样式后面添加!important，直接获取最高优先级
内联样式不能添加!important
5.选择器权值的计算，不会超过自己的最大数量级
100个元素(1)选择器相加，不会大于10
四.尺寸和边框
1.尺寸属性
①作用
设置元素的宽度和高度
②属性
width:宽度
max-width:最大宽度
min-width:最小宽度
height：高度
max-height:
min-height
取值：px为单位的数字和父元素的%比
注意，如果不写宽高，各个元素默认的宽高是多少？
1.块级元素不写宽，默认宽度占满父容器宽度100%
2.块级元素不写高，默认高度靠内容撑起来
3.行内元素，设置宽高无效。它的宽高靠内容撑起。
4.自带宽高属性的元素，设置宽高有效（img,table）
附加知识点1.单位
单位：
px 像素
in 英寸 1in=2.54cm
pt 磅值 1pt=1/72in 多用于设置字体大小
cm 厘米
mm 毫米
项目中，为了页面可以在pc pad phone都正常显示
我们一般会使用相对单位
em 以父元素的数值当做基本单位
rem 以html的数值当做基本单位
%
2.溢出处理
当内容较大，元素区域较小的时候，就会发生溢出效果
默认是纵向溢出
overflow:
取值：visible 默认值，溢出部分可见的
hidden 溢出部分隐藏
scroll 不管是否溢出，x和y轴方向都添加滚动条
auto 只有溢出才有滚动条，不溢出没有
overflow-x 设置水平轴滚动条
overflow-y 设置垂直轴滚动条
如何设置成横向溢出
内部容器，设置宽度，大于外部容器的宽度
附加知识点，颜色合法值
1.颜色的英文单词 red
2.#rrggbb 6位16进制的数字 代表rgb 每一位0~ff 0~255
3.#aabbcc--->#abc #ff0000--->#f00
常用颜色 #f00 #0f0 #00f #ff0 #0ff #f0f
#ddd #666 #333 #e8e8e8
4.rgb(r,g,b) 十进制 r,g,b 0~255
5.rgba(r,g,b,alpha) alpha0~1
6.hsl 不记
3.边框
①边框的简写方式
border:width style color;
border:2px solid red;
style：solid 实线
dotted 点点虚线
dashed 断线虚线
double 双实线
color：合法的颜色值和transparent[等同于全透明]
最简方式
border:style;
②边框的单属性定义
border-color:
border-style:只要写了style属性，就会显示边框
border-width:
③单边定义
border-top:width style color;
border-right
border-bottom
border-left
④单边的单属性定义
border-*-color
border-*-width
border-*-style
*:top/right/bottom/left
3.边框的倒角(圆角)
border-radius:
取值：以px为单位的数字
% 50%是一个圆形
单角设置
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
4.边框的阴影
box-shadow:
取值：h-shadow v-shadow blur spread color inset;
h-shadow 水平方向的阴影偏移
v-shadow 垂直方向的阴影偏移
blur 阴影模糊距离
spread 阴影尺寸
color 阴影的颜色
inset/outset 设置内部阴影和外部阴影
5.轮廓
在边框外围的一圈线条，被称为边框的边框
outline:width style color;
去除轮廓，去除边框
border:none/0;
outline:none/0;
五.框模型，盒子模型
元素在页面上实际占地空间的一种计算方式
浏览器默认元素实际占地宽度=
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
浏览器默认元素实际占地高度=
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
外边距margin：边框以外的距离，元素与元素之间的距离
内边距padding：边框与内容区域之间的距离
1.外边距margin
margin:v1;设置上右下左4个方向外边距
改变margin，元素有位移效果。
在页面元素做位置微调的时候，使用margin
设置单方向外边距
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
取值：
1.以px为单位的数字
2.% 是父元素宽度的%
3.值取负数， margin-top + ↓ - ↑
margin-left + → - ←
4.auto：对上下外边距无效
自动计算块级元素的左右外边距
让块级元素水平居中，（只对设置了宽度的块级元素生效）
简写方式
margin:v1; 设置4个方向
margin:v1 v2; v1设置上下 v2设置左右
margin:0 auto;/margin:auto;
margin:10px auto;
margin:v1 v2 v3; 上 左右 下
margin:v1 v2 v3 v4; 上右下左
2.外边距的特殊效果
①外边距的合并
两个垂直外边距相遇时，他们将合并成一个
值以大的为准。
解决方法：布局设计的时候，直接规避
②外边距溢出
在特殊情况下，为子元素设置上外边距，会作用到父元素上！
特殊情况
1.父元素没有上边框
2.子元素的内容区域的上边沿与父元素的内容区域的上沿重合
解决方案：
1.给父元素添加上边框
弊端：影响了父元素的实际占地高度
2.给父元素添加上内边距
弊端：影响了父元素的实际占地高度
3.在子元素之间添加一个空的<table></table>
③关于块级元素，行内元素，行内块的总结(必须特别熟悉)
行内元素的特点
设置宽高无效，宽高根据内容自动撑开
上下外边距无效，左右外边距有效
可以与其它行内元素和行内块元素共用一行
一行放不下，再折行
块级元素的特点
设置宽高有效，如果不设置宽，宽度是父级宽度的100%
如果不设置高度，高度靠内容撑开
4个方向外边距都有效，独占一行
行内块元素 input
设置宽高有效，但是自带一个默认的宽高
4个外边距都有效，但是同一行修改一个行内块的垂直外边距，整行都会跟着一起发生位置改变。
可以与其他行内块和行内元素共用一行
④自带外边距的元素
h1~h6 p body ol ul dl pre
由于不同浏览器对默认的外边距的解析可能会有差别
所以在写代码之前，一般会把内外边距清空。这个行为叫做css reset
*{margin:0;padding:0;}
3.内边距padding
改变padding，感觉上是改变了元素的大小
改变padding是不会影响 其它元素的，只会改变当前元素自己的实际占地尺寸
padding:v1;设置4个方向内边距
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4;上右下左
padding-top:
padding-right:
padding-bottom
padding-left
取值：以px为单位的数字
%
padding没有auto
4.box-sizing
定义盒子模型的计算方式
box-sizing:content-box; 默认值,我们定义的width/height是内容区域
元素占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
box-sizing:border-box;我们定义的width/height，是指border包含部分的宽高(含border)
元素占地宽度=左外边距+width+右外边距
border-box使用的时机，一个容器内，在一行显示多个元素，如果子元素的width使用%定义，那么基本就要使用border-box了
六.背景
1.背景颜色
background-color:合法颜色值
2.背景图片
background-repeat:
取值：1.repeat 默认值 平铺
2.no-repeat 不平铺
3.repeat-x 水平方向平铺
4.repeat-y 垂直方向平铺
4.背景图片的定位
background-position:x y;
取值：1.px为单位的数字
2.%
3.关键字 x:left/center/right y:top/center/bottom
5.背景图片的尺寸
background-size:x y
取值，取两个值，是分别设置宽高
取一个值，是设置宽，让高自适应
1.以px为单位的数字
2.%
3. cover 覆盖，要求容器被全部填满，图片显示不全没关系
4.contain 包含。让容器可以完成的包含整张图片。图片必须完整，
容器是不是有空白区域，没关系
6.背景图片的固定
background-attachment:
取值：scroll 默认值，背景图会跟随页面滚动条而滚动
fixed 固定，背景图相对于页面位置固定
不会跟随页面滚动条滚动
但是只会在原容器区域显示
7.简写方式
background:
取值：color image repeat attachment position;
最精简方式 background:color/image;
七.渐变 gradient
渐变是指多种颜色，平缓变化的一种显示效果
渐变的主要因素
色标，一种颜色，和他出现的位置
一个渐变，最少两个色标
渐变分类
1.线性渐变，以直线的方式来填充渐变色
2.径向渐变，以圆形的方式来填充渐变色
3.重复渐变，将线性，径向渐变重复几次实现
1.线性渐变
background-image:linear-gradient(方向 , 色标1，色标2.....)
方向angle：取值
1.关键字 to bottom
to right
to left
to top
2.角度值 0deg to top
90deg to right
180deg to bottom
270deg to left
色标color-point:取值
颜色+位置
1.只写颜色不写位置，一般用于只有两个色标，对应开头和结尾
linear-gradient(0deg,#000,#0ff)
2.颜色+px为单位的数字
linear-gradient(0deg,#000 0px,#ff0 50px,
#000 100px,#0ff 150px,#000 200px)
3.颜色+%
background-image:linear-gradient(0deg,#000 0%,
#ff0 25%,#000 50%,#0ff 75%,#000 100%);
2.径向渐变
background-image:radial-gradient(半径 at 圆心,色标1,色标2.....)
半径取值 px为单位的数字
圆心取值 ：1.以px为单位数字 x y
2.x% y%
3.关键字 x: left/center/right
y:top/center/bottom
色标取值 ，1.颜色+px 颜色的填充，就与半径没有关系了
2.颜色+% 这里的位置，是半径的%
3.重复渐变
重复的线性渐变
background-image:repeating-linear-gradient(45deg,#000 0px,#ff0 10px,#000 20px,#0ff 30px,#000 40px);
重复的径向渐变
4.浏览器兼容性问题(ie8.0以下不兼容)
为了兼容低版本浏览器，写的css代码，叫做css hack
渐变属性，兼容低版本浏览器的写法
1.添加前缀
chrome/safari -webkit-
firefox -moz-
IE -ms-
opera -o-
2.线性渐变的方向，发生了改变
top/ right/ bottom/ left
background:-webkit-linear-gradient( bottom,#f00,#00f);
background:-ms-linear-gradient( bottom,#f00,#00f);
background:-o-linear-gradient( bottom,#f00,#00f);
background:-moz-linear-gradient( bottom,#f00,#00f);
八.文本格式化(重点**************)
1.字体属性
①字体大小
font-size:
取值：px/pt/em/rem为单位的数字
②设置字体系列
font-family
取值：pc中字体库里有的字体，如果字体名称代空格，必须加""
多个字体名称，使用,隔开
font-family:chiller,华文彩云,"mv boli";
③字体权重(加粗)
font-weight:
取值 1.关键字 lighter
normal
bold
bolder
2.无单位，100的整倍数，最大值1000 17:08~17:23休息
④字体样式
font-style:italic;
normal
⑤小型大写字母
font-variant:small-caps;
⑥简写模式
font:style variant weight size family;
最简写法 font:size family
写css的思路
从上往下写，从左往右写，从外往里写
找到目标元素，写样式步骤
1.尺寸，大体位置
2.边框，背景
3.文字相关
4.微调 (margin padding)
2.文本属性
①文本颜色
color:合法的颜色值
②文本对齐方式
text-align:
取值 left/center/right/justify
注意 1.一个元素写了text-align，控制的是内部的文本
2.这个元素自己想居中对齐，margin:0 auto;
3.text-align对是行内元素的孩子，都生效
4.孩子如果是块级元素，只会继承text-align。
而块级元素不会居中
③行高
line-height:
取值 px为单位的数字
特性：如果行高的数值，大于字体的大小
那么该行文本将在指定的行高内部，成垂直居中的方式显示
行高，一般会设置成与容器高度相同的值，确保文字在容器垂直居中显示
如果文字发生折行，不建议使用行高做垂直居中
④文本的线条修饰
text-decoration:
取值 1.none 默认值，无线条
2.underline 下划线
3.overline 上划线
4.line-through 删除线
项目中使用最多的,a标签去除下划线 textdecoration:none;
⑤首行缩进
text-indent：以px为单位的数字
⑥文本阴影
text-shadow:h-shadow v-shadow blur color;
h-shadow 水平偏移
v-shadow 垂直偏移
blur 模糊距离
color 阴影颜色
九.表格
1.表格的常用样式
①table的样式
尺寸，边框，背景，字体，文本，内外边距。
设置table的边框，只设置最外边一圈边框
②td/th
尺寸，边框，背景，文字，文本，内边距都会起作用
外边距无效
vertical-align:设置单元格内部文本的垂直对齐方式
取值：top/middle/bottom
总结：vertical-align对tr,td,th有效，对table无效
2.table特殊的 显示方式
显示方式：行内元素，块级元素，行内块，table
table是一种特殊的表现方式
单元格内容较多，尺寸较小，单元格大小以内容为准
单元格内容较少，尺寸较大，单元格大小以尺寸为准
table在浏览器的渲染方式:先加载到浏览器内存中，在一次性画在页面上
3.表格的特有属性
①边框的合并和分离
border-collapse:
取值： separate 默认值，边框分离状态
collapse 边框合并状态
②边框的边距
border-spacing:x y;
取值，以px为单位的数字
前提，边框必须是分离状态，才有效border-collapse: separate；
③表格的标题
caption-side:
取值 top/bottom
④设置表格的显示规则
table-layout:
取值 auto 默认值，自动表格布局。
td的大小以内容和尺寸较大为准
fixed 固定表格布局
td的大小就以尺寸为准
表格自动布局和固定布局的区别
十.定位（重要***************************************）
1.什么定位
定义元素在页面中位置
2.定位的分类
1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.普通流定位 (默认文档流定位)
1.每个元素在页面都有自己的空间
2.每个元素都是从父元素的左上角开始渲染
3.行内元素和行内块在同一行显示，从左往右，一行放不下，折行
4.块级元素独占一行，从上往下排列
4.浮动定位
让块级元素横向显示
float:
取值：1.left 左浮动，让元素浮动后停靠在父元素的左边，
或者其他已浮动元素的后面
2.right 左浮动，让元素浮动后停靠在父元素的右边，
或者其他已浮动元素的后面
3.none 默认值，不浮动
浮动的特点
1.元素一旦浮动，该元素脱离文档流
(不占页面空间,后面元素上前补位)
2.浮动元素，会在当前行，靠左/右，停靠在父元素的边缘，
或者是其他已浮动元素的边缘
3.父元素横向显示不下所有的浮动元素时，显示不下的部分会自动换行，
默认去距离当前行最近的位置
4.浮动，解决多个块级元素横向在一行显示的问题
5.浮动定位引发的特殊情况
①浮动元素的占位问题
当父元素一行显示不下所有浮动元素时，最后显示不下会换行。
默认去离当前行最近的一行。
但是，已浮动元素会根据自己的浮动方向占据位置，导致被挤下去的元素，会躲开被占据的位置，在更下方显示
②元素一旦浮动，如果元素没有定义宽度，那么浮动之后，元素的宽度靠内容撑开
③元素一旦脱离文档流，会变成块级元素，尺寸，垂直外边距都生效
④文本，行内元素，行内块元素，是不会被任何浮动元素压在下面的。 而是，巧妙的避开，环绕着浮动元素显示
脱离文档流，意味着什么
1.不占页面空间
2.后续元素上前补位
3.变成块级元素
6.清除浮动效果(清除浮动)
前面的浮动元素脱离文档，需要我上前补位
设置了清除浮动之后，我就不上前补位
clear:
取值：1.none;不清除浮动
2.right 清除之前右浮动元素给我的影响
3.left 清除之前左浮动元素给我带来的影响
4.both 清除左右元素给我带来的影响
7.高度坍塌
父元素如果不设置高度，高度默认是内部内容撑起来的
如果内部所有元素都浮动了，那么父元素认为内部就没有内容了
所以高度为0
解决方案：
1.给父元素设置高度。弊端，很多时候，不知道确切的高度
2.父元素也浮动。弊端，父元素的兄弟元素，会受到影响
正确的解决方案：
在最后一个子元素的后面追加一个空的块级元素
给这个元素设置clear：both;
那么这个元素停留在文档流中，父元素的高可以找到他
这个元素不会被前面的浮动元素覆盖(clear:both)
这个元素不写宽高，没有内容，那么默认宽度是父级的100%
高度为0，不影响父级高度
css的编写步骤
从上往下，从左往右，从外往里
1.宽高，大体位置
2.边框，背景
3.文字相关
4.微调
十一.显示
1.显示方式
决定元素在网页中的表现形式(块级，行内，行内块，table)
语法：
display:
取值：
1.display:block； 让元素以块级的方式显示
2.display:inline； 让元素以行内的方式显示
3.display:inline-block； 让元素以行内块的方式显示
4.display:table； 让元素以table的方式显示
5.display:none； 让元素隐藏，脱离文档流，不占位置
2.显示效果
显示/隐藏
visibility
取值：1.visible 默认值，可见的
2.hidden 隐藏
问题：visibility:hidden和display:none的区别
display:none脱离文档流，后续元素上前补位
visibility:hidden，不脱离文档流，虽然看不到，但是还占位置
3.透明度
opacity:
取值 0~1 1是不透明，0是全透明
问题：opacity和rgba的区别
opacity作用于元素，只要是颜色相关的属性都会改变透明度
rgba只会修改当前颜色的透明度
4.垂直对齐方式
vertical-align 一般只有两个地方使用
table中使用 取值 top/middle/bottom
设置table中的内容的 对齐方式
img中使用
设置图片与图片前后文字的垂直对齐方式
取值 top/middle/bottom baseline 基线 默认值
一般项目中通常会将所有的图片与文字垂直对齐方式，
更改为非基线对齐
5.光标
cursor:
默认值 default
小手 pointer
十字 crosshair
文本 text
等待 wait
帮助 help
十二.列表的样式
1.列表标识项的样式
list-style-type
取值 1.disc 默认值
2.none 去掉标识项
3.circle
4.square
2.列表项设置为图片
list-style-image:url(图片路径)
3.列表项的位置
ul默认自带上下外边距(chrome解析16px)
自带左内边距(chrome解析40px)
list-style-position
可以设置列表项在li里，或者设置列表在内边距里
取值 outside 默认值 在内边距里，在li外
inside 在li里
4.简写方式
list-style:type/url position;
最简方式，项目中使用最多的方式
list-style:none;
十三.定位—相对，绝对，固定定位
position:
取值：1.static 默认，静态(默认文档流)
2.relative 相对定位
3.absolute 绝对定位
4.fixed 固定定位
当一个元素设置了position属性，并且取值为
relative/absolute/fixed其中一种时
这个元素被称为 已定位元素
已定位元素解锁了4个偏移属性
top： + ↓ -↑
right +← -→
bottom +↑ -↓
left +→ -←
1.相对定位
position:relative; 配合偏移属性实现定位
相对定位，没有脱离文档流
如果相对定位元素，不写偏移属性，效果与没写定位是一样的，不影响任何布局，只是把这个元素变成了已定位元素
相对定位，相对自己原来的位置偏移某个距离
使用场合：
1.元素本身，位置微调(类似margin)
2.一般作为绝对定位的祖先元素
2.绝对定位
position：absolute; 配合偏移量使用
绝对定位，脱离文档流
绝对定位元素，如果祖先级没有已定位元素，那么就相对于body左上角，执行偏移量
绝对定位元素，会相对于离自己最近的，祖先级，已定位元素的左上角，进行偏移
绝对定位，由于脱离文档流，产生如下效果
1.页面不占据空间，后续元素上前补位
2.绝对定位的元素，会变成块级
3.没有写宽度元素，发生绝对定位以后，宽度靠内容撑开
3.固定定位
position:fixed; 配合偏移属性使用
将元素固定在页面上某个位置，不会随着滚动条滚动，发生变化
一直固定在页面的可视区域
特点：脱离文档流，位置始终相对body初始化
4.堆叠顺序
注意：
1.默认的堆叠顺序，html元素后写的堆叠顺序高
2.浮动和定位的堆叠顺序不是同一个体系，尽量避免在一起处理
3.手动调整堆叠顺序
z-index:整数
4.堆叠顺序对父子关系无效，儿子永远在爹的上面
5.只有已定位元素，可以设置堆叠顺序
CSS3 CORE
一.复杂选择器
1.兄弟选择器
兄弟元素，具备相同父元素的平级元素之间称为兄弟元素
兄弟选择器，只能找弟弟，不能找哥哥，只能往后找，不能往前找
①相邻兄弟选择器
选择器 + 选择器{}
获取紧紧挨在某元素后面的兄弟元素
p+.c1{color:#f00;}
②通用兄弟选择器
选择器 ~ 选择器{}
获取元素后面所有符合条件的兄弟
#p1~.c1{color:#f00;}
2.属性选择器
允许通过元素所附带的属性，及其值来匹配页面元素，很精准
attr表示任意属性
[attr]{} 匹配有attr这个属性的元素
[attr1][attr2]{} 匹配同时拥有attr1和attr2属性的元素
[attr=value]{} 匹配拥有attr并且值为value的元素
elem[attr=value]{} 匹配拥有attr并且值为value的elem元素
elem[attr1][attr2]{}
模糊属性值的查询
[attr^=value] 匹配attr值value开头的元素
[attr$=value] 匹配attr值value结尾的元素
[attr*=value] 匹配attr值中含有value的元素
[attr~=value] 匹配attr值中含有value这个单词的元素
3.伪类选择器
:link :visited :hover :active :focus
①目标伪类
在锚点被激活时，让锚点元素应用的样式
:target{}
②结构伪类
1.选择器:first-child{}
匹配的元素是属于其父元素的第一个子元素(找大哥)
同时，这个大哥还需要符合选择器的要求
2.选择器:last-child{}
匹配的元素是是属于其父元素的最后一个子元素(找小弟)
同时，这个小弟还需要符合选择器的要求
3.选择器:nth-child(n) n从1开始
③:empty
匹配内部没有任何元素标签，包括文本，空格，回车，都不能有
④:only-child
匹配属于其父元素的唯一子元素
⑤否定伪类
:not(selector)
4.伪元素选择器
①匹配元素的首行首字符
:first-letter 或者 ::first-letter
②匹配元素的首行
:first-line 或者 ::first-line
当首行与首字符发生了冲突，应用首字符的样式
③匹配用户选择的文本
这里必须是双：：
::selection{}
这里的样式，只能修改文本颜色和背景颜色
④伪元素选择器，内容生成
生成的是一个元素
可以设置这个元素的显示方式，使用content:设置这个元素文本内容
以及所有可以使用的样式
content中只能给字符串和url(图片)
:before 或者 ::before 代表的是内容区域中，最靠前的部分
div::before{
content:"蒙奇.D.路飞说:";
display:block;
color:#f00;
background:#0ff;
width:100px;height:100px;
}
:after 或者 ::after 匹配到某元素内容区域最后的位置
二.弹性布局(重点******************************************)
1.什么是弹性布局
弹性布局，是一种布局方式。
主要解决的是某个元素中子元素的布局方式
让页面布局更加的灵活
2.弹性布局专有的名词解释
1.容器
要发生弹性布局的子元素，他们的父元素，成为容器
就是设置display:flex的那个元素
2.项目
要发生弹性布局的子元素们，叫项目
就是设置了display:flex的元素的子元素们
3.主轴
项目们排列方向的一根轴，称之为主轴
如果项目们是按照水平排列，那么主轴就是x轴
如果项目们按照垂直排列，那么主轴就是y轴
项目们在主轴排列的顺序，称为主轴起点和主轴的终点
4.交叉轴
与主轴垂直的一根轴，叫做交叉轴
项目们在交叉轴的排列顺序，称为交叉轴的起点和终点
3.语法
将元素设置为弹性容器之后，他所有的子元素，都会变为弹性项目
display:flex; 将块级元素设置为容器
inline-flex 将行内元素设置为容器
注意：
元素设置为flex容器后，容器的text-align，vertical-align失效
项目float，clear失效
4.容器的属性
①设置主轴的方向
flex-direction:
取值 row 默认值，主轴是x轴，主轴起点在左端
row-reverse 主轴是x轴，主轴起点在右端
column 主轴是y轴，主轴起点在顶部
column-reverse 主轴是y轴，主轴起点在底部
②设置项目的换行
flex-wrap:
取值: 默认值 nowrap 空间不够时，不换行，项目会自动缩小
wrap 空间不够时，项目不缩小，换行
wrap-reverse 项目换行，并反转
③上面两个属性的简写
flex-flow:direction wrap;
④定义项目在主轴上的对齐方式
justify-content:
取值 1.flex-start 默认值，主轴起点对齐
2.flex-end 主轴终点
3.center 主轴中心
4.space-around 每个外边距相同，两端有空白
5.space-between 两端对齐，两端无空白
5.项目们在交叉轴上的对齐方式
align-items:
取值
1.flex-start 默认值，交叉轴起点对齐
2.flex-end 交叉轴终点对齐
3.center 交叉轴中间对齐
4.baseline 基线，同flex-start类似
5.stretch 项目不写高，充满容器整个高度
5.项目属性
设置在项目中的属性，只会影响当前项目
不影响其他项目
①项目顺序
order 定义项目排列的顺序，值越小。越靠近起点。默认值为0
取值：无单位数字
②flex-grow
如果容器有足够大的剩余空间，项目将按比例放大(比例不准确)
取值，无单位数字 默认值 0
③flex-shrink
如果容器空间不够，项目将按比例缩小(比例不准确)
取值，无单位数字 默认值 1 取值越大，缩小的越快
④align-self
定义某一个项目在交叉轴上的对齐方式，不影响其他项目
取值
1.flex-start交叉轴起点对齐
2.flex-end 交叉轴终点对齐
3.center 交叉轴中间对齐
4.baseline 基线，同flex-start类似
5.stretch 项目不写高，充满容器整个高度
6.auto 使用align-items定义的值
三.css hack
由于不同的浏览器对css的解析认知是不同的，会导致同一份css在不同的浏览器生成的页面效果不同
我们要针对不同的浏览器写不同的css代码
这种写不同css代码的过程，就叫css hack
tmooc有相关的视频
-webkit-
-ms-
-moz-
-o-
四.转换(重点******)
1.什么是转换
改变元素在页面中的位置，大小，角度，形状
2D转换，只在x轴和y轴上发生转换
3D转换，增加了z轴的转换效果
2.转换属性
transform:
取值：1.none 默认值，无任何转换效果
2.转换函数 transform-function
转换函数 transform-function:位移，旋转，放大，倾斜，3D旋转
3.转换原点
transform-origin:
转换原点会影响元素旋转时的效果
取值：1.以px为单位的数字
2.%
3.关键字 left/center/right top/center/bottom
4.2D转换
①位移
transform:translate();
取值 1.translate(x) 和 translateX(x)
x轴位移 + 往右 - 往左
2.translateY(y)
y轴位移 + 往下 - 往上
3.translate(x,y) 同时设置x轴和y轴的位移
transform:translate(x,y);
②缩放
transform:scale(n)
取值 scale(n) 同时设置x轴和y轴的比例
scale(x,y) 分别设置x轴和y轴的比例
scaleX(x) 单独设置x轴的比例
scaleY(y) 单独设置y轴的比例
n>1 放大
n=1 不变
0<n<1 缩小
-1<n<0 缩小并反转
n<-1 放大并反转
③旋转
transform：rotate(ndeg)
n + 顺时针 - 逆时针
注意：
1.旋转的转换，会被转换原点影响效果
2.旋转是连同坐标轴一起旋转的，会影响旋转之后的位移方向
④倾斜
transform:skew(ndeg)
1.skew(ndeg)等同于skewX(xdeg)
让元素向着x轴发生倾斜，实际上改变的是y轴的角度
值 ndeg 为正 y轴逆时针
为负 y轴顺时针
2.skewY(ydeg)
让元素向着y轴发生倾斜，实际上改变的是x轴的角度
值 ndeg 为正 x轴顺时针
为负 x轴逆时针
3.skew(x,y)
5.3D转换，3D转换都是模拟出来
①透视距离
模拟人的眼睛到3D转换元素之间的距离
透视距离不同，看到的效果就不同
perspective:px 此属性要写在3D转换元素的父元素上
②3D旋转
transform
取值：
1.rotateX(ndeg)
以x轴为中心轴，旋转元素(烤羊腿，老式爆米花机)
2.rotateY(ndeg)
以y轴为中心轴，旋转元素(旋转门，旋转木马)
3.rotateZ(ndeg)
以z轴为中心轴，旋转元素(电风扇，摩天轮)
4.rotate(x,y,z,ndeg)
x,y,z取值为0，代表不参与旋转
x,y,z>0,代表参与旋转
五.过渡（重点**********）
让css的值，在一段时间内平缓的变化
1.语法
①指定参与过渡的属性
transition-property:
取值 all 所有支持过渡属性都参与
单独写某个css属性，多个属性间用空格分开
支持过渡的属性：
1.颜色属性
2.大多数取值为具体数字的属性
3.阴影
4.转换
5.visibility
②指定过渡时长
transition-duration: s/ms
指定多长时间完成此次过渡操作
③过渡时间曲线函数
transition-timing-function:
取值：
1.ease 默认值，慢速开始，中间变快，慢速结束
2.linear 匀速
3.ease-in 慢慢开始，一直加速
4.ease-out 快速开始，一直减速
5.ease-in-out 慢速开始，慢速结束，中间先加速再减速
④延迟执行
transition-delay:s/ms
⑤过渡代码编写的位置
写在原来的选择器中，过渡效果有去有回
写在hover中，过渡效果有去无回
⑥过渡的简写方式
transition：property duration timing-function delay;
最简方式：transition:duration;
六.动画，多个过渡效果放到一起
1.关键帧
关键帧
1.动画执行的时间点
2.在这个时间点上的样式
2.动画的使用步骤
①使用关键帧定义动画
@keyframes 动画名称{
0%{}
...
100%{}
}
②调用动画
1.选中要执行动画的名称
animation-name
2.动画持续时长
animation-duration
3.动画的时间曲线函数
animation-timing-function:ease/linear/ease-in.......
4.延迟执行
animation-delay
3.动画的其它属性
①动画的播放次数
animation-iteration-count:
取值 具体的播放次数
infinite; 无限
②动画的播放顺序
animation-direction:
取值 normal 默认值 0%~100%
reverse 100%~0%
alternate; 轮流播放，奇数次正向，偶数次逆向
③动画的简写方式
animation:name duration timing-function delay count direction
最简方式
animation:name duration;
④动画在播放前后的显示状态
animation-fill-mode:
取值：1.backwards 动画播放之前的延迟时间内，显示动画的第一帧
2.forwards 动画播放结束之后，停留在最后一帧
3.both; 1和2合体
4.none 默认值，不填充状态
⑤动画的播放与暂停
animation-play-state:
取值 running
paused;
4.动画的兼容性
如果低版本浏览器，想使用动画，需要在动画声明的时候添加前缀
@keyframes 动画名称{}
@-webkit-keyframes 动画名称{}
@-o-keyframes 动画名称{}
@-ms-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
5. animate.css
项目中，一般使用第三方动画库animate.css
1.下载animate.css
2.在页面中导入
3.调用动画名称
七.CSS的优化
css优化的目的
1.减少服务器的压力
2.提升用户体验
1.css优化的原则
尽量减少http的请求个数
在页面的顶部，引入css文件
将css和js写在外部单独的文件中
2.css代码优化
合并样式(能写群组，就不单写，能用简写，就不单独定义属性)
缩小样式文件的大小(能重用的尽量重用，减少样式重写)
避免出现空的href和src
代码压缩
八.css reset和normalize.css
1.什么css reset
由于不同浏览器，对html元素的默认样式解析不同
我们在开发css之前，把大多数默认样式统一重置(格式化)
然后再写代码。这个行为叫做css reset
2.normalize.css
是css reset的一种优质的替代方案
3.css reset和normalize.css的区别
css reset 太激进，太暴力
normalize.css比较温和
BootStrap
一.响应式布局 (css3)
1.什么是响应式网页
Responsive web page 响应式网页
可以根据浏览器设备不同(pc,pad,phone)
而自动改变布局，图片，文字效果，不会影响用户体验
2.响应式页面必须做到下面几件事
1.布局，不能固定元素宽度，必须使用流式布局(默认+浮动)+弹性布局
2.文字和图片大小随着容器大小变化
3.媒体查询技术
1566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
