box-model
平时开发时用Chrome
调试时,有一个box-model
图示,鼠标放上去相应位置即可变色,非常方便。
依次为: margin -> border -> padding -> content
box-sizing
以前没有去深究这个东西,后来有人告诉我box-sizing
这个属性。
比如设一个元素宽度为50%,但是它有边框!
所以,此时它的宽度为 50% + 边框宽度。
但如果我把box-sizing
设为border-box
,它就会把边框也纳入width
的计算范围。
需要注意的是,按照层级来说,padding
也会被计算进去!