CSS回顾

CSS3概述

1.什么是CSS
Cascading style sheets 层叠样式表、级联样式表.简称样式表
2.CSS的作用
设置HTML网页中元素的样式
3.HTML与CSS的关系
HTML：负责网页的搭建，内容展示-----一个页面骨架
CSS：负责网页的修饰，样式的构建-----给网页化妆
4.HTML属性与CSS的使用原则
W3C建议我们尽量使用css的方式来取代HTML属性
CSS样式：
a.样式代码高度重用
b.方便后期的维护，提高了可维护性

CSS的语法规范

使用CSS的方式

1.行内样式/内联样式
将css样式定义在html标签中

样式声明： 样式属性:值; 样式属性:值 color:red;
内联样式开发中基本不用，只在学习和测试的使用
内联样式无法重用，内联样式优先级最高

常用的样式：
1.设置文本颜色
color:合法的颜色值(颜色的单词)
2.设置字体的大小
font-size:以px为单位的数字
3.背景颜色
background:合法的颜色值

内部样式

在网页head标签中创建style标签，在style标签内部定义样式

样式规则：由选择器和样式声明组成
div{color:purple;}
元素选择器，由元素名称作为选择器
页面上匹配这个元素的名称元素，都可以使用该样式
特点：
只能在本页面重用，其它页面无法重用，重用效果有限
开发中少用，学习和测试中使用较多

外部样式

独立于任何网页，声明一个样式文件(*.css)
在.css中保存样式规则
使用步骤
1.创建样式表文件.css
2.在css文件中编写样式规则
3.在网页的头部引入css文件

CSS特性

继承性

大部分的css效果是可以直接被继承的。
必须父子结构(有层级嵌套)，子继承父

层叠性

可以为一个元素定义多个样式规则
规则中属性不冲突(不重复)时，多个样式可以同时应用到当前元素上

优先级

如果多个样式声明冲突，按照样式规则的优先级应用样式。
最高：内联样式
内部样式和外部样式，就近原则
最低：浏览器默认样式

调整样式优先级

!important规则
放在属性值之后，与值之间用空格隔开
作用:调整优先级，使用之后优先级提升

基础选择器（重点**********）

选择器的作用

规范了页面中哪些元素能够使用定义好的样式，的条件
为了匹配元素

选择器详解

1.通用选择器
匹配页面上所有的元素

*{样式声明}
效率极低，项目中少用，
唯一使用的方式
*{margin:0;padding:0}所有元素内外边距清0

2.元素选择器，标签选择器
设置页面中某种元素的默认样式

div{}
p{font-size:12px;}

3.id选择器
设置指定id元素的样式(专属的定制)

#d1{color:red;}

4.类选择器
定义页面上某个或者某类元素的样式（公共样式，谁想用都可以）

.类名{样式声明}

注意:类名
1.点不能省略
2.不能以数字开头
3.不能包含特殊字符(除了- _)
多类选择器
让一个元素引用多个类选择器，多个类名之间使用空格隔开

分类选择器 将元素选择器和类选择结合的一种使用方式 元素选择器.类选择器{样式声明}

h4.my_font{background:pink;}

特点:
1.指向更精准
2.优先级更高

5.群组选择器
将多个选择器放到一起定义公共的样式
选择器1，选择器2，选择器3,…{样式声明}

div,p,#s1,p.my_font{
  color:#006699;
  background:#990066;
}

6.后代选择器
通过元素的后代关系匹配元素
后代：一级或者多于一级的嵌套关系
语法:选择器1 选择器2 选择器3…{样式的声明}

7.子代选择器
通过元素的子代(一级嵌套)关系匹配元素
选择器1>选择器2>选择器3…{样式声明}

8.伪类选择器
匹配元素的不同状态的选择器
选择器:伪类选择器{} 在这个标签的某一个状态下，才应用此样式
      8.1链接伪类
a:link{color:red;}没有被访问过的状态
a:visited{color:pink;}被访问之后的状态
      8.2动态伪类
a:active{font-style:italic;}元素被激活状态
input:focus{background:black;color:white;}匹配元素获取焦点时
img:hover{width:100px;}匹配元素被鼠标悬停时

9.选择器的权值
权值，表示当前选择器的重要程度，权值越大优先级越高
!important >1000
内联样式 1000
id选择器 100
类和伪类 10
元素选择器 1
*通用选择器 0
继承的样式 无

