一.css3概述

Cascading style sheets 层叠样式表，级联样式表，简称样式表。

1.作用

对html标签进行装饰，让页面变的好看

2.html与css的关系

HTML：负责网页的结构，和内容的搭建
CSS：负责网页的修饰，样式的处理

3.css与html属性的使用规则

W3C建议我们尽量的使用css的方法来取代html属性；
css可以是样式代码重用(有限)
方便后期维护，提高可维护性

二.css语法规范

1.使用css样式的方法

（1）行内样式(内联样式)

1）不能重用，优先级最高
2）将css样式定义在标签的style属性中
3）样式声明：样式属性:值; 多个样式声明之间使用;隔开
4）常用样式：color:颜色单词 设置字体颜色
background-color:颜色单词 设置背景颜色
font-size:以px为单位的数字，设置字号大小

<any style=“样式属性:值;样式属性:值;”></any>

（2）内部样式

1）优先级与外部样式属于同一级别，两者遵循就近原则
2）样式的重用只在当前页面有效
3）在head标签中添加<style></style>标签，在style标签中定义该网页的样式

<style>
    选择器{css属性:值;}
</style>

（3）外部样式

1）优先级与内部样式属于同一级别，两者遵循就近原则
2）单独创建一个css文件编写样式
3）在html文件的head标签中使用link标签引入

<link rel="stylesheet" href="my.css">

2.CSS样式的特性

（1）继承性

大部分的样式可以直接被子元素继承

（2）层叠性

可以为一个元素定义多个样式规则；规则中属性不冲突，多个值都起作用

（3）优先级

1）如果样式声明发生属性冲突，按照样式的优先级规则来应用
2）优先级规则：内联样式 > 内部和外部样式，遵循就近原则 > 浏览器默认样式

（4）调整优先级

!important规则
1）写在值和;之间，使用空格和值分开
2）添加了!important的css属性直接获得最高优先级，比内联都高
3）内联样式不能添加

<style>
    选择器{css属性:值 !important;css属性:值;} 
</style>

三.基础选择器

1.作用

规范了页面中哪些元素能够使用定义好的样式；选择器就是为了匹配元素(符合选择器这个条件的元素，就能应用定义的样式)

2.通用选择器 *{}

（1）页面中所有元素，都使用这个样式
（2）由于*号效率低下，不建议使用；如果使用，只在一个地方使用，所有元素内外边距清0

<style>
    *{样式声明}
    *{margin:0;padding:0}
</style>

3.id选择器(专属定制) #id{}

<any id="id值"></any>
<style>
    #id值{css属性:值;}
</style>

4.类选择器 .类名{}

（1）多类选择器

通过class属性引用定义的类选择器；一个元素可以调用多个类名

（2）分类选择器

1）元素选择器.类选择器{} h3.text_red{background-color:green;}
引用了这个类选择器的这个元素，应用这个样式，更精确的匹配到元素
2）.类选择器.类选择器{} .text_red.c1{background-color:orange;}
同时引用了这两个类选择器的元素，应用此样式

<any class="类名"></any>
//一个元素调用多个类名，多类选择器
<any class="c1 c2 c3">多类选择器</any>
<style>
    .类名{样式声明}
</style>

5.元素选择器(标签选择器)

定义页面中，此标签应用的公用样式 any{}

<style>
    body{margin:0;}
    a{text-decoration:none;}
    input{border:0;margin:0;}
    dl,dt,dd{margin:0;}
    ul{margin:0;padding:0;}
    li{list-style:none;}
</style>

6.群组选择器

定义多个选择器的公共样式，选择器之间用逗号隔开 选择器1,选择器2,选择器3{}

<style>
    选择器1,选择器2,选择器3...{样式声明}
    #d1,.c1,div{color:red;}
</style>

7.后代选择器

通过元素后代关系来匹配元素，一层或多层嵌套 选择器1 选择器2 选择器3{}

<style>
    选择器1 选择器2 选择器3...{样式声明}
</style>

8.子代选择器

通过元素子代关系匹配元素，一层嵌套结构 选择器1>选择器2{}

<style>
    选择器1>选择器2...{样式声明}
    //后代选择器与子代选择器混写
    选择器1>选择器2 选择器3{样式声明}
    选择器1 选择器2>选择器3{样式声明}
</style>

9.伪类选择器

匹配元素不同状态下的样式 选择器:状态{}

<style>
    选择器:link{} 链接未被访问的状态
    选择器:visited{} 链接已被访问过的状态
    选择器:hover{} 鼠标悬停在元素上的状态
    选择器:active{} 元素被激活时的状态
    选择器:focus{} 元素获取焦点时的状态
    a:link{color:pink;text-decoration:none;}
    a:visited{color:orange;}
    a:hover{color:red;}
   a:active{color:blue;}
   input:focus{color: yellow;}
</style>

10.选择器的权值

（1）标识当前选择器的重要程度，权值越大，优先级越高

!important >1000
内联样式 1000
id选择器 100
类选择和伪类 10
元素选择器 1
*通用 0
继承的样式 无

（2）权值的特点

1）当一个选择器中含有多个选择器时，需要将所有选择器的权值相加，权值大的优先显示
2）权值相同，就近原则
3）!important直接获取最高权值，不能用在内联样式中
4）群组选择器的权值，单独计算，不能相加
5）选择器权值的计算，不会超过自己的最大数量级
（100个1，加一起也小于10）

四.尺寸和颜色

1.尺寸

（1）尺寸属性

改变元素的宽高；如果块级元素没设置宽度，默认宽度是父元素宽度100%
width: 以px为单位的数字或以%相当于父元素的百分比
height: 以px为单位的数字
max-width/height: 宽/高度可变的前提下，设置最大宽/高度；100%图片可以缩放，但最大不能超过本身默认尺寸
min-width/height: 宽/高度可变的前提下，设置最小宽/高度

（2）尺寸单位

px 像素
in 英寸 1in=2.54cm
pt 磅值 1pt=1/72in,多用于字号大小
cm
mm
% 相对单位
em 相对于父元素的值乘以的倍数，1em=父元素的取值
rem 相对于html中设置值乘以的倍数。1rem=html的取值

（3）页面中允许设置宽高的元素

块级
设置宽高有效
不设置宽，默认宽为父元素100%；不设置高，默认高靠内容撑开，没有内容就没有高

行内
设置宽高无效
宽高靠内容撑起，没有内容就没有宽高
自带宽高属性的元素，可以设置宽高

行内块
设置宽高有效
默认自带一个宽高，但是根据浏览器不同，这个宽高的值也不同

2.颜色取值

