在"CSS盒子模型"理论中,页面中的所有元素都可以看成一个盒子,并且占据着一定的页面空间。
![](https://file.jishuzhan.net/article/1732336881363849218/268142754491102728f9e047954ef99f.webp)
一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:
- 一是理解单独一个盒子的内部结构(往往是padding);
- 二是理解多个盒子之间的相互关系(往往是margin);
可以把每个元素都看成一个盒子,盒子模型是由4个属性组成的:content(内容)、padding(内边距)、margin(外边距)和border(边框)。此外,在盒子模型中,还有宽度(width)和高度(height)两大辅助性属性。
|---------|-------------------------------------------|-------------------------------------------------------------------------------------------|
| 结构 | 说明 | 属性 |
| content | 内容,CSS盒子模型的中心,它呈现了盒子的主要信息内容,可以是文本或图片。 | * width(宽) * height(高) * overflow(溢出) |
| padding | 内边距,用于定义内容与边框之间的距离。 | * padding-top(内边距-上) * padding-bottom(内边距-下) * padding-left(内边距-左) * padding-right(内边距-右) |
| margin | 外边距,用于定义当前元素与其他元素之间的距离。 | * margin-top(外边距-上) * margin-bottom(外边距-下) * margin-left(外边距-左) * margin-right(外边距-右) |
| border | 边框,用于定义元素的边框。 | * border-width(边框宽度) * border-style(边框类型) * border-color(边框颜色) |
宽高:width、height
- 元素的宽度(width)和高度(height)是针对内容区而言的。padding不是内容区的一部分。
- 只有块元素才可以设置width和height,行内元素是无法设置width和height的。行内元素设置的width和height无法生效,它的宽度和高度只能由内容区撑起来。
语法
width:像素值;
height:像素值;
边框:border
语法
border:1px solid red;
第1个值指的是边框宽度(border-width),第2个值指的是边框外观(border-style),第3个值指的是边框颜色(border-color)。
拓展:border:0 和 border:none的差异
|-------------|-------------|-----------------------------------------------------------------------------------------------------|
| 性能差异 | border:0 | 表示把 border 定义为 0 像素。虽然 0px 在页面上看不见,但是浏览器依然会对 border 进行渲染,渲染之后,实际上是一个像素为 0 的 border。border:0 需要占用内存。 |
| 性能差异 | border:none | 表示把 border 定义为"none(无)",浏览器解析 border:none 时并不会对它 进行渲染。 border:none 不需要占用内存。 |
| 兼容差异 (了解即可) | * 兼容差异只存在于 IE6 和 IE7 的 <input type="button"/> 标签以及 <button></button> 标签中, 其他浏览器不存在兼容问题。 * border:0 在所有的浏览器中的效果都一样,都是把边框隐藏(不是去掉)。 * border:none 对IE6和IE7按钮的边框无效,在其他浏览器中则会去掉按钮的边框。 ||
| 兼容差异 (了解即可) | * 兼容差异只存在于 IE6 和 IE7 的 <input type="button"/> 标签以及 <button></button> 标签中, 其他浏览器不存在兼容问题。 * border:0 在所有的浏览器中的效果都一样,都是把边框隐藏(不是去掉)。 * border:none 对IE6和IE7按钮的边框无效,在其他浏览器中则会去掉按钮的边框。 ||
内边距:padding
语法
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
padding简写形式
语法
/*表示4个方向的内边距都是20px*/
padding:20px;
/*表示padding-top和padding-bottom为20px,padding-right和padding-left为40px。*/
padding:像素值20px 像素值40px;
/*表示padding-top为20px,padding-right为40px,padding-bottom为60px,padding-left为80px*/
padding:像素值20px 像素值40px 像素值60px 像素值80px;
外边距:margin
语法
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
外边距指的是两个盒子之间的距离,它可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。
margin简写形式
语法
/*表示4个方向的外边距都是20px*/
margin:20px;
/*表示margin-top和margin-bottom为20px,margin-right和marginleft为40px*/
margin:像素值20px 像素值40px;
/*margin-top为20px,margin-right为40px,marginbottom为60px,margin-left为80px*/
margin:像素值20px 像素值40px 像素值60px 像素值80px;
拓展:外边距叠加
外边距叠加,又称"margin 叠加",指的是当两个垂直外边距相遇时,这两个外边距将会合并为一 个外边距,即"二变一"。其中,叠加之后的外边距高度,等于发生叠加之前的两个外边距中的最大值。
外边距叠加的意义:CSS 定义外边距叠加的初衷就是为了更好地对文章进行排版。
|--------|---------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 同级元素叠加 | 当一个元素出现在另外一个元素上面的时候,第 1 个元素的下边距(margin-bottom)将会与第 2 个元素的上边距(margintop)发生合并。 | |
| 父子元素叠加 | 当一个元素包含在另外一个元素中时(呈父子关系),假如没有 padding 或 border 把外边距分隔开,父元素和子元素的相邻上下外边距也会发生合并。 | |
| 空元素 | * 当一个空元素 有上下外边距时,如果没有 border 或者padding,则元素的上外边距与下外边距就会合并。 * 如果空元素的外边距碰到另外一个元素的外边距,它们也会发生合并。 |
|
总结
- 水平外边距,永远不会有叠加,水平外边距指的是 margin-left 和 margin-right。
- 垂直外边距只有在以上 3 种情况下会叠加,垂直外边距指的是 margin-top 和 margin、bottom。
- 外边距叠加之后的外边距高度,等于发生叠加之前的两个外边距中的最大值。
- 外边距叠加针对的是 block 以及 inline-block 元素,不包括 inline 元素。因为 inline 元素的 margin-top 和 margin-bottom 设置无效。
拓展:负margin技术
当margin取值为负数时,margin 对普通文档流元素和对浮动元素的影响是不一样的。其中,负 margin 对普通文档流元素的影响,可以分为两种情况。
- 当元素的 margin-top 或者 margin-left 为负数时,"当前元素"会被拉向指定方向。会将"当前元素"拉出,然后覆盖"其 他元素"。
- 当元素的 margin-bottom 或者 margin-right 为负数时,**"后续元素"会被拉向指定方向。**将"后续元素"拉进,然后覆盖"当前元素"。
![](https://file.jishuzhan.net/article/1732336881363849218/29c39462b8cffd8f768f19726efa5884.webp)
使用技巧
|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 图片与文本对齐 | 当图片与文本放到一起的时候,它们在底部水平方向上往往都是不对齐的。这是因为在默认情况下,图片与周围的文本是"基线对齐",如果想让它们在底部水平方向对齐,可以使用负 margin 技术。 |
| 自适应两列布局 | 自适应两列布局,指的是在两列布局中,其中一列的宽度是固定的,而另外一列宽度自适应。 如果使用浮动来做的话,只能实现固定的左右两列布局,并不能实现其中一列为自适应的布局,可以使用负 margin 技术来实现。 |
| 元素垂直居中 | 给父元素写上 psition:relative;,这样做是为了给子元素添加 position:absolute 的时候不会被定位到"外太空"去;然后给子元素添加如下属性。 父元素 {position:relative; } 子元素 { position:absolute; top:50%; left:50%; margin-top: "height值一半的负值" ; margin-left: "width值一半的负值" ; } |