1.当一个选择器含有多个选择器时，需要将所有的选择器的权值进行相加
然后再比较，权值高的优先级高
2.分组选择器权值不相加，单独计算
3.权值的计算不会超过其最大数量（100个1加在一起，不会大于一个10）
4.样式后面添加！important,该样式直接获得最高优先级
内联样式不能添加!important
5.权值相同，按照就近原则

尺寸和边框

尺寸属性

width
最大宽度max-width
最小宽度min-width
height
max-height
min-height
取值：
1.以px为单位的数字
2.%，相对单位，占据父元素尺寸的百分比
总结：页面中允许设置尺寸的元素
1.所有的块级元素都可以设置
2.行内块都可以设置
input(单选框和复选框不能设置)
3.本身具有width和height属性的元素，可以设置
table,img
大部分的行内元素都不允许设置尺寸

附加知识点 单位
1.px 像素
2.in 英寸 1in=2.54cm
3.pt 磅值，一般修饰字体大小 1pt=1/72in
4.cm
5.mm
6.em 相对于父级设置的尺寸乘以的倍数(1.5em)
7.rem相对于根元素设置的尺寸乘以的倍数(1.5rem)
8.%

附加知识点 合法颜色值
1.颜色的英文单词 red blue yellow gray …
2.#rrggbb 取值 16进制 r:0~ff g:0~ff b:0~ff
3.#aabbcc 简写成#abc
4.rgb(0_255,0255,0~255);
5.rgb(r%,g%,b%);
6.rgba(r,g,b,a)
a:alpha 透明度（0-1） 1：不透明 0：透明

尺寸和属性

尺寸属性

溢出处理

当内容多，元素区域小的时候，就会产生溢出效果
默认都是纵向溢出的
属性 overflow/overflow-x/overflow-y
取值：
      1.visible 默认值，溢出可见
      2.hidden 溢出部分隐藏
      3.scroll 显示滚动条，不管是否溢出都显示滚动条
只有在溢出时，滚动条可用
      4.auto 自动，溢出方向有滚动条，没溢出的方向没有滚动条
如果想显示成横向溢出
需要在内容和容器之前再套一层容器
内部容器宽度要比外部容器宽

边框

1.border:width style color;
width:边框的宽度
style:边框的样式
      取值：solid 实线
            dotted 虚线(圆点)
            dashed虚线(线)
            double 双实线
color:边框颜色，合法的颜色值，支持透明色(transparent)
border直接设置上右下左4个方向的边框
取消边框 border:none/0;

2.单边定义
只设置某一条边的3个属性
border-top/right/bottom/left:width style color;

3.单属性定义
border-color:#00f;
border-style:dashed;
border-width:10px;

4.单边单属性定义(12个)
border-top/right/bottom/left-width/style/color:

5.边框的倒角
把直角变成圆角
border-radius:
取值：
      1.以px为单位的数字
      2.% 50%设置圆形

单角设置
border-top-left-radius:10%; 左上
border-bottom-right-radius:10%;右下
border-top-right-radius:10%;右上
border-bottom-left-radius:10%;左下

6.边框的阴影
box-shadow
取值：
h-shadow v-shadow blur spread color inset;
h-shadow:水平方向阴影的偏移，正：往右，负：往左
v-shadow:垂直方向阴影的偏移，正：往下，负：往上
后面4个值，可以不写
blur：阴影模糊距离，值越大，越模糊，负值就消失
spread:阴影尺寸，指阴影在基础上扩出来的具体
color:阴影的颜色
inset:将默认的外部阴影变为内部阴影

7.轮廓
轮廓是指边框的边框，绘制于边框外边的线条
outline:width style color;
给input去掉轮廓 outline:none/0;

框模型，盒子模型（重点）

什么叫框模型

页面元素皆为框（盒子）
框模型，盒子模型 box model
定义了元素框处理元素内容，内边距，外边距以及边框的计算方式
默认的计算方式
元素的实际占地宽度=左外边距+左边框+左内边距+内容区域的宽度+右内边距+右边框+右外边距
元素的实际占地高度=上外边距+上边框+上内边距+内容区域的高度+下内边距+下边框+下外边距

外边距，围绕在元素边框外的空白间距（元素与元素之间的距离）

语法:margin 定义4个方向的外边距
单边定义 margin-top/right/bottom/left
取值：
      1.以px为单位的数字
      2.%,占父级宽度的百分比
      3.取值为正数，margin-left 元素往右移动
margin-top 元素往下移动
取值为负，就是相反方向
      4.auto 自动计算块级元素的外边距，对于上下外边距无效
      块级元素水平居中，要设置作用外边距auto

简写模式

