媒体查询：通过检测终端的width而给页面设置css样式。
响应式布局：让一个页面兼容pc端，ipad，手机短。
内部用@media screen and（min-width:）{
css样式
}
外部用：<link rel=”stylesheet” media=”screen and(min-width)” href=”” />
flex布局：dispaly：flex；
flex布局主要分主轴(默认水平位置)和交叉轴之分，掌握住这一点就可以。里面的元素我们成为项目。
以下是加给容器的css
1，调主轴方向的：
flex-direction:column/column-reverse/row/row-reverse
2，在主轴对齐方式：
Justify-content:flex-start/flex-end/space-between/space-around/center,
3，在交叉轴对齐方式:
Align-items:flex/start/flex-end/space-between/space-around/center/
Stretch(拉伸)/baseline(基线)
- 让项目分组即分成多个主线(换行)
Flex-wrap:nowrap/wrap/wrap-reverse
- 使其多条轴线对齐方式(如果多条轴线则不起作用)
Align-content:flex-start/flex-end/center/space-between/space-around/
Stretch
以下都是加给项目的css
- 设置单个项目在交叉轴的方向与别的不一样
Align-self:auto/flex-start/flex-end/center/stretch/baselin
- 放大几份，放大容器剩下的空白的位置 默认值为0
Flex-grow:num
- 缩小几份，默认值为1
Flex-shrink:num
- 放大多少像素
Flex-basis:数值px
简写：flex：auto(1,1,auto)/none(0,0,auto);
Flex:flex-grow flex-shrink flex-basis
一般我们直接写flex:1即可
flex盒子里面的元素不分块元素和行内元素，都是变成行内块元素
css3多列布局
Column-number:num;
Column-width:数值px；
Column-gap：栏目距离像素
Column-rule：栏目的隔线 1px solid red;
怪异盒模型：
给出来的width是包含border+padding+content
标准盒模型 Width=content
怪异盒模型和标准盒模型的转换
Box-sizing:border-box转换成怪异盒模型
Box-sizing：content-box转换成标准盒模型
写自适应页面，一般不直接设置width和height，用%这样形成自适应。