CSS盒子模型应用详解
CSS 的盒子模型，说简单点，就是元素怎么“占地”的规则。页面怎么排、怎么挤、怎么留空，全靠它说了算。
盒子模型一共就四块：内容区域、内边距、边框、外边距。你可以把它想成一个包裹着内容的多层“盒子”，控制得好，排版就服帖。
标准模型和 IE 怪异模型是两个流派。现代浏览器基本都用标准模型，也就是宽度=内容+padding+border。IE 那套老模型就不太推荐了，除非你做老项目。
设置盒子模型时，最常见的写法是这样：
element {
width: 200px;
padding: 20px;
border: 5px solid #000;
margin: 10px;
}加了padding和border之后，盒子的实际宽度就不止 200px 了。如果你想精确控制尺寸，建议加上box-sizing: border-box，让浏览器帮你算好。
盒子模型在布局里还挺有讲头的，像响应式设计、浮动布局、绝对定位这些，都离不开它。比如一个卡片列表排版，外边距加得太多就挤不下，调 padding 又会撑爆容器，蛮考验细节的。
另外，box-shadow也是盒子模型的一部分，用得好能加点层次感。你可以加个box-shadow: 0 4px 10px rgba(0,0,0,0.1)，卡片立马“浮”起来了。想要内阴影，就加inset。
如果你想快速掌握盒子模型，可以从页面卡片开始练习，再慢慢试着改响应式布局，边做边体会。哦对了，最好用浏览器的开发者工具看实时渲染，调起来直观。
文件大小：34.52KB
评论区