color:red green blue yellow black pink... 颜色单词
#rrggbb 十六进制6个数
#abc 简写
rgb(0~255,0~255,0~255) 色段取值范围
rgba(0~255,0~255,0~255,0~1) 取值范围；alpha透明度0~1；transparent纯透明

<style>
    元素{color:英文单词;}
    元素{color:#十六进制六个数;}
    元素{color:rgba(0~255,0~255,0~255,0~1);}
</style>

3.溢出

当内容较大，元素区域较小，会发生溢出效果，默认纵向溢出
overflow:visible 默认，溢出部分可见
overflow:hidden 溢出部分隐藏
overflow:scroll 不管是否溢出，都有滚动条
overflow:auto 溢出时有滚动条，不溢出没有
overflow-x: 设置水平滚动条
overflow-y: 设置垂直滚动条

<style>
    父级元素{width: 300px;height: 500px;overflow: visible;}
</style>

五.框模型(盒子模型)

1.框模型(盒子模型)概念

（1）元素在页面上实际占地空间的计算方式

1）一切元素皆为框，所有元素都有占地空间
2）浏览器默认的元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右
边框+右外边距；
3）浏览器默认的元素实际占地高度=上外边距+上边框+上内边距+内容区域高度+下内边距+下
边框+下外边距；

（2）改变框模型计算方式(多用于，当width取值为%)

1）box-sizing:content-box是标准盒模型(左右内外边距+左右边框+内容)默认
设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话
盒子的实际宽度会增大。
2）box-sizing:border-box是怪异盒模型(左外边距+width+右外边距)
设置width的值为border+padding+内容区域的宽度,width设置为%时使用;
媒体查询布局，经常要定义

2.边框border

（1）基础属性

简写border:width style color;
边框宽度width: 以px为单位的数字，默认1.5px
边框颜色color: 以颜色值，transparent，默认#000
边框样式style:solid实线; dotted点点虚线; dashed断线虚线; double双实线

单边定义
border-top:
border-right:
border-bottom:
border-left:

单属性定义
border-color:
border-width:
border-style:

单边单属性定义
border-top/right/bottom/left-width/style/color:

（2）边框倒角(把直角倒成圆角)border-radius:

1）border-radius:以px为单位的数字或以%百分比；50%就是圆
2）单角设置，先写上下，再写左右：border-top-right-radius:
border-bottom-left-radius:
border-top-left-radius:
border-bottom-right-radius:

（3）边框阴影box-shadow:

box-shadow:h-shadow v-shadow blur spread color;
h-shadow 阴影水平偏移
v-shadow 阴影垂直偏移
blur 阴影模糊距离
spread 阴影大小
color 阴影颜色
inset 将默认的外部阴影变为内部阴影

（4）轮廓：边框外面的一圈线

outline:width style color;
outline:0/none;清除轮廓
border:0/none;清除边框

<style>
    any{
      width: 300px;
      height: 300px;
      /* 简写 */
      border: 2px solid red;
      /* 单边定义 */
      border-top: 3px dotted orange;
      /* 单属性定义 */
      border-style: double;
      /* 单边单属性定义 */
      border-bottom-width: 10px;
      /* 倒角 */
      border-radius: 20%;
      /* 单角设置 */
      border-top-right-radius: 10%;
      border-top-left-radius: 20%;
      border-bottom-right-radius: 12%;
      border-bottom-left-radius: 30%;
      /* 阴影 */
      box-shadow: 20px 40px 10px 5px black inset;
      /* 轮廓 */
      outline: 6px dashed blue;
    }
  </style>

3.外边距margin(元素与元素之间距离；改变外边距，元素有位移效果)

（1）语法

css属性
margin:设置4个方向外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
当左右外边距，或者上下外边距冲突时，优先应用左和上

取值
1）以px为单位的数字；
2）% 父元素宽度百分比；
3）auto 让元素水平居中，对上下外边距无效，只对设置了宽度的元素有效；

简写
margin:v1;
margin:v1 v2;
margin:v1 v2 v3;
margin:v1 v2 v3 v4; 上右下左

（2）外边距特殊效果

合并：两个垂直外边距相遇时，他们会合并成一个，值以大的为准；
解决方案：单独写某一个元素的上或者下外边距，在设置的时候就要规避；

（3）关于块级元素，行内元素，行内块的总结

块级
p h1~h6 pre hr div
独占一行
设置宽高有效
默认宽：父元素100%默认高：内容撑开
4个方向外边距都有效

行内
span i em b strong u s del sup
与其他行内或者行内块共用一行
设置宽高无效，靠内容撑开
默认宽高：内容撑开
上下外边距无效

行内块
sub input
与其他行内块或者行内共用一行
设置宽高有效
自带一个默认宽高，不同浏览器宽高不同
4个方向外边距有效；改变垂直外边距，同行其他元素跟着一起动

（4）自带外边距元素(css重置)

不同浏览器，对这些元素的默认外边距的解析可能不同，所以开发之前，经常会把这些默认样式清空 *{margin:0;padding:0}

（5）外边距溢出

特殊情况下,为子元素设置上外边距会作用到父元素上；在第一个子元素位置添加空的<table>
特殊情况
1）父元素不能有上边框
2）子元素的内容区域上边沿与父元素内容区域上边沿重合(为第一个子元素设置上外边距时，会溢出，不严谨)

解决方案
1）给父元素设置上边框;弊端：父元素实际占地高度增加了
2）父元素添加上内边距;弊端：父元素实际占地高度增加了
3）父元素添加overflow:outo/hidden;弊端：父元素不能在溢出显示了
4）在父元素的第一个子元素的位置，添加一个空的table(让父元素内容区域上边沿和子元素内容区域上边沿分离)

<div id="d1"></div>
<div id="d2">
  <table></table>
  <div id="d3"></div>
</div>
<style>
    *{
       margin: 0;
       padding: 0;
    }
    #d1{
      width: 200px;
      height: 200px;
      background-color: blue;
      margin: 10px 20px 30px 40px;
    }
    #d2{
      width: 200px;
      height: 200px;
      background-color: brown;
      margin: 0px 20px;
    }
    #d3{
      width: 100px;
      height: 100px;
      background-color: burlywood;
      margin-top: 40px;
    }
  </style>

4.内边距padding

边框与内容之间的距离；常用于撑开背景色;改变元素内边距的效果，会改变本身实际占地大小，不会影响其他元素
css属性
padding:设置4个方向内边距
padding-top:
padding-right:
padding-bottom:
padding-left:

取值
1）以px为单位的数字；
2）% 父元素宽度百分比；