margin:value 定义4个方向的外边距
margin:v1 v2; v1:设置上下，v2设置左右
margin:0 auto;设置块级元素水平居中
margin:v1 v2 v3; v1:上，v2：左右，v3：下
margin:v1 v2 v3 v4; 上 右 下 左

自带外边距的元素

h1~h6 p body ol ul dl pre
一般在开发时候，通过样式重写的方式，来重置具有外边距的元素
*{margin:0;padding:0;}
body,button,…th,ul{margin:0;padding:0}

外边距的特殊效果

1.外边距合并
当两个垂直外边距相遇时，他们讲合并成一个，最终的距离取决于两个外边距中较大的值

2.行内元素对外边距表现
行内元素垂直外边距无效(img除外)
3.行内块对外边距的表现
同一行中，一个行内块设置了垂直外边距，同行其它行内会跟着发生变化

3.外边距溢出
在特殊条件下，为子元素设置上外边距，会作用到父元素
条件：
      1.父元素没有上边框
      2.为第一个子元素设置上外边距
解决方案：
      1.为父元素添加上边框 弊端：影响了父元素的实际高度
      2.为父元素添加上内边距 弊端：影响了父元素的实际高度
      3.在父元素第一个子元素的位置，添加一个空的table标签

4.内边框
不会影响其他元素，但是会改变自己的占地尺寸，视觉上大小会发生变化
语法：
padding:value; 设置4个方向的内边距
padding:v1 v2; v1:上下，v2：左右 没有auto
padding:v1 v2 v3; v1:上 v2：左右 v3：下
padding:v1 v2 v3 v4; 上右下左
单方向设置
padding-top/right/bottom/left

box-sizing属性

指定框模型的计算方式
box-sizing:content-box; 默认值
默认的计算方式
元素的实际占地宽度=左外边距+左边框+左内边距+内容区域的宽度+右内边距+右边框+右外边距
元素的实际占地高度=上外边距+上边框+上内边距+内容区域的高度+下内边距+下边框+下外边距
box-sizing:border-box;
元素的实际占地宽度为=左外边距+width+右外边距
元素的实际占地高度为=上外边距+height+下外边距

背景

背景颜色

background-color:
取值：合法的颜色值和transparent
背景颜色和背景图片，填充都是从边框开始

背景图片

background-image:url(图片路径);

背景图平铺

background-repeat:
取值
repeat 默认值，平铺
no-repeat 不平铺
repeat-x 在水平方向平铺
repeat-y 在垂直方式平铺

背景图定位

background-position:
取值：
1.x y 以px为单位的数字
+：右 下 -：左 上
2.x% y%
3.关键字 x:left/center/right y:top/center/bottom

背景图片的尺寸

background-size
取值
1.x y 以px为单位的数字
2.x% y%
3. cover 容器被图片100%填充覆盖，哪怕图片显示不全，也要把整个容器覆盖住。
4.contain 容器要把图片100%包含起来，哪怕图片缩小的看不到，也要把整张图片都包含住

背景的简写方式

在一个属性中，指定背景的多个属性值
background
取值
color url repeat attachment position
background:#faa;
background:url(…);

写样式的思路
确认布局
确认每个元素的大体位置和宽高
背景，边框，轮廓。。。
微调
从外往里，从上往下，从左往右

渐变gradient

什么是渐变

多种颜色平缓变化的一种显示效果

渐变的主要因素

色标：一种颜色，以及这种出现的位置
一个渐变至少有两个色标

渐变的分类

1.线性渐变
以直线的方式来填充渐变色
2.径向渐变
以圆形的方式来填充渐变色
3.重复渐变
将线性渐变和径向渐变 重复几次实现渐变

线性渐变

background-image
取值：linear-gradient(angle,color-point1,color-point2,…)
angle:表示渐变的方向或者角度
取值：
1.关键字
      to top 从下到上
      to bottom 从上到下
      to left 从右到左
      to right 从左到右
2.角度 deg
      0deg to top
      90deg to right
      180deg to bottom
      270deg to left
color-point:色标
取值 颜色 0%，颜色 50px

重复渐变

