Web 盒模型

发表于 分类于 Waline： 阅读次数： 本文字数： 517 阅读时长 ≈ 1 分钟

盒模型

伸缩盒模型（弹性盒模型，flexBox）
display：flex（inline-box）

1
2
3
4
5
6
7
8
9
10
11
12
.box{
  display: flex;
}
.item1{
  flex-grow: 1;
}
.item2{
  flex-grow: 2;
}
.item3{
  flex-grow: 3;
}

最老版本：display：box；（火狐和 webkit 内核都支持 display：-webkit-box；或 display：-moz-box；）
过渡版本：display：flexbox；
最新版本：display：flex；

盒子模型（标准盒模型）
内容属性：宽 = width，高 = height。
内边距属性：padding
边框属性：border
外边距属性：margin
书写内外边距的顺序：TRBL（上下左右）（一个参数：四个方向值相同。两个参数：上下，左右。三个参数：上右下，左边取右边值。）

怪异盒模型（IE 盒子模型）
如果删除<!DOCTYPE html>，则解析为怪异（IE 浏览器）。
设置的 width 和 height，包含 border 和 padding。