从高中做个人主页开始，就接触了些 HTML、JavaScript ，最早用 FrontPage 所见即所得制作页面，后来又是在开源框架或模版文件上修改，一直没正式上手前端开发。

有一些产品想法，迫于没有技术，实现不了。为了掌握一门硬技术，前不久开始正式专攻 Node.js，学习了一个叫 AdonisJS 的框架。做项目的过程中，发现前端知识还是跟不上，正好腾讯课堂给推了前端课程的广告，就完整地学了一遍。今天仿了一版百度的静态首页，用了2小时，基本算成功，暴露出来的问题是对于 CSS 定位和浮动还不太熟练。接下来准备仿淘宝的首屏。

在这之前，计划先看一遍 Bootstrap 源码。首先要记录的一个知识点是box-sizing

box-sizing

语法：box-sizing: content-box | border-box | inherit;

CSS 盒子模型默认总的宽度和高度需要加上 padding 和 border 的值。设置为 box-sizing: border-box; 后，盒子总的宽高会固定为 width 和 height 的值，实际的宽高则会随着 padding 和 border 的值而自适应，这样更符合人类直觉。

在 Bootstrap 中，将伪元素设置为了这个值。

[code language=”plain”]*,
*::before,
*::after {
box-sizing: border-box;
}
[/code]