线性的重复
background-image:repeating-linear-gradient(to bottom,#f00 0%,#00f 25%,#ff0 50%);
径向的重复
background-image:repeating-radial-gradient(30px at center center,#d8bbe7 50%,#0b090a 100%);

浏览器兼容性

所有浏览器新版本都支持渐变属性
对于不支持的版本，可以通过添加浏览器前缀的方式，让浏览器支持
chrome -webkit-
firefox -moz-
IE -ms-
opera -o-
如果使用兼容性的写法，线性渐变中angle不能写方向，写起始点
background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed100%);

文本格式化

字体的属性

1.自定字体的类型
font-family:黑体,华文彩云,宋体;
用逗号隔开多个字体类型
2.字体大小
font-size
取值：
      1.以px为单位的数字
      2.以pt为单位的数字
      3.em/rem
3.字体加粗
font-weigth
取值
      1.bold 加粗
       2.lighter 细一些
       3.normal
       4.value 为单位数字，100的整倍数 100~1000
4.字体样式
       font-style
       italic/normal
5.小型大写字母
font-variant:
small-caps;
normal
6.字体属性的简写方式
font:style variant weight size family;
至少要有size和family

文本格式化

1.文本颜色
color:合法的颜色值
2.文本排列(水平)
text-align
取值 left/center/right/justify
3.行高
定义一行文字的高度
如果行高大于字体本身的大小，该行文本将在指定的行高内，呈垂直居中效果显示
line-height
取值 1.以px为单位的数字
2.无单位的数字,字体大小的倍数 line-height:2;
多行文字，使用行高可能会出现不想要的结果
4.线条的修饰
text-decoration:
上划线 overline;
下划线 underline
删除线 line-through
无线条 none
5.首行缩进
text-indent:以px为单位的数字
6.文本阴影
text-shadow:0px 0px 10px #006699;
h-shadow 横向的偏移量
v-shadow 纵向的偏移量
blur 模糊距离
color 颜色

表格

表格的常用属性

1.边距属性 padding（td的margin无效）
2.边框属性 border
3.尺寸属性 width height
4.文本格式 font-* text-* line-height
5.背景属性 颜色，图片 渐变
6.指定单元格数据的垂直对齐方式
vertical-align:top/middle/bottom

表格的特有属性

1.边框的合并
border-collapse:
separate; 默认值 分离
collapse; 合并

2.边框的边距(td的margin无效)
border-spacing:
必须保证边框是分离状态
取值：
1个值，水平和垂直距离相同
2个值，第一个值设置水平，第二个值设置垂直

3.标题位置
caption-side:
top 默认值
bottom;

4.显示规则
告诉浏览器如何渲染一张表格
table-layout:
auto 默认值 自动布局表格，列的尺寸实际有内容决定
fixed 固定表格布局，列的尺寸有设定的为准

自动布局	固定布局
单元格大小会适应内容	单元格取决于设定的尺寸
表格复制时，加载速度较慢（缺点）	任何情况下会加速加载表格（优点）
自动布局会比较灵活（优点）	固定布局不够灵活（缺点）
适用于不确定每列大小并且表格不复杂的时候	适用于确定每列尺寸的表格使用

定位（重点********************************）

什么是定位

改变元素在页面中的位置

分类

1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位

普通流定位

页面中元素们的默认定位方式，默认文档流
从上往下，从左往右排列
1.每个元素都在页面有自己的空间
2.每个元素都是从父元素的左上角开始显示(渲染)
3.块级元素都是按照从上到下的方式逐个排列，每个元素独占一行
4.行内元素是多个元素在一行中显示，从左往右逐个排列

浮动定位（重点）

当元素设置浮动之后，该元素脱离默认文档流，后面的非浮动元素会上前补位。当前元素会在当前行，向左或者向右排列
float：left、right、none
特点：
1.元素一旦浮动，就脱离文档流了，不占据页面空间了，后面会上前补位
2.浮动元素会停靠在父元素的左边/右边，或者其他已经浮动元素的边缘
3.浮动就是解决多个块级元素在一行显示的问题

浮动引发的特殊情况
1.当父元素显示不下所有已浮动元素的时候，显示不下的几个将换行显示
换行显示的规则：优先上浮，之后往左/右对齐
浮动元素占位，浮动元素会根据浮动方向，占据方向上的位置，
不让其他后面浮动元素占用
2.元素一旦浮动，如果没有定义宽度，宽度会以内容为准
3.元素一旦浮动起来，就变成了块级元素
可以设置宽高，可以设置上下外边距
4.文本，行内元素，行内块是不会被浮动元素压在下方。
而是巧妙的避开了所有浮动元素，环绕着浮动元素显示。

清除浮动
元素一旦浮动起来，会对后续元素带来一定的影响(后续元素会上前补位)
如果后续元素不想上前补位，那么给后续元素设置clear
清除前面浮动元素对我的影响
clear:left/right/both

高度坍塌
块级元素的高度如果不设置，高度以内部元素内容为准
但是如果内部元素都是浮动元素，浮动元素不占据页面空间

父元素的高，没有了。
解决方案
1.直接为父元素设置高度
弊端：不知道父元素高度怎么办？！
2.父元素也浮动
弊端：浮动会影响后续元素
3. overflow:hidden/auto;（加载父元素）
弊端：当元素真的需要显示溢出内容的时候，就显示不出来了
4.在父元素中追加一个空的块级元素，并且设置clear:both;

显示

显示方式

元素在页面中的表现形式(块级，行内，行内块)
display
取值
1.none 隐藏，不显示元素
2.block 让元素的表现形式和块级元素一样
      特点：独占一行，可以设置宽高，垂直外边距
3.inline让元素的表现形式和行内元素一样
      特点：多个元素共用一行，不能设置宽高和垂直外边距
4.inline-block让元素的表现形式和行内块元素一样
      特点：多个元素在一行中显示，但是可以设置宽高，垂直外边距
5.table让元素的表现形式和table一样
      特点：尺寸以内容为准，每个元素独占一行，允许修改尺寸
总结：一般情况下，会把行内元素显示方式修改成块级或者行内块
      元素在不显示的时候，使用none

显示效果

visibility
取值 1.visible 默认 可见
      2.hidden 隐藏

Q：display:none 和 visibility:hidden 的区别
display:none 隐藏，是脱离默认文档流，不占据页面空间
visibility:hidden 隐藏，不脱离文档流，会占据页面空间

透明度

opacity
取值 0~1 越小越透明

Q：opacity和rgba
opacity作用于元素，只要跟元素相关的颜色都会跟着透明，可以作用到子元素
rgba只修改当前颜色的透明度，不影响其他内容

垂直对齐方式

vertical-align
使用场合
1.table标签中，控制文字的垂直对齐
取值：top/middle/bottom
2.img标签，控制图片与前后文字的垂直对齐方式
取值：top/middle/bottom/baseline
编写网页的时候，通常会将所有图片垂直对齐方式更改为除了基线以外的方式

光标的样式

cursor:
取值
1.default 箭头
2. pointer 小手
3.text I
4.crosshair +
5.wait 等待
6.help 帮助

列表

列表标识项

list-style-type
none 去掉标识项
disc 默认 实心圆
circle 空心圆
square 矩形

列表项图片

list-style-image
url(资源路径)

列表项的位置

list-style-position
inside 将默认的列表项位置放到li里面
outside 默认，列表项在li外面

简写方式

list-style:
取值：type url position
常用写法list-style:none;

定位

定位的属性

position:
取值
static:默认值，静态---->默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
元素的position设置为relative/absolute/fixed中任意一个值
该元素被称为已定位元素

偏移属性

top/bottom/right/left
left:100px 往右移100px
top:-100px 往上移动100px

相对定位

元素相对于他原来的位置偏移某个距离
没有脱离默认文档流
页面上的不被其他元素补位
语法：position:relative;必须配合偏移属性使用
使用场合：
1.位置微调
2.经常作为absolute的最近的已定位的祖先元素

绝对定位

绝对定位的元素会脱离默认文档流
绝对定位的元素会相对于离他的"最近的"“已定位的”"祖先元素"去实现定位
如果所有祖先元素不是已定位元素，相对于body去实现定位
属性：position:absolute；配合偏移属性使用
使用场合：有层叠的元素效果时，使用
绝对定位会让元素变为块级

固定定位

将元素固定在页面的某个位置
元素不会随滚动条发生位置变化，一直固定在可视区域内
语法：
position:fixed;配合偏移属性使用
注意
1.固定定位脱离文档流，不占页面空间
2.固定定位元素变为块级元素
3.相对于body实现位置的偏移初始化

堆叠顺序

元素变为已定位元素，有可能出现堆叠
默认堆叠顺序，后出现的已定位，堆叠顺序高
想修改堆叠顺序
z-index
无单位的数字，数字越大，元素越靠上显示
父子元素间，z-index无效，永远都是子元素压在父元素上面
只有已定位元素才能使用z-index

CSS3 core 核心

复杂选择器

1.兄弟选择器
具备相同父级元素的平级元素之间称为兄弟元素
注意：兄弟选择器，只能往后，不能往前找
      1.相邻兄弟选择器，获取紧紧挨着某元素后面的兄弟元素
      选择器1+选择器2{}
      2.通用兄弟选择器，获取某元素后面所有满足条件的兄弟元素
       选择器1~选择器{}

2.属性选择器 id class name type value style title…
允许通过元素所附带的属性及其值来匹配页面元素
基本语法
[attr]{} attr表示任意属性
可以匹配页面中所有附带attr属性的元素
elem[attr]{} elem[attr1][attr2]…{}
匹配页面中所有附带attr属性的elem元素
[attr=value]
匹配attr属性为value的元素
elem[attr=value]
匹配attr属性为value的elem元素
[attr^=value] 匹配属性值以value开头的元素
[attr$=value] 匹配属性值以value结尾的元素
[attr*=value] 匹配属性值中含有value的元素
[attr~=value] 匹配属性值中含有指定的单词的元素

伪类选择器

:link :visited :hove :active :focus
1.目标伪类（锚点）
突出显示活动的HTML锚点元素，匹配被激活的锚点元素
elem:target{}
2.结构伪类

1. :first-child
   匹配的是该元素的父元素的第一个孩子----子元素的大哥
   2.:last-child
   匹配的是该元素的父元素的最后一个孩子----子元素的小弟
   3.:nth-child(n)
   匹配的是该元素的父元素的第n个孩子 n从1开始
   4.:empty 匹配没有子元素的元素
   回车，空格，文本都不能写，才算没有子元素
   5.:only-child 匹配的元素是父元素中唯一的子元素
   6.:not 否定伪类，将满足指定选择器的元素，排除在外
   :not(selector){}

伪元素选择器

:first-letter{}或者::first-letter{ }
匹配修改第一个字符的样式
:first-line或者::first-line{ }
匹配修改第一行字符的样式
::selection{}
匹配修改选中文本的样式—只支持字体颜色和背景颜色

复杂选择器

伪类选择器

1.内容生成
内容，既可以是文本，也可以是元素
1.1:before或者::before
匹配元素内容区域之前
1.2:after或者::after
匹配元素内容区域之后
1.3内容属性
向匹配的位置处添加内容
取值：1.字符串
2.图片 url(路径)
1.4高度坍塌
#parent:after{
content:"";display:block;clear:both;
}
1.5外边距溢出
#d3:before{
content:"";display:table;
}

