CSS新手入门笔记整理：CSS盒模型

最新推荐文章于 2024-11-07 16:35:05 发布

太空背包客

最新推荐文章于 2024-11-07 16:35:05 发布

阅读量1.6k

点赞数 38

分类专栏：前端新手入门笔记整理文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_55576134/article/details/134822689

版权

前端新手入门笔记整理专栏收录该内容

40 篇文章 7 订阅

订阅专栏

在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：

一是理解单独一个盒子的内部结构（往往是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按钮的边框无效，在其他浏览器中则会去掉按钮的边框。

内边距：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 为负数时，“后续元素”会被拉向指定方向。将“后续元素”拉进，然后覆盖“当前元素”。