简写
padding:v1;
padding:v1 v2;
padding:v1 v2 v3;
padding:v1 v2 v3 v4; 上右下左

注：padding有颜色，margin是透明的

六.背景

1.背景颜色

background-color:颜色值

2.背景图片

引入

background-image: url(图片资源路径)
使用背景图，可以让子元素堆叠显示在背景图上

平铺

background-repeat: repeat 默认
background-repeat:no-repeat 不平铺
background-repeat:repeat-x x轴平铺
background-repeat:repeat-y y轴平铺

定位

background-position: 2个值 以px为单位数字
background-position:x% y% 百分比
background-position:left/center/right top/center/bottom 关键字

尺寸

background-size: 1个值 同时设置x,y轴的大小
background-size:2个值 分别设置x,y轴的大小
background-size:cover 让图片覆盖整个容器，图片显示不全没关系
background-size:contain 让容器包含整个图片，容器有空白没关系

固定

background-attachment: scroll 背景图随着窗口滚动条滚动
background-attachment:fixed 背景图不随着窗口滚动条滚动，但是只在原始容器中才显示，当容器定义了background- attachment:fixed，背景图片的固定相对于body偏移的

综合简写 background:color image repeat attachment position;

<style>
    .d1{
      height: 2000px;
      /* 背景颜色 */
      background-color: blue;
      /* 背景图片 */
      background-image: url(./bg-img.jpg);
      /* 背景图片平铺 */
      background-repeat: repeat;
      /* 背景图片定位 */
      background-position: right bottom;
      /* 背景图片尺寸 */
      background-size: cover;
      /* 背景图片固定 */
      background-attachment: fixed;
    }
</style>

七.渐变

渐变指多种颜色平缓变化的一种效果；一个渐变效果至少两个色标

1.线性渐变

以直线的方式来填充渐变色
语法：background-image:linear-gradient(方向,色标1,色标2,...);
方向：①to top/right/bottom/left ②0~360deg 角度表达方式
色标：①颜色值 位置(百分比/px值) ②只写颜色值

2.径向渐变

以圆形的方式填充渐变色
语法：background-image:radial-gradient(半径 at 圆心x 圆心y,色标1,色标2,...);
半径：以px为单位的数字
圆心：①x y 以px为单位数字 ②x% y% ③left/center/right top/center/bottom 关键字
色标：颜色值 位置只有使用%时，半径才生效

3.重复渐变

将线性和径向重复几次实现，多种颜色渐变
语法1：background-image:repeating-linear-gradient(方向,色标1,色标2,色标3...);
语法2：background-image:repeating-radial-gradient(半径 at 圆心x 圆心y,色标1,色标2,色标3...);

<style>
    /* 线性渐变 */
    #d1{
      width: 200px;
      height: 200px;
      background-image: linear-gradient(to bottom,yellow,green);
      /* background-image:linear-gradient(45deg,red,blue); */
    }
    /* 径向渐变 */
    #d2{
      width: 200px;
      height: 200px;
      background-image: radial-gradient(100px at center 50%,red,blue 50%);
    }
    /* 重复渐变 */
    #d3{
      width: 200px;
      height: 200px;
      background-image: repeating-linear-gradient(to bottom,yellow 10px,green 20px,red 30px);
    }
    #d4{
      width: 200px;
      height: 200px;
      background-image: repeating-radial-gradient(100px at center center,yellow 10%,green 20%,red 30%);
    }
  </style>

八.文本格式化

1.字体属性

（1）字号大小

font-size:数值px
font-size:数值pt
font-size:数值rem
font-size:数值em

（2）字体系列

font-family:字体系列,字体系列;
pc中字体库有的字体，如果字体名称带空格，加""

（3）字体加粗

font-weight:normal; 默认
font-weight:bold;
font-weight:lighter;
font-weight:bolder;
font-weight:数值，倍数; 无单位，100的整倍数

（4）字体样式

font-style:italic; 斜体
font-style:normal; 正常

（5）小型大写字母

font-variant:small-caps;

（6）综合简写

font:style variant weight size family;
最简方式：font:size family;

2.文本属性

（1）字体颜色

color:颜色值

（2）文本对齐方式

text-align:left/center/right/justify;
注：1.text-align让内部行内元素和行内块元素水平对齐
2.margin:auto;让块级元素水平居中

（3）行高

line-height:以px为单位的数字
line-height:无单位的数字，行高是字号的倍数
注：如果设置的行高大于文本本身字号大小，这行文本会在行高范围内垂直居中；文本有多行，不建议使用行高来设置文本垂直居中

（4）文本线条修饰

text-decoration:overline; 上划线
text-decoration:underline; 下划线
text-decoration:line-through; 删除线
text-decoration:none;

（5）首行缩进

text-indent:以px为单位的数字

（6）文本阴影

text-shadow:h-shadow v-shadow blur color;
注：h-shadow 水平偏移
v-shadow 垂直偏移
blur 模糊距离
color 阴影颜色

<style>
    .d4{
          /* 字号大小 */
          font-size: 36px;
          /* 字体类型 */
          font-family: Arial, Helvetica, sans-serif;
          /* 字体加粗 */
          font-weight: bold;
          /* 字体样式倾斜 */
          font-style: italic;
          /* 小型大写字母 */
          font-variant: small-caps;
          /* 字体颜色 */
          color: red;
          /* 文本对齐方式 */
          text-align: center;
          /* 文本行高 */
          line-height: 100px;
          /* 文本线条修饰 */
          text-decoration: underline;
          /* 首行缩进 */
          text-indent: 50px;
          /* 文本阴影 */
          text-shadow: 10px 20px 40px #ff0;
        }
</style>

九.表格

1.常用属性

（1）table

width: 宽px
height: 高px
background: 背景
border: 边框样式
font: 文本
margin: 外边距
padding: 内边距
…
给table设置边框是指最外层边框

（2）td/th

width: 宽
height: 高
background: 背景
border: 边框
font: 文本
padding: 内边距
vertical-align:top/middle/bottom 文本垂直居中
…

2.表格专有样式(注：表格边框有两层)

（1）边框状态

border-collapse:separate; 默认分离状态
border-collapse:collapse; 合并状态

（2）边框边距

border-spacing:1个数值 同时设置水平和垂直距离
border-spacing:2个数值 分别设置水平和垂直距离
注：前提，边框必须是分离状态；此处设置的边距指的是表格的内外层边框距离

（3）标题位置

caption-side:top/bottom;
注：表格的标题

（4）表格显示规则

table-layout:auto; 默认自动表格布局；内容大以内容为主，尺寸大以尺寸为主；渲染之前，把表格内容全部读到内存中，一次性渲染
table-layout:fixed; 固定表格布局；以尺寸为主，逐行渲染

