CSS框模型

浏览数：46 / 时间：2015年06月09日

CSS框模型Box Model规定了元素框处理元素内容element，内边距padding，边框border，外边距margin的方式。

内容区域的宽度和高度用width和height表示。

1）内边距padding

<!--  h1元素的各边都是10像素的内边距  -->
h1 {padding: 10px;}
<!--  按照上右下左顺序分别设置各边内边距  -->
h1 {padding: 10px 0.25em 2ex 20%;}
<!--  下面的代码与上面的等价  -->
h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

2）边框border

CSS border属性允许规定元素边框的样式，宽度和颜色。

border-style属性定义边框的样式。属性值有：none,hidden,dotted,dashed,solid,double,

　　groove,ridge,inset,outset,inherit.

属性值默认是none。

<!--  以下两种方法等价  -->
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

border-width属性指定边框的宽度。属性值可以是：2px, 0.1em, thin, medium, thick.

p {border-style: solid; border-width: 5px;}
<!--  可以按照 top-right-bottom-left 的顺序设置元素的各边边框  -->
p {border-style: solid; border-width: 15px 5px 15px 5px;}
<!--  上面的例子也可以简写为（这样写法称为值复制）  -->
p {border-style: solid; border-width: 15px 5px;}
<!--  下面的规则与上面的例子是等价的  -->
p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

border-color属性设置边框颜色。属性值可以是命名颜色，也可以是十六进制和 RGB 值。

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }
<!--  定义单边颜色  -->
h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

下例说明了如果定义一个透明边框：

<!--  CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。  -->
<html>
<head>

<style type="text/css">
a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}
</style>

</head>

<body>

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

</body>
</html>

3）margin外边框

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

<!--  h1 元素的各个边上设置了 1/4 英寸宽的空白  -->
h1 {margin : 0.25in;}
<!--  h1 元素的四个边按上右下左顺序定义了不同的外边距，长度单位是像素 (px)  -->
h1 {margin : 10px 0px 15px 5px;}
<!--  还可以为 margin 设置一个百分比数值，相对于父元素的width计算的  -->
h1 {margin : 10px 0px 15px 5px;}
<!--
有时，我们会输入一些重复的值。
通过值复制，您可以不必重复地键入这对数字。
CSS 定义了一些规则，允许为外边距指定少于 4 个值。
    如果缺少左外边距的值，则使用右外边距的值。
    如果缺少下外边距的值，则使用上外边距的值。
    如果缺少右外边距的值，则使用上外边距的值。
-->
p {margin: 0.5em 1em;}

<!--
可以使用单边外边距属性为元素单边上的外边距设置值。
一个规则中可以使用多个这种单边属性。
以下两种情况等价
-->
p {margin: 20px 30px 30px 20px;}
p {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

外边距合并是一个相当简单的概念，指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS框模型