弹性布局

1.什么是弹性布局

弹性布局是一种布局方式
主要解决一个元素中的子元素的布局方式，为布局提供最大的灵活性

2.弹性布局的相关概念

（1）弹性布局的容器
要把子元素布局成弹性布局的父元素称为容器
（2）弹性布局的项目
要布局的子元素称之为项目
（3）主轴
项目们排列的方向，称之为主轴
项目们是横向排列，主轴就是x轴
项目们是纵向排列，主轴就是y轴
（4）交叉轴
与主轴垂直相交的方向，称之为交叉轴

语法

将元素变为弹性容器之后，那么他的所有子元素将变为弹性项目
所有项目都允许按照弹性布局的方式排列
display:
取值：flex,将块级元素变为容器
inline-flex，将行内元素变为容器
注意：
1.元素设置为flex容器之后
子元素,项目的float/clear/vertical-align属性失效
2.元素设置flex容器之后，子元素项目允许修改尺寸
3.容器的对齐方式text-align失效

容器的属性

1.flex-direction 方向 11:19上课
设置主轴的方向
取值：1.row 默认值，主轴是x轴，主轴起点是左端
      2.row-reverse主轴是x轴，主轴起点是右端
      3.column主轴是y轴，主轴起点是顶端
      4.column-reverse主轴是y轴，主轴起点是底端