3.自动布局

单元格大小会自动适应内容
表格复杂时，加载速度很慢
自动布局比较灵活
适用于不确定每列大小的，不复杂的表格

4.固定布局

单元格大小取决设置的尺寸
加速加载表格
固定布局不灵活
适用于确定每列大小的表格

<table>
    <caption>成绩单</caption>
    <tr>
      <th>类别</th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
      <th>体育</th>
    </tr>
    <tr>
      <th>小明</th>
      <td>89</td>
      <td>87</td>
      <td>98</td>
      <td>79</td>
    </tr>
</table>
<style>
    table{
      width: 500px;
      height: 120px;
      border: 2px double black;
      background-color: rgb(231, 231, 231);
      font-family: Arial, Helvetica, sans-serif;
      /* 边框分离/合并 */
      border-collapse: separate;
      /* 边框边距 */
      border-spacing: 10px;
      /* 标题位置 */
      caption-side: top;
      /* 设置表格显示规则 */
      table-layout: fixed;
    }
    th,td{
      border: 1px double black;
      /* 文本对齐方式 */
      vertical-align: middle;
      padding: 20px;
    }
</style>

十.定位

改变元素在页面中的位置。

1.普通流定位(默认文档流定位)

position:static;默认，不需要设置
1）每个元素在页面上都有自己的空间
2）每个元素都是父元素的左上角开始显示
3）块级元素按照从上往下的顺序排列，每个元素独占一行；
4）行内/行内块元素多个元素在一行，从左往右显示；

2.浮动定位(解决块级元素横向显示)

（1）语法

float:left; 左浮动；让元素脱离文档流后，在当前行向父元素的左边对齐
float:right; 右浮动；让元素脱离文档流后，在当前行向父元素的右边对齐
float:none; 不浮动；还在文档流里

（2）特点

1）元素发生浮动，都会变成块级且不占页面空间，后续元素上前补位；
2）浮动元素停靠在父元素的左/右边缘，或其他已浮动元素后面；
3）父元素横向显示不下所有浮动元素，会把显示不下的元素换行；
4）块元素横向显示，靠浮动解决；

（3）浮动引发的特殊情况

1）浮动元素的占位问题：当父元素显示不下所有浮动元素时，最后显示不下会换行；但是，已浮动元素会根据自己的浮动方向占据位置，导致被挤下去的元素需要躲开这个占位显示
2）元素一旦浮动，如果元素未定义宽度，那么元素的宽度靠内容撑开
3）元素一旦浮动，变为块级元素(设置宽高有效，上下外边距有效)
4）文本，行内，行内块元素不会被浮动元素压在下面，会绕开环绕浮动元素显示；

（4）清除浮动

清除之前浮动元素带来的影响(上前补位)
clear:left; 清除左浮动的影响
clear:right; 清除右浮动的影响
clear:both; 清除左右浮动的影响

（5）高度坍塌

父元素不设置高度，子元素都浮动，父元素就找不到高
解决方案：1）父元素写高度，弊端很多时候高度确定不了
2）父元素也浮动，弊端会影响父元素的兄弟元素
3）给父级添加overflow:hidden;
4）父级内追加空的div，设置clear:both;

<div class="d">
    <div class="d1"></div>
    <div class="d2"></div>
    <a href="">链接链接</a>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="dk"></div>
</div>
<style>
    .d1,.d2,.d3,.d4{
      width: 400px;
      height: 200px;
    }
    .d1{
      background-color: red;
      float: left;
    }
    .d2{
      background-color: blueviolet;
      float: left;
    }
    .d3{
      background-color: blue;
      float: left;
    }
    /* 清除浮动，不上前补位 */
    .d4{
      background-color: yellow;
      clear: both;
    }
    /* 解决高度坍塌 */
   .d{
      overflow: hidden;
    } 
    /* 追加空的div解决高度坍塌 */
    .dk{
      clear: both;
    }
</style>

3.相对定位position:relative;

（1）概念

不脱离文档流，对周围元素的位置没有任何影响;如果不写偏移属性，效果与没写定位一样;相对自己原来位置做偏移

（2）使用场合

类似于margin，做自身位置的微调;作为绝对定位的祖先级已定位属性

4.绝对定位position:absolute;

（1）概念

脱离文档流;如果没有已定位的祖先级元素，相对body左上角偏移

（2）使用场合

相对于，最近的，已定位的祖先级元素做偏移,把祖先级变成已定位元素的样式

5.固定定位position:fixed;

将元素固定在页面上每个位置，不会随着滚动条滚动变化位置，一直固定在可视区域
注：一个元素被position修饰，并且取值为relative/absolute/fixed被称为已定位元素；
解锁4个偏移属性：top;right;bottom;left

<div class="relative">
    <div class="absolute"></div>
</div>
<div class="fixed"></div>
<style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 200px;
    }
    /* 相对定位 */
    .relative{
      background-color: chocolate;
      margin: 20px;
      position: relative;
      top: 20px;left: 20px;
    }
    /* 绝对定位 */
    .absolute{
      background-color: crimson;
      position: absolute;
      top: 40px;left: 40px;
    }
    /* 固定定位 */
    .fixed{
      background-color: darkgreen;
      position: fixed;
      top: 400px;left: 400px;
    }
</style>

6.堆叠顺序z-index:无单位整数;

1）只能对已定位元素使用z-index
2）对父子级元素无效，子级永远比父级高
3）不设置则最后一个元素最高（html的最后），堆叠顺序高的在上面
4）定位的堆叠和浮动的脱离文档流，不是一个体系
5）默认，后声明的定位元素，堆叠顺序高，但是不会超过1

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4">
    <div class="z1"></div>
</div>
<style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 200px;
      position: absolute;
      top: 0px;left: 0px;
    }
    .d1{
      background: red;
      z-index: 1;
    }
    .d2{
      background: rosybrown;
      margin: 10px;
      z-index: 2;
    }
    .d3{
      background: seagreen;
      margin: 20px;
      z-index: 3;
    }
    .d4{
      background: slateblue;
      margin: 30px;
      z-index: 4;
    }
    .z1{
      width: 100px;
      height: 100px;
      background: springgreen;
      position: absolute;
      top: 10px;left: 10px;
    }
</style>

十一.显示方式

1.设置元素显示方式

display:inline; 行内
display:block; 块级
display:inline-block; 行内块
display:table; 让元素的显示方式变为table方式
display:none; 脱离文档流的隐藏
display:flex; 将块级元素设置成容器
display:inline-flex; 将行内元素设置成容器

