CSS盒模型入门：设了宽度还被撑大？加一行box-sizing就好

很多新手写CSS，设了宽度100px，加了padding和border，结果元素实际宽度变成140px，页面布局乱掉，这就是没搞懂CSS盒模型。

盒模型是什么

网页上每个元素，就像一个盒子，从里到外分四层：最里面是内容content，然后是内边距padding，然后是边框border，最外面是外边距margin。你设的宽度100px，默认是content的宽度，加上padding和border，整个盒子实际占的宽度就变大了。

新手怎么解决这个问题

加一行CSS：* { box-sizing: border-box; }，这样你设的宽度就是整个盒子的实际宽度，padding和border算在宽度里面，不会把盒子撑大，写布局再也不用算宽度，新手必加这一行。

别搞混margin和padding

margin是盒子外面的间距，两个盒子之间的距离；padding是盒子里面，内容和边框的距离，别把两个用混，布局的时候位置不对，大部分是这个原因。