盒子模型.

盒子模型

盒子大小：padding border margin不建议布局

padding-left/top/right/bottom

一个值上下两个值左右

三个值上，左右，下

四个值上/右/下/左

margin 同上

外边距塌陷

父元素的第一个子元素的top值会被父元素抢走

可以给父元素添加边框

偏方overflow：hidden

文本溢出

overflow:auto

样式继承时所有样式都继承，只有改变之后对布局无影响的

解决padding影响盒子大小的box-sizing:border-box

flex布局同一行布局

display：flex（默认横着排）

flex:row-reverse横着排

flex-direction:column竖着排

flex-direction：row(让flex布局变为多行)

flex-wrap:wrap

flex-wrap:nowrap(默认)

justify-content：centent/end/space-around/space-around/space-evenly(水平排列)

平均分配给

垂直

alingn-items:center/end/self-end

alingn-items:start

浮动

float会脱离文档流不在保留原来位置，因此会造成在其下方的兄弟元素位置发生变化

当子元素发生浮动时，其父元素的高度发生塌陷

clear:both从这里开始清除浮动

媒体查询

@media screen and (max)

2d转换

transform：translate

transform: translateX

transform: translateY（平移）

transform: rotateZ

符合写法旋转永远放在最后一个

scale缩放

3D

谁变化给谁加

动画

@keyrfames myMovie{

}