2.显示效果

visibility:visible; 显示
visibility:hidden; 不脱离文档流隐藏

3.透明度

opacity:0~1
opacity元素内部所有颜色的透明度都会跟着改变
rgba只改变当前的透明度

4.垂直对齐方式

1）用在table，控制table中的内容的垂直对齐方式
vertical-align:top/middle/bottom
2）用在图片，给图片设置垂直对齐，图片本身不动，影响的是图片前后的文本位置
经常为图片设置，让文本不以基线对齐
vertical-align:top/middle/bottom/baseline(默认)

5.光标(鼠标)的设置

cursor:default; 默认箭头
cursor:pointer; 小手
cursor:text; 文本
cursor:wait; 等待
cursor:crosshair; +
cursor:help; 帮助

6.列表样式

设置列表标识项
list-style-type:disc; 默认值实心圆
list-style-type:cricle; 空心圆
list-style-type:square; 实心方块
list-style-type:none; 不显示

标识项设置为图片 list-style-image:url()

列表项的位置
list-style-position:inside; 标识项占用宽度
list-style-position:outside; 标识项不占用宽度

综合简写
list-style:type image position;
使用最频繁写法：list-style:none;

无序列表在项目中地位和使用方式，ul多用于布局

十二.复杂选择器

1.兄弟选择器

1）兄弟元素：具备相同父元素的平级元素
兄弟选择器：只能通过哥哥找弟弟，只能往后边兄弟写，不能往前面找
2）相邻兄弟选择器：选择器1+选择器2{} 获取紧紧挨着某元素后面的兄弟元素
通用兄弟选择器：选择器1~选择器2{} 获取某元素后面所有符合要求的兄弟元素
3）多用于除掉第一个元素，其他兄弟都使用的样式设置时

<p id="d1">老大</p>
<p>二娃</p>
<b class="d">三娃</b>
<span title="ganjuezijimengmengda">四娃</span>
<b>五娃</b>
<p class="c" title="123">六娃</p>
<div style="">七娃</div>
<h3 title="gan jue zi ji meng meng da">老幺</h3>
<style>
    /* 后面相邻兄弟选择器 */
    p+p{
      color: red;
    }
    /* 元素后面所有符合要求兄弟 */
    p~b{
      color: blue;
    }
</style>

2.属性选择器

[attr]{} 匹配定义了attr这个属性的元素
[attr1][attr2]{} 匹配同时定义了attr1和attr2属性的元素
[attr=value]{} 匹配定义了attr同时值为value的元素
[attr1=value1][attr2=value2]{} 匹配同时定义了attr1值为value1和attr2值为value2
elem[attr]{} 匹配定义了attr的elem元素
elem[attr=value]{} 匹配定义了attr的值为value的elem元素
[attr^=value]{} 匹配attr值的开头是value的元素
[attr$=value]{} 匹配attr值的结尾是value的元素
[attr*=value]{} 匹配attr值里有value的元素
[attr~=value]{} 匹配attr值有value这个单词(前后有空格)的元素

<p id="d1">老大</p>
<p>二娃</p>
<b class="d">三娃</b>
<span title="ganjuezijimengmengda">四娃</span>
<b>五娃</b>
<p class="c" title="123">六娃</p>
<div style="">七娃</div>
<h3 title="gan jue zi ji meng meng da">老幺</h3>
<style>
    /* 匹配定义了attr这个属性的元素 */
    [title]{
      color: rgb(236, 83, 12);
    }
    /* 匹配同时定义了attr1和attr2属性的元素 */
    [class][title]{
      color: blueviolet;
    }
    /* 匹配定义了attr的elem元素 */
    p[id]{
      color: darkgreen;
    }
    /* 匹配定义了attr同时值为value的元素 */
    [class="d"]{
      font-size: 36px;
    }
    /* 匹配定义了attr的值为value的elem元素 */
    p[class="d"]{
      font-size: 48px;
    }
    /* 匹配同时定义了attr1值为value1和attr2值为value2 */
    [class="c"][title="123"]{
      text-decoration: line-through;
    }
</style>

模糊属性值：

<p id="d1">老大</p>
<p>二娃</p>
<b class="d">三娃</b>
<span title="ganjuezijimengmengda">四娃</span>
<b>五娃</b>
<p class="c" title="123">六娃</p>
<div style="">七娃</div>
<h3 title="gan jue zi ji meng meng da">老幺</h3>
<style>
     /* 以gan开头的属性值 */
    [title^=gan]{
      text-decoration: overline;
    }
    /* 以da结尾的属性值 */
    [title$=da]{
      text-align: center;
    }
    /* 有men的属性值 */
    [title*=men]{
      text-shadow: 10px 10px 20px #333333;
    }
    /* 有ji这个独立单词的属性值 */
    [title~=ji]{
      font-size: 100px;
    }
</style>

3.伪类选择器

:target{} 匹配锚点被激活的状态
elem:first-child{} 匹配elem的父元素的第一个孩子，并且这个大哥还必须是elem
elem:last-child{} 匹配elem的父元素的最后一个孩子，并且还必须是elem
elem:nth-child(n){} 匹配elem的父元素的第n个孩子
:empty{} 匹配内部没有任何元素的标签
:only-child{} 匹配属于其父元素的唯一子元素
:not(seletor){} 符合seletor的元素都不要

4.伪元素选择器

:first-letter{}/::first-letter{} 匹配首字符
:first-line{}/::first-line{} 匹配首行
::selection{} 匹配用户选中部分(只能写背景色和字体颜色，对首字符无效)

<a href="#md">瞄点</a>
<div id="md">内容内容内容内容</div>
<div>
    <h2>大哥</h2>
    <p class="p1">二哥</p>
    <p>三哥</p>
    <h3>小弟</h3>
</div>
<div></div>
<div>
    <p>独生子</p>
</div>
<style>
    /* 目标伪类，匹配瞄点被激活内容div的状态 */
    :target{color: red;}
    /* 结构伪类，第一个孩子的状态 */
    div :first-child{color: red;}
    /* 结构伪类，最后一个孩子的状态 */
    div :last-child{color: blue;}
    /* 结构伪类，第n个孩子的状态 */
    div :nth-child(2){color: yellow;}
    /* 匹配内部没有任何元素的标签 */
    :empty{width: 100px;height: 100px;background-color: tomato;}
    /* 匹配父级的未设置的唯一子元素状态 */
    :only-child{color: teal;}
    /* 否定伪类，除了该元素的标签都改变 */
    p:not(.p1){font-size: 50px;}
    /* 伪元素选择器，首字符样式 */
    :first-letter{font-size: 50px;}
    ::first-letter{color: yellowgreen;}
    /* 伪元素选择器，首行样式 */
    :first-line{font-size: 10px;}
    ::first-line{color: blueviolet;}
    /* 匹配选中部分，对首字符无效，只设置背景色和字体颜色 */
    ::selection{background-color: chocolate;color: white;}