2.flex-wrap 不压缩，换行
当一个主轴排列不下所有的项目时，可以设置换行显示
取值：1.nowrap 默认值，空间不够时也不换行，项目会自动缩小
      2.wrap 换行
      3.wrap-reverse 换行并反转
3.flex-flow
是flex-direction和flex-wrap的缩写
取值1.row nowrap 默认值
      2.column wrap 等组合
4.justify-content
定义项目在主轴上的对齐方式
取值
      1.flex-start在主轴的起点对齐
      2.flex-end 在主轴的终点对齐
      3.center 在主轴居中对齐
      4.space-between 两端对齐
      5.space-around 每个间距相同
5.align-items
项目在交叉轴上对齐的方式
取值：1.flex-start 默认值，在交叉轴起点对齐
      2.flex-end 在交叉轴终点对齐
      3.center 在交叉轴居中对齐
      4.baseline 在交叉轴基线对齐
      5.stretch 如果项目为设置尺寸，在交叉轴上占满所有空间

项目的属性

这组属性只能设置在某一个项目上
不影响其他项目的效果
1.order
定义项目排列的顺序，值越小越靠近主轴起点，默认值为0
取值：取值，无单位整数
2.flex-grow
定义项目的放大比例
如果容器有足够大的空间，项目将按照比例放大
取值：无单位整数，默认值为0，不放大
取值越大，占据的剩余空间越多
3.flex-shrink
定义项目的缩小比例，当容器空间不足时，项目该如何缩小
取值，无单位整数，默认值为1
取值为0，不缩小
取值越大，缩小越快
4.align-self
定义当前项目在交叉轴上的对齐方式
取值：1.flex-start 默认值，在交叉轴起点对齐
      2.flex-end 在交叉轴终点对齐
      3.center 在交叉轴居中对齐
      4.baseline 在交叉轴基线对齐
      5.stretch 如果项目为设置尺寸，在交叉轴上占满所有空间
      6.auto 继承父元素的align-items效果

