盒子模型布局
盒子模型：每个标签都是一个盒子
计算宽高：box-sizing：border-box盒子的宽度就是设置的宽度，里面的内容自适应
从里到外：padding（内边距）
Border（边框）
Margin（外边距）
Margin - 简写属性
margin属性可以有一到四个值。
1.margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
2.margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
3.margin:25px 50px;
上下边距为25px
左右边距为50px
4.margin:25px;
所有的4个边距都是25px
标签特性：display： inline （行）
Block（块）
inline-block（行内块）
None（隐藏：三种方式）
Display：none（标签位置没了）
Visibility：hidden（标签位置还在）
Opacity：0（透明度为0）标签及子标签都透明
只想背景半透明，字体还是实的，设置背景色 background：rgba（255，255，255，0.9）
块标签margin：auto为居中
Padding，border简写属性同margin
Border-radius：圆角
Box-shadow：水平 竖直阴影位置（都可为负） 虚化 颜色 inset（内部阴影）
Text-shadow：同box-shadow
布局
浮动：float
给定一个区域，一般做导航
大色块 小色块。。。。。内容
不要用纯色
Overflow：hidden 超出部分隐藏（overflow超出部分处理方式）
定位
Position：
Fixed 绝对定位，相对于窗口定位
设置fixed，标签位置就没了（最高层）层数越高，显示在最前面
Z-index:层数
Relative 相对定位，相对于自己定位 设置Top，bottom，right，left，用于微调，距离不超过20px，最主要限制absolute
Absolute 绝对定位，相对于body（页面）定位
相对于最近的有position属性的父标签，最*是body
css3
弹性盒子
新布局模式
设置direction：rtl 从右往左排
flex-direction
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的*空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
lex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
display:flex
水平对齐
垂直对齐
换行对齐
transform
transition
animation
开源框架