</style>

十三.内容生成

使用css代码，添加html的内容，叫做内容生成。

1.语法

::before{}/:before{}在元素的内容区域最前方添加一个伪元素
::after{}/:after{} 在元素的内容区域最后方添加一个伪元素
我们可以设置这个元素所有样式，但是内容content:""只能添加文本/图片，默认是行内元素，可以用display修改

2.解决外边距溢出

elem:before{ content:""; display:table; }在父元素内容区域最前面，添加一个空的table元素

3.解决高度坍塌

elem::after{ content:""; display:block; clear:both; }在父元素内容区域最后面，添加一个空的清除浮动的块级元素

<elem>内容内容内容</elem>
<style>
    /* 内容生成 ,前后加内容*/
    elem::before{content:url(./bg-img.jpg);}
    elem::after{content: "吃饭了";color:red;}
    /* 内容生成 ,外边距溢出*/
    elem::before{content:"";display:table;}
    /* 内容生成 ,解决高度坍塌*/
    elem::after{content:"";display:block;clear:both;}
<style>

十四.弹性布局

1.概念

主要解决某个元素中子元素的布局方式，为布局提供了很大灵活性
容器：定义了display:flex的元素，让自己的子元素按照弹性布局排列
项目：父元素被定义成容器display:flex，所有子元素被称为项目，按照弹性布局规则排列
主轴：项目们排列方向的一根轴，共4根轴; 横向排列，x轴是主轴; 纵向排列，y轴是主轴
主轴起点/终点：项目们在主轴上排列的顺序
交叉轴：永远与主轴垂直的一根轴，共2根轴
交叉轴起点/终点：项目们在交叉轴上排列方式

2.语法

display:flex; 将块级元素设置成容器
display:inline-flex; 将行内元素设置成容器
注：当元素变为项目,float/clear失效；当元素变为容器,text-align/vertical-align失效；

3.容器属性

设置主轴方向
flex-direction:row; 默认x轴，左到右
flex-direction:row-reverse; x轴，右到左
flex-direction:column; y轴，上到下
flex-direction:column-reverse; y轴，下到上

设置项目换行(主轴方向，空间不够时，项目的处理方法)
flex-wrap:nowrap; 默认不换行，项目进行压缩
flex-wrap:wrap; 项目不压缩换行
flex-wrap:wrap-reverse; 换行并反转

综合简写：flex-flow:direction wrap;

项目在主轴上的排列方式
justify-content:flex-start; 默认主轴起点对齐
justify-content:center; 主轴中心对齐
justify-content:flex-end; 主轴终点对齐
justify-content:space-between; 两端无空白对齐
justify-content:space-around; 每个间距大小相同；

项目在交叉轴的对齐方式
align-items:flex-start; 交叉轴起点
align-items:center; 交叉轴中间
align-items:flex-end; 交叉轴终点
align-items:baseline; 基线同起点
align-items:stretch; 项目充满交叉轴方向,前提项目不写交叉轴方向尺寸

4.项目属性

设置项目在主轴上排列顺序(设置在一个项目上，不影响其他项目)
order:无单位整数; 默认值0; 值越小越靠近主轴起点

项目增长速率
flex-grow:无单位整数; 默认值0，不增长；当主轴空间大时，增长速率，值越大索取越厉害

项目缩小速率
flex-shrink:无单位整数; 默认值1；当主轴空间不够，缩小速率，值越大越缩小

单个项目在交叉轴上对齐方式
align-self:flex-start; 交叉轴起点
align-self:center; 交叉轴中间
align-self:flex-end; 交叉轴终点
align-self:baseline; 基线–同起点
align-self:stretch; 项目充满交叉轴方向,前提项目不写交叉轴方向的尺寸
align-self:auto; 使用容器上align-items定义的值

<div class="rq">
    <div class="d1">
      <p>品质保障1</p>
    </div>
    <div class="d2">
      <p>私人定制2</p>
    </div> 
    <div class="d3">
      <p>学员特供3</p>
    </div> 
    <div class="d4">
      <p>专属特权4</p>
    </div>  
    <div class="d5">
      <p>专属特权5</p>
    </div>
  </div>
  <style>
    .rq div{border:2px solid black;}
    .rq{
      width: 70%;
      height: 400px;
      background: red;
      margin: 0 auto;
      /* 将块级元素设置成容器 */
      display: flex;
      /* 设置主轴方向 */
      flex-direction: row-reverse;
      /* 设置项目换行 */
      flex-wrap: nowrap;
      /* 综合写法 */
      /* flex-flow: row-reverse wrap; */
      /* 设置项目在主轴上排列方式 */
      justify-content: space-around;
      /* 项目在交叉轴的对齐方式 */
      align-items: flex-start;
    }
     /* 项目在主轴上排列顺序，值越小越靠近主轴起点;项目在交叉轴对齐方式 */
     .d2{
       /* 设置项目在主轴上排列顺序 */
      order: 4;
      /* 交叉轴上对齐方式 */
      align-self: flex-end;
      /* 增长速率 */
      flex-grow:2;
      /* 缩小速率 */
      flex-shrink: 3;
    }
    .d4{
        flex-grow:5;
        flex-shrink: 8;
    }
</style>

十五.浏览器兼容

浏览器兼容问题：css hack
不同浏览器，对css的接收信息认知不同，导致同一份代码在不同浏览器上显示效果不同，需要我们开发人员针对不同浏览器写不同css，针对不同浏览器写不同css的过程，叫做css hack

想要兼容低版本浏览器，需编写css hack，既在代码前添加浏览器内核
chrome/safari
-webkit-

 background:-webkit-linear-gradient(方向,色标1,色标2,...)
 @-webkit-keyframes 动画名称{}

firefox
-moz-

background:-moz-linear-gradient(方向,色标1,色标2,...)
@-moz-keyframes 动画名称{}

opera
-o-

 background:-o-linear-gradient(方向,色标1,色标2,...)
 @-o-keyframes 动画名称{}

IE
-ms-

background:-ms-linear-gradient(方向,色标1,色标2,...)
@-ms-keyframes 动画名称{}

注：添加了浏览器内核前缀，方向不带to，方向写起点

十六.转换

