盒子模型 CSS Basic Box Model
w3c 标准盒模型：width就是content（box-sizing：content-box）
IE6 混杂模式的盒模型（DTD document type definition）：设置box-sizing：border-box之后，content+padding+border=width
不规则布局：直接设置margin-left、padding-left之类的让东西居中
兼容性写法：
box-sizing：border-box
-webkit-box-sizing：border-box
-moz-box-sizing：border-box
css2.0盒模型：
这些其实都是一个层级的，只是可以这么看。所以background-image的回退机制是background-color的原因就是，background-image渲染不成功，就渲染background-color
overflow / overflow-x / overflow-y：visible / hidden / scroll（不管超没超，都有滚动条） / auto，x和y当方向的溢出设置是css3新增的部分，但是你只设置了其中一边隐藏，另一边默认设置由visible变成scroll（也隐藏）
overflow不是复合值，不要填两个值。
resize：none（让textarea不要随便拉伸） / both / horizontal（水平拉伸）/ vertical（垂直拉伸） 重新定义尺寸，可拉伸
除了textarea，要让resize生效，需要设置overflow（除了默认值都可），最大值也可以设置一下
弹性盒子布局 flexible box
兼容性：
display：flex
display：-webkit-box
display：-webkit-flex
display：-ms-flexbox
flexbox只能处理一维布局，二维布局是CSS Grid Layout（网格布局）
flex container（父级容器/弹性容器）
flex item（子级元素/flex项目）
父级容器的属性如下：
flex-direction：row（水平）/ row-reverse（水平倒序，从右边开始排）/ column / column-reverse，主轴方向（main axis），决定项目排列方向
（row-reverse）
flex-wrap：nowrap / wrap / wrap-reverse是否进行换行
（默认nowrap，不换行，对盒子进行压缩）
（wrap）
（wrap-reverse【上下】和flex-direction：row-reverse【左右】做区分）
flex-flow：flex-direction | flex-wrap 上面两个属性的合并写法
justify-content：flex-start（起点对齐） / flex-end / center / space-between（两端对齐） / space- round 主轴上的对其方式
（space-between）
（space- round 项目两侧间距相等，最左和最右是中间的一半）
align-items：flex-start / flex-end / center / baseline（文本基准线） / stretch，交叉轴对齐方式
（baseline）不设置项目盒子的高度->
（stretch）不能设置项目盒子的高度
align-content：flex-start / flex-end / center / space-between（两端对齐） / space- round / stretch多根轴线上的对齐方式，没设置这个属性之前，默认stretch
（flex-start）
（flex-end）
（center ）
（space-between）
（space- round ）
（stretch默认值，轴线要占满整个交叉轴，两条轴的空间均分）
子级项目的属性如下：
flex-grow：0（默认值），放大比例，会计算所有有flex-grow的值，按照比例分配剩余空间
（2、3放大比例都为1，各分配剩余空间的50%）
flex-shrink：1（空间不足时默认可缩小），缩小比例
（0就是不缩小）
（蓝色值为0，其他值为1）
flex-basis：auto（默认父级容器宽度），伸缩基本值，在分配剩余空间之前，项目占据主轴的空间的计算值，一般不改这个值
flex：flex-grow（0） | flex-shrink（1） | flex-basis（auto）
flex：auto 是flex：1 1 auto的简写；flex：none 是 flex：0 0 auto的简写
order：1，排列顺序，值越小越靠前，直接写顺序就好，之前父级容器设置的反转一般不用
align-self：flex-start / flex-end / center / baseline / stretch，特殊项目的对齐方式，与align-item的值完全一样，就是多了一个默认值auto
注意：用了弹性盒子之后，float、clear、column、vertical-align都会失效，在flex布局中，尽量不要用float，如果只是想把块级元素变成行内块，用display：inline-block就好，不然会有歧义
grid布局
兼容性太差，很少用；它是二维的布局，有两个主轴可以布局（x，y 定位），不像flex只有一个主轴；处理复杂的位置布局有优势
媒体查询 @media
兼容性很好
<meta name="viewport" content="width=device-width, initial-scale=1.0">
视口（除了浏览器导航栏和工具栏以外，可视的内容区域），宽度为设备宽度，初始大小为1
例：适配屏幕
@media screen and (max-width: 960px) and (min-width: 768px) {
body {
background-color: lightgreen;
}
}
@media screen and (max-width: 768px) and (min-width: 550px) {
body {
background-color: red;
}
}
@media screen and (max-width: 550px) {
body {
background-color: blue;
}
}
media-type：screen媒体查询的设备，一般只用screen（电脑手机平板），默认是screen，不写也可以
逻辑符号
与：and，全真才行
或：，逗号，只要有一个满足条件即可
非：not，只要后面的语句有一个不满足条件，就会调用里面的样式
@media not screen and (max-width: 960px) and (min-width: 768px){...}
媒体条件
width | min-width | max-width，height同理
orientation：Protrait（竖屏） | landscape（横屏）
link中应用
link引入资源是异步的，会预加载，不会阻塞资源，满足media条件后使用
<link rel="stylesheet" media="(max-width: 960px) and (min-width: 768px)" href="css/index.css">
import中应用
@import url(css/index.css) screen and (max-width: 960px) and (min-width: 768px);
用空格跟上media条件即可
import必须要写在css里面，那么如果所属的css文件也是外联的话，要写把所属的css文件加载完之后，才会加载import外联的文件，比link多绕了一步
并且兼容性没有link好
px em rem vh
**px **相对于屏幕像素，不同设备的屏幕大小，像素密度都不同，会根据不同设备的情况进行缩放渲染。这样就不会完全适配，在像素点少的情况下，就会糊
em 相对父元素font-size的计算值，width、height都可以根据父元素的font-size进行适配。
所以以前经常在html/body上设置font-size，检测不同的设备设置的字体大小，进行比较，为不用的设备设置不同的字体大小，去除差异，然后所有元素用em配置，这样所有设备的元素大小就会一样了
但是这种方法是有缺陷的，不可能html里面所有的元素都用一个font-size，需要设置font-size的时候，就会影响其子元素的大小，所以就出现了rem
rem （root em）相对于html（根标签）font-size的计算值，不受父元素影响
一般会给相对的标签设置font-size为10px，要给18px的时候，就1.8rem
用JS设置如下：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
因为一般设计稿都是用iPhone6设计的，iPhone6的宽度是375，以10px作为根值
如果屏幕大于375也没关系，屏幕越大，设置的字体可以越大
可以配合媒体查询做一些小的项目，如果只用媒体查询设置rem，是根据区间设置的，就是很机械的转化，没有过渡；用上面的js代码就可以根据屏幕大小设置
vh 相对视口的单位
应用
在index.css上引入通用css样式文件，和在不同视口下应用的css文件
@import 'common.css';
@import 'media2.css';
@import 'media3.css';
url：使用在import上，可以直接用字符串表示，省略url（）
import "global.css"
@media之前是不同视口样式下的公共样式，提取出来有利于代码可读性
.row {
margin-top: 50px;
}
.row .section .section-content {
height: 366px;
background-color: #eee;
}
.row .section {
padding: 0 15px;
float: left;
}
@media (min-width: 1200px) {
.row .section {
width: 25%;
}
}
media2.css
@media (min-width: 992px) and (max-width: 1199px) {
.row .section {
width: 33.333%;
}
}
media3.css
@media (min-width: 768px) and (max-width: 991px) {
.row .section {
width: 50%;
}
}
