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

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

---

使用技巧

图片与文本对齐	当图片与文本放到一起的时候，它们在底部水平方向上往往都是不对齐的。这是因为在默认情况下，图片与周围的文本是“基线对齐”，如果想让它们在底部水平方向对齐，可以使用负 margin 技术。
自适应两列布局	自适应两列布局，指的是在两列布局中，其中一列的宽度是固定的，而另外一列宽度自适应。 如果使用浮动来做的话，只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局，可以使用负 margin 技术来实现。
元素垂直居中	给父元素写上 psition:relative;，这样做是为了给子元素添加 position:absolute 的时候不会被定位到“外太空”去；然后给子元素添加如下属性。 父元素 {position:relative; } 子元素 { position:absolute; top:50%; left:50%; margin-top: "height值一半的负值" ; margin-left: "width值一半的负值" ; }

---