改变元素在页面中位置，大小，角度，形状；
2D转换：只在x轴和y轴上发生转换；
3D转换：增加了z轴的转换效果，3D是模拟出来的

1.语法

转换transform:
transform:none; 默认值，无任何转换效果
transform:转换函数; 表示1个或者多个转换函数
transform:转换函数1 转换函数2...学习转换就是学习转换函数;如果是多个转换函数则之间用空格分开

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

2.转换函数

(1)2D

1)位移(改变元素位置)
transform:translate(参数);
参数：translate(x)等同于translateX(x)指定元素在x轴上的位移距离
translate(x,y)指定元素在x轴和y轴上的位移距离
translateX(x)
translateY(y)
取值：px为单位数字：x轴正数往右,负数往左；y轴正数往下,负数往上; %

2)缩放(改变元素尺寸)
transform:scale(value);
取值：一个值，value>=1 x轴和y轴都放大的倍数; 0<value<1 x轴和y轴都缩小; -1<value<0 x轴和y轴都缩小并反转180度; value<=-1 x轴和y轴都放大并反转180度
两个值，分别设置x轴和y轴的放大比例 scaleX(x);单独设置x轴; scalaY(y);单独设置y轴

3)旋转(改变元素角度)
transform:rotate(数值deg);
取值：正数；顺时针旋转
负数；逆时针旋转
注意：旋转原点会影响效果;旋转是连同坐标轴一起旋转的，会影响旋转之后的位移方向

4)倾斜
transform:skew(数值deg);
①skew(x)等同于skewX(x)让元素向着x轴发生倾斜,实际上改变的是y轴角度 x轴：正数,逆时针倾斜；负数,顺时针倾斜
②skewY(y)让元素向着y轴发生倾斜,实际上改变的是x轴角度 y轴：正数,顺时针倾斜；负数,逆时针倾斜

(2)3D模拟

1)透视距离
模拟人的眼睛到3D转换元素之间的距离，透视距离不同，看到的效果不同。
perspective:距离px; 此属性要加载到3D转换元素的父元素上

2)3D旋转
transform:rotateX(xdeg); 以x轴为中心轴旋转
transform:rotateY(ydeg); 以y轴为中心轴旋转
transform:rotateZ(zdeg); 以z轴为中心轴旋转
transform:rotate3D(x,y,z,ndeg); x,y,z取值0，代表这条轴不参与旋转;取值>0，代表该轴参与旋转

/*2D转换*/
<div id="d1">转换元素</div>
  <div id="d2">中心显示元素</div>
  <div id="d3"></div>
  <div id="d4"></div>
  <style>
    div{
      width: 200px;
      height: 200px;
      font-size: 40px;
    }
    #d1{
      background: #0ff;
      /* 设置转换原点 */
      transform-origin: center center;
      /* 转换属性：转换函数 */
      /* 1.位移 */
      transform: translate(300px);
      /* 2.缩放 */
      transform: scale(1.5,-0.5);
      /* 3.旋转 */
      transform: rotate(190deg);
    }
    /* 4.倾斜 */
    #d4{
      background: tomato;
      transform: skew(45deg);
    }
    /* 永远在窗口中心显示 */
    #d2{
      background:#ff0;
      position: absolute;
      top: 50%;left: 50%;
      transform: translate(-100px,-100px);
    }
    /* 鼠标悬停时，该元素向右位移1000px，旋转1080deg */
    #d3{
      width: 200px;
      height: 200px;
      background: url(./bg-img.jpg);
      background-size: 200px 200px;
      border-radius: 50%;
    }
    #d3:hover{
      transform: translate(1200px)
      rotate(1080deg) scale(0.5,0.5);
      /* 过渡 */
      transition: 10s;
    }
  </style>

/*3D转换*/
<div id="parent">
    <div id="child">3D转换元素</div>
  </div>
  <style>
    #parent{
      width: 400px;height: 400px;
      border: 2px solid #f00;
      margin: 200px auto;
      /* 透视距离 */
      perspective: 200px;
    }
    #child{
      width: 200px;height: 200px;
      background: #0ff;
      font-size: 40px;font-weight: bold;
      margin: 100px auto;
      /* 3D旋转 */
      transform: rotate3d(1,1,1,45deg);
    }
  </style>

十七.过渡

让css的属性值，在一段时间内平缓变化的效果。

1.语法

(1)指定过渡的属性

transition-property:直接写css属性; 多个属性值之间用空格分开
transition-property:all; 所有支持过渡的属性，都参与此次过渡效果
哪些属性支持过渡：①颜色属性;②大多数取值为具体的数字的属性;③阴影; ④转换transform;⑤visibility

(2)指定过渡的时长

transition-duration:以s/ms为单位的数字 1s=1000ms指定用多长时间完成此次过渡操作

(3)时间曲线函数

transition-timing-function:ease; 默认，慢速开始，中间变快，慢速结束
transition-timing-function:linear; 匀速
transition-timing-function:ease-in; 一直加速
transition-timing-function:ease-out; 一直减速
transition-timing-function:ease-in-out; 慢速开始，先加速，再减速，慢速结束

(4)过渡的延迟时间

transition-delay:以s/ms为单位的数字;让过渡效果，延迟多少时间执行

(5)简写

transition:property duration timing-function delay;
最简写：transition:duration;

2.过渡代码的编写位置

原始选择器中：过渡效果，有去有回
:hover中：过渡效果，有去无回
注：原始选择器中没有的属性，:hover中有，直接进行过渡，不需要设置成过渡属性；

<style>
    #d1{
      width: 200px;
      height: 200px;
      /* css属性的起点 */
      background: #f00;
      border-radius: 0;
      /* 过渡的语法 */
      /* 1.设置要过渡属性 */
      /* transition-property: background border-radius; */
      transition-property: all;
      /* 2.设置过渡经历的时间 duration持续 */
      transition-duration: 3s;
      /* 3.设置过渡时间曲线函数 */
      transition-timing-function: ease;
      /* 4.设置过渡延迟时间 */
      transition-delay: 2s;
    }
    #d1:hover{
      /* css属性的终点 */
      background: #0ff;
      border-radius: 50%;
      transform: translate(600px);
    }
  </style>

十八.动画

元素从一种样式逐渐变成另一种样式，就是将多个过渡效果放在一起。

1.关键帧

使用关键帧来控制动画的每一个状态；
1）动画执行的时间点；
2）在这个时间点上的样式；

2.语法

(1)定义动画

使用关键帧定义动画

@keyframse 动画名称{    
	0%{样式;}    
	...    
	50%{样式;}    
	...    
	100%{样式;}  
}

(2)调用动画

调用动画名称 animation-name:动画名称;

