盒子模型详谈

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

CSS盒子模型是网页布局的核心，包括行盒、块盒和行块盒三种类型。内容(content)、填充(padding)、边框(border)和外边距(margin)共同构成了盒子的完整结构。理解并熟练掌握盒子模型对于创建美观的网页至关重要，尤其是外边距的处理，往往直接影响页面的视觉效果。正确设置内容宽高、内边距和边框能精确控制元素在页面上的布局。

对于每个web的小伙伴来说，如何完美的布局是件十分重要的事情。这其中最重要的就是对于盒子模型的理解。一个页面做的怎么样，往往取决于你的盒子放的怎么样，今天就带大家来回顾一下css的盒子模型。
一.盒子类型

行盒，display等于inline的元素
行盒在页面中不换行
浏览器默认样式表设置的行盒：span a img 文本元素 label input…
块盒，display等于block的元素
块盒在页面独占一行
浏览器默认样式表设置的块盒：容器元素（div、header、nav 、footer…）、h1-h6、p…
3.行块盒，display：inline-block的盒子
不独占一行
盒模型中所有尺寸都有效
二.盒子组成部分
内容 content

width、height，设置的是盒子内容的宽高

内容部分通常被叫做整个盒子的**内容盒 content-box**

填充（内边距） padding

盒子边框到盒子内容的距离

填充区 + 内容区 = 填充盒 padding-box
边框 border

边框 = 边框样式 + 边框宽度 + 边框的颜色

边框样式：border-style
边框宽度: border-width
边框的颜色: border-color,如何不设置边框颜色，则为字体的颜色

边框 + 填充区 + 内容区 = 边框盒 border-box
外边距 margin

边框到其他盒子的距离

margin-top
margin-right
margin-bottom
margin-left

简写：margin: 10px ~ 10px 20px 30px 40px

对于盒子来说，最容易被人忽略的就是他的外边距，往往有时候就是外边距处理的不好，导致整个页面做的不好看。