CSS hack

IE firefox chrome
不同浏览器对css的解析不一样，导致一份代码生成的效果不同
我们需要针对不同的浏览器，写不同的css样式
这个针对不同浏览器编写不同css cord的过程
就叫做CSS hack
淘宝不支持ie8
boot4也不支持ie8
拓展视频在tmooc上

转换

改变元素在页面中位置，大小，角度以及形状的一种方式
2D转换：只在x轴和y轴上发生转换效果
3D转换：增加了z轴的转换效果
网页中不存在真正的3d，模拟出来的

转换属性

transform
取值:
1.none 默认值，无任何转换效果
2.transform-function
一个或多个转换函数，多个的话，中间用空格隔开

转换原点

transform-origin
取值：px为单位的数字
      %
      关键字 left/center/right top/center/bottom
取值个数：2个值，表示原点在x轴和y轴上的位置
      3个值 表示原点在x轴，y轴，z轴上的位置

2D转换

1.位移
改变元素在页面中的位置
2.属性transform
   取值
       2.1translate(x) 指定元素在x轴上的位移距离
+ 往右移 - 往左移
      2.2 translate(x.y) 指定元素在x轴和y轴上的位移距离
x同上
y: +往下，-往上
      2.3 translateX(x) 只设置x轴上的位移
      2.4 translateY(y) 只设置y轴上的位移

2.缩放
改变元素在页面中的尺寸
transform
取值 1.scale(value)
value 横向和纵向的缩放比例，默认为1
>1 放大
0 -1 value<-1 翻转放大
2.scale(value1,value2)
value1,x轴的缩放比例
value2，y轴的缩放比例
3.scaleX(x)
4.scaleY(y)

3.旋转
改变元素在页面中的角度
transform:rotate(ndeg)
n为+ 顺时针
n为- 逆时针

注意：
      1.旋转是连同坐标一起旋转的，会影响旋转之后的位移效果
      2.旋转原点会影响最后旋转效果

4.倾斜
改变元素在页面中的形状
transform:skew(x)
skew(x)同skewX(x)
让元素向着x轴发生倾斜效果，实际上是改变y轴的角度
x:+ y轴逆时针倾斜
x:- y轴顺时针倾斜
skewY(y)
让元素向着y轴发生倾斜效果，实际上是改变x轴的角度
y:+ x轴顺时针倾斜
y:- x轴逆时针倾斜
skew(x,y)

3d转换

1.透视距离
模拟人的眼睛到3d转换元素之间的距离
perspective
此属性，要加在转换元素的父元素上

2.3D旋转
transform:
取值
1.rotateX(xdeg)
以x轴为中心轴，旋转元素的角度(老式爆米花机，烤羊腿)
2.rotateY(ydeg)
以y轴为中心轴，旋转元素的角度(自动门)
3.rotateZ(zdeg)
以z轴为中心轴，旋转元素的角度(摩天轮)
4. rotate3D(x,y,z,ndeg)
x,y,z取值大于0，表示参与旋转
取值为0表示部参与
rotate3D(1,1,1,35deg)

过渡

CSS属性的值，在一段时间内平缓的变化
1.设置过渡属性
transition-property:
取值：1.all 能使用过渡的属性，一律用过渡体现
      2.具体的属性名称
能够使用过渡的属性
1.颜色属性
2.取值为数字的属性
3.转换
4.阴影
5.渐变
6.visibility

过渡

属性

1.transition-property
2.transition-duration
3.指定过渡时间曲线函数
transition-timing-function:
取值 1.ease 默认值，慢速开始，速度加快，慢速结束
       2.linear 匀速
       3.ease-in 慢–快
      4.ease-out 快–慢
      5.ease-in-out 慢速开始，慢速结束，中间先加速后减速

4.指定过渡元素的延迟时间
transition-delay
取值，以s/ms为单位的数字

