对于每个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
对于盒子来说,最容易被人忽略的就是他的外边距,往往有时候就是外边距处理的不好,导致整个页面做的不好看。