前端那些事系列之基础篇CSS盒子模型（二）

盒子模型

css盒子模型本质由边距+边框+填充+内容组成的 margin+border+padding+content

• 标准盒模型 box-sizing：content-box
  • 宽度就是content
• 怪异盒模型 box-sizing：border-box
  • 宽度是border+padding+content

flex布局

flexible box 弹性布局 ，给盒子模型提供排版方式 display:flex

容器属性

• flex-direction 主轴的方向
  • row default 行
  • column 列
• flex-wrap 排不下换行
  • nowrap
  • wrap
  • wrap-reverse 主轴前后互调
• justify-content 水平分布
  • flex-start 默认值 向水平方向的起点对齐
  • flex-end 向水平方向的终点对齐
  • center 居中
  • space-between 最左最右靠边，中间间距相等
  • space-around 每个间距，均匀分布为x
  • space-evenly 每个项目的左右撑开距离相等
• align-items 垂直分布
  • flex-start
  • flex-end
  • center
  • baseline 项目的第一行文字的基线对齐
  • stretch 占满高度

项目属性

• order 属性定义项目的排列顺序，数值越小，排列越靠前，默认为0
• flex-grow 放大比例，剩余空间。默认为0
• flex-shrink 缩小比例，剩余空间，默认为1
• flex-basis 定义在分配多余空间之前，项目占据的空间
  • flex:1 相当于flex: 1 1 0%

动画和变换

transform,transition,animation

transform

对元素进行旋转、缩放、移动或倾斜；2d、3d

translate 平移

• translate(x, y)
• translate3d(x, y, z) – translateZ(0)

scale 缩放

• scale(x,y)
• scale3d(x, y, z)

skew 扭曲

rotate 旋转

• rotate()
• rotate(x, y, z, a)

---

transition

过渡动画

transition-property

• all
• none
• string(width,height)

transition-timing-function

• linear 匀速
• ease 慢-快-慢
• ease-in 慢速开始
• ease-out 慢速结束
• ease-in-out 慢速开始和结尾
• cubic-bezier(n,n,n,n) 贝塞尔曲线 0-1之间的数值

transition-duration

过渡持续时间

---

animation

• name keyframe 名称
• duration 完成动画所花费的时间
• timing-function 速度曲线
• delay 延迟
• iteration-count 播放的次数
• direction 是否应该轮流反向播放动画