设置动画执行时间 animation-duration:以s/ms为单位的数字

设置动画的时间曲线函数
animation-timing-function:ease; 默认，慢速开始，中间变快，慢速结束
animation-timing-function:linear; 匀速
animation-timing-function:ease-in; 一直加速
animation-timing-function:ease-out; 一直减速
animation-timing-function:ease-in-out; 慢速开始，先加速，再减速，慢速结束

设置动画延迟播放 animation-delay:以s/ms为单位的数字

设置动画的播放次数
animation-iteration-count:无单位数字; 具体次数
animation-iteration-count:infinite; 无限

设置动画的播放顺序
animation-direction:normal; 默认0%~100%
animation-direction:reverse; 100%~0%
animation-direction:alternate; 轮流播放，第一遍正向，第二遍逆向…

简写: animation:name duration timing-function delay count direction;
最简写：animation:name duration;

设置动画播放前后的状态
animation-fill-mode:backwards; 动画播放之前的延迟时间内，显示第一帧
animation-fill-mode:forwards; 动画播放完成，保存在最后一帧
animation-fill-mode:both; 同时使用backwards和forwards
animation-fill-mode:none; 默认值，不填充

设置动画的暂停和播放
animation-play-state:paused; 暂停
animation-play-state:running; 播放

注：其他动画写在原始样式中，暂停和播放写在:hover中。

 <style>
    #d1{
      width: 100px;
      height: 100px;
      background-image: url(./bg-img.jpg);
      background-size: 100%;
      border-radius: 50%;
      /* 调用动画名称 */
      animation-name:liangjump;
      /* 设置动画执行时间 */
      animation-duration: 5s;
      /* 设置动画时间曲线函数 */
      animation-timing-function: ease-out;
      /* 设置动画延迟播放 */
      animation-delay: 2s;
      /* 动画的执行次数 */
      animation-iteration-count: 2;
      /* 动画的播放顺序 */
      animation-direction: reverse;
      /* 动画播放前后的填充状态 */
      animation-fill-mode: both;
    }
    /* 使用关键帧定义动画 */
    @keyframes liangjump{
      0%{transform: translate(0px,0px);}
      25%{transform: translate(0px,800px);}
      50%{transform: translate(100px,0px);}
      75%{transform: translate(0px,150px);}
      100%{transform: translate(0px,0px);}
    }
    #d1:hover{
      /* 设置动画的暂停和播放 */
      animation-play-state: paused;
    }
  </style>

3.引入动画插件animate.css

1）下载动画预设https://animate.style/
2）在html文件中引入文<link rel="stylesheet" href="./animate.css/animate.css">
3）在动画调用中调用动画名称及设置动画执行时间animation:动画名称 动画时间;
注：需要什么动画，对应的名称在https://animate.style/查找

十九.优化

目的：减少服务器压力；提升用户体验。

原则：尽量减少http的请求个数；
在页面顶部，引入css文件；
将css和js文件放到外部独立的文件中

代码优化：1.合并样式（能简写，就不分开写；能写群组，就不单写）
2.缩小样式文件的大小（能重用的样式，尽量重用）
3.减少样式重写
4.避免出现空的href和空的src
5.选择更优的样式属性
6.代码压缩http://tool.chinaz.com/tools/cssformat.aspx

二十.CSSreset和normalize.css

1.什么是 css reset

html 标签在浏览器中有默认样式
不同浏览器，不同版本，对这些默认样式解析不同
所以，在开发之前，我们需要把 css 的默认进行重置/清空
让各个浏览器对样式统一

2.css reset 很松散，没有统一格式

很霸道，把原生语义的功能都去掉了，比如说 p
有些项目经理热衷于使用 css reset
有些项目经理很抵触使用 css reset

3.normalize.css

boot twitter
相对柔和
normalize.css 是 css reset 一种替代方案

二十一.响应式布局

1.概念

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

2.响应式网页前提确保事件

（1）布局，不能固定元素宽度，必须是流式布局(默认文档流+浮动)
（2）文字和图片大小随着容器的大小而变化
（3）媒体查询计算(css3的技术)
响应式网页存在的问题，向适应网页，代码几何性的增加; 复杂的页面不适合使用响应式

3.测试响应式网页

（1）使用真实设备测试；好处:真实可靠；缺点:成本高,测试任务巨大
（2）使用第三方测试软件；好处:不需要太多真实设备,测试方便；坏处:测试效果有限,待进一步验证
（3）使用chrome等浏览器自带模拟软件；好处:简单方便；坏处:测试效果十分有限,需要进一步验证

4.编写响应式布局

（1）手机适配，设置视口(只有移动端设备，需要设置视口)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

viewport 视口
width=device-width 视口宽度等于设备宽度
initial-scale=1.0 设置视口宽度能否缩放，1.0不能缩放
maximum-scale=1.0 允许视口缩放的最大倍率，1.0不缩放
user-scalable=0 是否允许用户手动缩放，0不能

最简写法：<meta name="viewport" content="width=device-width,initial-scale=1">

（2）所有内容/文字/图片都尽量使用相对尺寸，不要使用绝对数字

（3）流式布局+弹性布局+媒体查询，组成响应式布局

（4）媒体查询 CSS3 Media Query
媒体查询是写响应式必须具备的技术
Media：媒体，不同的用于浏览网页的设备(screen:pc/pad/phone；TV；print)
Media Query：可以自动的根据当前浏览设备不同(尺寸，方向，解析度…)，有选择性的，执行一部分代码，忽略其他代码

语法：@media 设备 and 尺寸{}
案例：@media screen and (min-width:992px){}

尺寸：大于等于1200px 超大屏 xl
992<=pc<=1199 大屏 l
768<=pad<=991 中屏 m
576<=phone<=767 小屏 s
小于等于575px 超小屏 xs

<div id="content">
    <h1>媒体查询，根据浏览设备不同(尺寸，方向)，加载不同的css代码</h1>
</div>
<style>
    body{
      font: 16px chiller;
      padding: 0;margin: 0;
    }
    /* pc>=992 大屏，字体红色，背景黑色 */
    @media screen and (min-width:992px){
      #content{color: #f00;background: #000;}
    }
    /* 768<=pad<992 中屏，字体黄色，背景红色 */
    @media screen and (min-width: 768px) and (max-width: 991px){
      #content{color: yellow;background: red;}
    }
    /* phone<768 小屏，字体黑色，背景蓝色 */
    @media screen and (max-width: 767px){
      #content{color: #000;background: #0ff;}
    }
  </style>

注：媒体查询布局，经常要定义border-box
box-sizing: border-box;