CSS盒模型

 

上图便是经典的盒模型的图。文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。

1.1      width/ height

width 和 height 设置内容框（content box）的宽度和高度。内容框是框内容显示的区域（包括框内的文本内容，以及表示嵌套子元素的其它框）。还有其他属性可以更巧妙地处理内容的大小（设置大小约束而不是绝对的大小），这些属性包括min-width、max-width、min-height 和 max-height。

1.2      padding

padding 表示一个 CSS 框的内边距（这一层位于内容框的外边缘与边界的内边缘之间）。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。

1.3      border

CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0（从而让它不可见），不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如  border: 1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖：

border-top, border-right, border-bottom, border-left: 分别设置某一边的边界厚度／风格／颜色。

border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。

你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color等。

1.4      margin

外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。

注意: 外边距有一个特别的行为被称作外边距塌陷（margin collapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。

1.5      需要注意的地方

1、默认情况下background-color/background-image 延伸到了边界的边沿（the edge of the border）。背景色和背景图不会延伸到margin区域。

2、如果内容框变得比示例输出的窗口大，它将从窗口溢流，然后滚动条将会出现允许你滚动窗口来查看盒子剩余的内容 。你可以使用overflow属性来控制溢流。

3、盒的高度不监视百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px 或者em），它会比在页面上默认是100%高度更实用。

4、边界也忽略百分比宽度设置。

5、使用百分比设置margin或padding的值（border不能根据百分比设置），是按照父元素的宽度为基数来设置的。

6、盒子的outline属性是一个看起来像是边界但又不属于盒模型的东西。它的行为和边界差不多，但是并不改变盒的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）。而boder属性会改变盒的尺寸。

7、框的总宽度是width, padding-right, padding-left, border-right, 以及 border-left 属性之和。在一些情况下比较恼人（例如，假使你想要一个框占窗口宽度的50%，但边界和内边距是用像素来表示时该怎么办？），为了避免这种问题，有可能使用属性box-sizing来调整盒模型。使用值border-box，它将框模型更改成这个新的模型：

 

1.6      盒类型

之前我们说的所有对于盒的应用都表示的是块级元素的，然而CSS还有一些表现不同的其他盒类型。盒类型应用通过指定display属性，这个属性有很多的属性值，下面介绍三个最普遍的类型：block, inline, and inline-block。

块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）

行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。

行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。）

关于上述介绍的例子：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>盒模型的display</title>

<style>

    p {

        padding : 1em;

        border  : 1px solid black;

    }

 

    span {

        padding : 0.5em;

        border  : 1px solid green;

 

        /* That makes the box visible, regardless of its type */

        background-color: yellow;

    }

 

    .inline       { display: inline;       }

    .block        { display: block;        }

    .inline-block { display: inline-block; }

</style>

</head>

<body>

<p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>

    Nam sed dolor non tortor lacinia lobortis id dapibus nunc.

</p>

 

<p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>

    Nam sed dolor non tortor lacinia lobortis id dapibus nunc.

</p>

 

<p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>

    Nam sed dolor non tortor lacinia lobortis id dapibus nunc.

</p>

<script src="./index.js"></script>

</body>

</html>
posted @ 2016-05-07 23:57  nDos  阅读(248)  评论(0)  编辑  收藏  举报