【牛腩新闻】——盒子模型

【牛腩新闻】——盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Height(高度) - 盒子元素的高度。
• Width(宽度) - 盒子元素的宽度。

 

提示：背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置

CSS内边距（padding）

可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

也可以这样：

h1 {

  padding-top: 10px;

  padding-right: 0.25em;

  padding-bottom: 2ex;

  padding-left: 20%;

  }

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

 

CSS边框（border）

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSSborder 属性允许你规定元素边框的样式、宽度和颜色。

 

定义单边宽度

您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px5px 15px 5px;}

下面的规则与上面的例子是等价的：

p {

 border-style: solid;

 border-top-width: 15px;

 border-right-width: 5px;

 border-bottom-width: 15px;

 border-left-width: 5px;

  }

没有边框

在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid或 outset。

这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

 

边框的颜色

设置边框颜色非常简单。CSS 使用一个简单的 border-color属性，它一次可以接受最多 4 个颜色值。

要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：

h1 {

 border-style: solid;

 border-color: black;

 border-right-color: red;

  }

CSS外边距（margin）

h2 {

 margin-top: 20px;

 margin-right: 30px;

 margin-bottom: 30px;

 margin-left: 20px;

  }

等同于以下情况

p {margin: 20px 30px 30px 20px;}