平时开发时用Chrome调试时，有一个box-model图示，鼠标放上去相应位置即可变色，非常方便。
依次为: margin -> border -> padding -> content
以前没有去深究这个东西，后来有人告诉我box-sizing这个属性。
比如设一个元素宽度为50%，但是它有边框！
所以，此时它的宽度为 50% + 边框宽度。
但如果我把box-sizing设为border-box，它就会把边框也纳入width的计算范围。
需要注意的是，按照层级来说，padding也会被计算进去！
本文链接：https://note.lilonghe.net//post/css-box-model.html
-- EOF --
作者
lilonghe
发表于2017-01-26 12:50:50
，并被添加「
css
」标签
署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)
Copyright ©2015-2024 lilonghe. All rights reserved.