开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
一、盒模型
CSS 中组成一个块级盒子需要：
- Content box: 这个区域是用来显示内容，大小可以通过设置
width和height. - Padding box: 包围在内容区域外部的空白区域；大小通过
padding相关属性设置。 - Border box: 边框盒包裹内容和内边距。大小通过
border相关属性设置。 - Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过
margin相关属性设置。
1.1 标准盒模型
在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。
1.2 IE盒模型
ie 盒子模型的 content 部分包含了 border 和 pading
1.3 解决怪异盒模型
通过为其设置
box-sizing: border-box来实现。
.box {
box-sizing: border-box;
}
二、单位
2.1 绝对长度单位
平时在布局中，常用px.像素。
| 单位 | 名称 | 等价换算 |
|---|---|---|
cm | 厘米 | 1cm = 96px/2.54 |
mm | 毫米 | 1mm = 1/10th of 1cm |
Q | 四分之一毫米 | 1Q = 1/40th of 1cm |
in | 英寸 | 1in = 2.54cm = 96px |
pc | 十二点活字 | 1pc = 1/6th of 1in |
pt | 点 | 1pt = 1/72th of 1in |
px | 像素 | 1px = 1/96th of 1in |
2.2 相对长度单位
根据不同的参照物，设置单位，使页面自适应。
| 单位 | 相对于 |
|---|---|
em | 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width |
ex | 字符“x”的高度 |
ch | 数字“0”的宽度 |
rem | 根元素的字体大小 |
lh | 元素的 line-height |
vw | 视窗宽度的 1% |
vh | 视窗高度的 1% |
vmin | 视窗较小尺寸的 1% |
vmax | 视图大尺寸的 1% |
三、总结
时过境迁，原本的ie浏览器也逐渐退出了市场。但是对于一些比较老旧的设备还是需要支持的。在今天，我们更多的说自适应，一套代码pc、移动端都适应。
