笔记1-3_4-弹性盒模型模糊

1 .resize:拖拽元素
horizontal 水平拖拽
vertical 垂直拖拽
both 水平垂直均可拖拽
none 不可拖拽
#box{resize:vertical; overflow: hidden;}
注: textarea 默认有改变层大小的效果
注：需要配合 overflow:hidden 才会起作用
2 .box-sizing: 改变盒模型模式
border-box 怪异盒模型
content-box 正常盒模型
3 .-webkit-mask: 遮罩
url:
x:num / % / 单词 0%：左边，50%：中心，100%：右边
y:num / % /单词 0%：上边，50%：中心，100%：下边
repeat
size:
x y/size(前面代表想，x，y偏移位置，size表示遮盖大小)
#box{ background:url(img/girl.jpg); -webkit-mask:url(img/mask.png) right100px/200pxno-repeat;} （居右，距上50px，尺寸大小200px X200px）
注:目前还没有标准化，需要添加浏览器前缀
注： 跟png透明图片的默认是反过来的，有图的地方会透过去，没图得地方是不会透过去的
注：对背景样式（background）和图片标签（）都是支持遮罩效果的。
4 .-webkit-box-reflect 倒影
第一个参数：方向 below
第二个参数：距离
第三个参数：遮罩
注：linear-gradient（rgba（0，0，0，1），rgba（0，0，0，0）） 从下向上（因为这个是倒影）
#box{ -webkit-box-reflect:below20pxlinear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); margin:200px; margin-bottom: 0;}
注：也可以利用scaleY(-1)的方式来模拟倒影 ，兼容性会好。
5 .blur 模糊
filter:blur(10px)
#box{ filter:blur(10px); border:10pxredsolid;}加上后整个box都是模糊的
6 .outline 轮廓
输入框自带outline，所以 outline：none 去掉， outline是不占文档流的
7 . display:flex 弹性盒模型
比正常盒子提供了更多新的布局方案，主要以自适应为主。
居中方案：
固定宽高： top:50%;left:50%;margin拉取
不固定宽高：1> position；absolute;left:0;right:0;top:0;bottom:0;margin:auto
2> 父容器添加 display:flex;当前容器添加 margin：auto
3> position:absolute;left:50%;top:50%;transform:(translate(-50%,-50%))
注：margin：50%; 父容器宽度的一半
translate:50%;当前容器宽度的一半
1 .flex-deraction：主轴排列方向
row （默认）水平排列
row-reverse 反向水平排列
column 垂直排列
column-reverse 反相垂直排列
2 .justify-content: 主轴对齐
flex-start (默认)在起始位置对齐
flex-end 在结束位置对齐
center 以中心对齐
space-between 端点对齐，中间补白，空间自动分配
space-around 对整个空间进行平均分配，元素的间隔是相同的
3 .align-items: 侧轴对齐
flex-start （默认）起始位置对齐
flex-end 结束位置
center 中心
4 .flex-wrap 换行
nowrap (默认)不换行
wrap 换行
wrap-reverse 反向换行
5 .alingn-content 行之间对齐（多行的时候）
flex-start
flex-end
center
space-between
space-around
stretch （默认值）
6 .子元素：
.order : number
number 越大排序越靠后，默认是0
.align-self :flex-start、center、flex-end
针对某一个
.flex : number
把整个容器进行份数的划分，根据份数进行大小的分配
.flex-grow ： 定义项目的放大比例，默认为0 | 1 (1值会撑满空白区域)
.flex-shrink：定义了项目的缩小比例，默认为1 | 0 (0值不会自动缩放，而是显示原来的大小)