5.过渡属性编写的位置
      5.1将过渡放在元素声明的样式中，有去有回
      5.2将过渡放在触发的操作中(hover),只管去，不管回

6.过渡的简写方式
transition：property duration timing-function delay;
一个过渡最简洁方式是transition:duration;

动画（终点************）

1.什么是动画
使元素从一种样式逐渐变为另一种样式
就是将多个过渡效果结合到一起

2.动画是通过"关键帧"，来控制动画的每一步
关键帧
      1.动画执行的时间点
      2.在该时间点上的样式

3.动画的使用步骤

1. 声明动画(定义很多关键帧)
   @keyframes 动画名称{
   0%{动画开始时的样式}
   25%{动画执行到1/4时的样式}
   50%{动画执行到1/2时的样式}
   100%{动画结束的时候的样式}
   }

2. 调用动画
   2.1指定动画名称
   animation-name:change;
   2.2指定动画播放的一个周期
   animation-duration:3s;
   2.3指定动画播放的速度时间曲线函数
   animation-timing-function
   ease/linear/ease-in/ease-out/ease-in-out
   2.4指定动画的延迟
   animation-delay
   2.5动画的播放次数
   animation-iteration-count:infinite;
   取值1.具体次数，数字
   2.infinite无限次
   2.6动画的执行方向
   animation-direction:alternate;
   取值 normal,默认值，正常播放 0-100
   reverse 逆向播放 100-0
   alternate 轮流播放 奇数次正向，偶数次逆向
   2.7简写方式
   animation:name duration timing-function delay iteration-count direction
   最简洁方式animation:change 3s;
   2.8 animation-fill-mode:
   规定动画在播放前或者播放后的显示状态
   none 默认值，不显示
   forwards 动画播放完成后，保存最后一帧的状态
   backwards 动画播放之前，在延时的过程中，动画显示第一帧
   both 是同时设置forwards和backwards
   2.9 animation-play-state:
   设置动画是处于播放还是暂定的状态上
   paused
   running

动画的兼容性
如果要低版本浏览器兼容，需要在动画声明之前加前缀
@keyframes 动画名称{关键帧}
@-webkit-keyframes 动画名称{关键帧}
@-ms-keyframes 动画名称{关键帧}
@-moz-keyframes 动画名称{关键帧}
@-o-keyframes 动画名称{关键帧}

CSS的优化

减少服务器压力
提升用户体验

1.css优化原则
尽量减少HTTP请求的个数
页面顶部引入css文件
将css和js写在独立的文件中

2.CSS代码优化
合并样式
缩小样式文件
减少样式重写
避免出现空的src和href
选择更优的样式属性值
代码压缩

Bootstrap

www.bootcss.com

1.响应式布局（重点）
Responsive web page 响应式布局/自适应网页
可以根据浏览器设备不同(pc,pad,phone)
而自动的更改布局，图片，文字效果，不会影响用户体验

2.响应式布局必须做到

1. 布局:不能使用固定宽度，必须是流式布局(浮动)
2. 文字和图片大小随着容器大小而改变
3. 媒体查询技术

3.如何测试响应式网页

1. 使用真实设备测试
   好处：真实可靠
   坏处：测试任务量巨大

2. 使用第三方模拟器
   好处:无需添置太多真实设备，测试方便
   坏处：测试效果有限，需要进一步验证

3. 使用chrome等浏览器自带的模拟器
   好处：简单方便
   坏处: 测试效果有限，需要进一步验证

4.编写响应式布局—重点**********************************************

1.在meta中声明viewport元标签

使用meta设置视口
viewport 视口
width=device-width,视口宽度设置为设备宽度
initial-scale=1.0 视口宽度是否能缩放 1/1.0 不缩放
maximum-scale=1.0 允许缩放的最大倍率
user-scalable=0 是否允许用户手动缩放 yes/no/1/0
一般设置

2.所有内容/文字/图片使用相对尺寸，不要使用绝对值

3.流式布局+弹性布局，搭配媒体查询技术

4.使用css3 Media Query技术–响应式布局的必备条件
Media：媒体，指的是浏览网页的设备
       screen(pc/pad/phone)
       tv（电视)
      print（打印机）…
Media Query:媒体查询，可以根据当前浏览器设备不同，或者尺寸/方向/解析度等不同。有选择性的执行一部分CSS样式，忽略其他部分的css样式

根据媒体查询的结果执行同一个css文件中不同的代码块

@media screen and （min-width:768px） and (max-width:991px){
   选择器{样式}
   选择器{样式}
}