我的位置:首页 > 前端>CSS盒模型

CSS盒模型

时间:2016-05-07 23:57:00 来源:互联网 作者: 神秘的大神 字体:

 

上图便是经典的盒模型的图。文档的每个元素被构造成文档布局内的一个矩形框,框每层的大小都可以使用一些特定的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>