CSS盒子（Box）模型入门

论您是CSS的新手还是经验丰富的老手，了解和理解box模型都很重要。让我们更好地了解它。

每个初学者都应该从基础开始。以CSS为例，基础是学习Box模型。在继续学习其他CSS概念之前，您应该首先掌握它!

盒子（Box）模型是CSS的基本元素。

它确实会让初学者感到困惑，所以现在是时候纠正错误了。在这里，您将了解box模型的所有基本元素以及它们是如何使用的。

在深入研究之前，每个人都需要了解web设计中的每个元素都是一个矩形框。您可能已经听过很多次了，但是这是每个开发人员都应该注意的一个重要概念。

现在，让我们来解释一下神秘的盒子模型!

盒子模型结构

如上所述，box模型的结构包括：

Content (height and width).

Padding.

Border.

Margin.

这些是浏览器呈现框模型所需的所有元素。值得庆幸的是，有了CSS，我们可以单独地控制它们。让我们来看看。

在本文中，我们将使用以下代码并逐渐添加到其中。

HTML

<div class="box">Lorem ipsum dolor amet whatever woke cronut, 
farm-to-table church-key tousled edison bulb. </div>

CSS

.box {
 background-color: hotpink;
 color: #fff;
}

The Content

Content非常清晰。它是具有特定宽度和高度的元素的内容。可以使用CSS属性的高度和宽度设置固定的高度和宽度，也可以由内容本身决定。

现在，有一件事让人有点困惑，那就是使用内联或块级元素。

使用内联和块级元素（Using Inline and Block Level Elements

）

为了刷新您的内存，内联元素和块元素之间的区别在于块元素占用了容器宽度的100%，而内联元素只占用了内容需要的空间量。

在使用内联元素时，不可能为该元素设置固定的宽度或高度，因为元素没有预先确定的宽度和高度(因为宽度和高度由内容决定)。这可以通过将元素转换为块元素来克服。

与内联元素不同，使用块级元素时，可以轻松地为其设置固定的宽度或高度。由于在默认情况下，块级元素占容器宽度的100%，我们可以通过设置一个固定的宽度轻松覆盖它。

您还可以将元素转换为inline-block。当使用inline-block时，元素具有内联元素的行为(只占用内容的空间)，但是您可以像使用块元素那样操作它。

现在，当我们有一个块级元素时，我们可以给它一个宽度和高度。

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
}

结果如下图：

The Padding

接下来，我们将在我们的框中添加一些填充。

padding定义了内容和框的边缘之间的空间。

让我们看看它在我们的例子中的作用

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
}

结果如图:

在图像中，我们看到padding如何影响框的整体外观。框的内容和四边都有10px的空间。我们也可以向四面八方单独添加padding,使用padding-top padding-bottom,padding-left padding-right。

The Border

因为我们是从内到外，下一步就是定义border。border围绕着内容，您不必使用它，但它仍然存在。这意味着border的宽度为0。

现在我们添加一个边框。

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
}

The Margin

框模型的最后一个方面是margin。正如你们所知道的，margin是border外的空间。它是元素之间的空间。

在实际示例中演示这一点的最佳方式是向您展示两个元素是如何放置的，以及如何使用和不使用margin边距。

HTML

<div class=”box”></div>
<div class=”box”></div>

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
 margin: 0
}

在这个例子中，我们看到，没有边距，两个元素是如何结合在一起的，它们之间没有空间。

现在，添加margin

CSS

.box {
 margin: 20px;
}

现在,这看起来更好。我们在Box之间增加了一些空间。我们还可以使用margin - top、margin - bottom、margin - left或margin - right来单独添加元素的每一侧上的空间。

总结

恭喜，你终于完成了这篇文章!那么，我们学到了什么?

网页上的每个元素基本上都是一个框。

box模型的方面是content, padding, border, and margin.。

使用内联元素时，不能为该元素设置固定的宽度或高度，而使用块和内联块元素则可以。

希望这能帮助你学到一些新的东西或者刷新你的记忆。

SS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。

1. box-shadow属性的浏览器兼容性

先来看一个这个属性的浏览器兼容性：

Opera:：不知道是从哪个版本开始支持的。
Firefox：通过私有属性-moz-box-shadow支持。
Safari和Chrome：通过私有属性-webkit-box-shadow支持。
所有IE不支持(不知道IE9是否有所改善)。别急，我们将在文章最后会介绍一些针对IE的Hack。

2. box-shadow属性的语法

box-shadow有六个可设的值：

img{box-shadow:阴影类型 X轴位移 Y轴位移阴影大小阴影扩展阴影颜色 }

当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。
X轴和Y轴位移不等同但类似于Photoshop里面的”角度”和”位置。
阴影大小、扩展、颜色和Photoshop里面的都同理。

3. 实例解析

让我们通过几个实例来看一个box-shadow的效果，先弄个简单的HTML供测试：

<html>
<head>
<style type="text/css">CSS部份写在这里</style>
</head>
<body>
<img  src="test.jpg" />
</body>
</html>

请注意：为了省事儿，下面的CSS代码中只写了box-shadow，在实际使用中，你应该把-moz-box-shadow和-webkit-shadow也写上。你需要做的很简单，复制两个box-shadow，在它们前面分别加上-moz-和-webkit-。

img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}

(1). 投影，没有位移，10px的阴影大小，没有扩展，颜色#06C

img{box-shadow:0 0 10px #06C;}

这里的颜色值是HEX值，我们还可以使用RGBA值，RGBA值的好处是，它多了一个Alpha透明值，你可以控制阴影的透明度。

img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}

(2). 在上面的基础上加上20px的扩展

img{box-shadow:0 0 10px 20px #06C;}

(3). 内阴影，无位移，10px大小，没有扩展，颜色#06C

img{box-shadow:inset 0 0 10px #06C;}

(4). 多重阴影效果

box-shadow可以同时使用多次，我们来个四色的阴影。

img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue, box-shadow:0 -10px 10px yellow, box-shadow:0 10px 10px green}

(5). 使用多个阴影属性的顺序问题

当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层。比如下面这段代码，我们先写一个10px的绿色阴影，再写一个10px大小但扩展20px的阴影。结果是：绿色阴影层在黄色阴影层之上。

img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}

但如果我们把顺序调一下，像这样:

img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}

我们将看不到后写的绿色阴影层，因为它先写且被半径比较大的黄色层覆盖掉了。

4. 让IE也支持box-shadow

IE本身是shadow滤镜可以实现类似效果的，还有一些js和.htc的hack文件可以帮助你在IE中实现这一效果。我也无法一一都去尝试，这里只介绍我用过的一个。

ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

它的使用方法是：下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码：

<!--[if IE]>
<style type="text/css">
img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->

蓝色部份输入要使用box-shadow属性的选择器，绿色部份输入ie-css3.htc的绝对路径，或相对路径，反正要保证能访问得到。

然后这样就OK了。但还是有几点需要注意的是：

当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。
当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
不支持RGBA值中的alpha透明度。
不支持inset内阴影。
不支持阴影扩展。
阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。

所以说，这个脚本仅仅是让IE支持了部份的box-shadow值。

html页面中，所有可见的html标签元素都是由margin、padding、border 和内容组成的，专业术语称盒子模型或框模型，后面统称为盒子模型。

如下图示例：

盒子模型

按F12键打开开发者工具，使用选择元素工具（箭头图标），随便选择一个html元素，在下方styles 面板上就会看到上图的盒模型。

在了解盒子模型前，让我们先学习边距、填充、和边框。

当html元素没有任何内容或宽高为0时，设置边距、边框、填充就没有任何意义了，所以这些都是建立在有内容的元素基础上的。

边距、填充、和边框

因为每一个html元素都是一个盒子，它有上下左右四个面，所以边距、填充、边框属性需要设置四个方向的值，可以简写也可以分开使用，语法如下：

简写语法：

margin: 10px 15px 20px 12px
padding: 10px 15px 20px 12px
border: 1px solid #ff0000

效果如下：

margin和padding在简写时是按照上、右、下、左的顺时针方向设置值的，这4个值不是必须都要设置的，你可以设置一个、2个、3个，但至少要一个值。

如果设置一个值时，其它方向都使用相同的值，如：

margin:10px;
padding:10px;

效果如下：

如果设置2个值时,如：

margin:10px 15px;
padding:10px 15px;

效果如下：

如上可以看到，下、左边距都是10px，下、左填充都是15px，缺省的方向会以使用反方向的值，同理当设置3个属性值时一样，缺省的那个会默认使用反方向的值。

拆分写法：

/*边距*/
margin-top: 10px;
margin-right:15px;
margin-bottom:20px;
maring-left:12px;
/*填充*/
padding-top: 10px;
padding-right:15px;
padding-bottom:20px;
padding-left:12px;
/*边框*/
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;

分开写法和简写的效果是一样的，这里注意边距、填充只有一个属性值，而边框有三个属性值：边框大小、边框样式、边框颜色，所以边框更加复杂点，边框还可以按照不同属性单独设置。

1、css 边距 —— margin

边距（margin）是指从边框边界向外的距离，为元素周围创建空间，它是透明的，如下箭头所示。

边距的重叠现象，当相邻的html元素都有边距时，会出现边距重叠而不是相加的效果，如下示例：

可以看到，盒子1的下边距和盒子2的上边距重叠了，它们的上下间距是10px，而不是20px。如果盒子1和盒子2的边距值不一样时也会重叠，只不过它们的间距会以其中最大的那个值显示，如下：

2个盒子上下间距实际以盒子2的边距显示，因为盒子2边距大于盒子1的边距。

2、css 填充 —— padding

填充就是从边框边界向内到元素内容边界的距离，如下绿色区域箭头示例：

3、css 边框 —— border

边框border，不同于margin、padding，它是可见的默认是有颜色的，如下示例：

盒子1边框宽度1px，盒子2边框宽度10px，都是红色边框，其盒模型图如下：

当border为0时，不显示边框。

之前介绍了边框的简写方法，是按照方向分别设置边框宽度、样式、颜色：

border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;

因为边框有三个属性值：宽度、样式、颜色，所以还可以按照不同属性值设置，如下：

border-color:red;
border-style:solid;
border-width:10px;

当按照属性值的维度设置的时候，同样可以继续按照方向拆分设置，如下：

设置边框宽度：

四个方向都是一样的边框宽度：

border-width:10px;

分别设置每个方向的宽度：

border-top-width:10px;
border-right-width:15px;
border-bottom-width:12px;
border-left-width:5px;

如下显示效果：

设置边框样式

样式分别有 dotted（虚线）、solid（实线）、double（双线）、dashed（虚线）4个样式，如下：

四个方向都是一样的边框样式：

border-style: solid;

分别设置每个方向边框样式：

border-top-style:solid;
border-right-style:dotted;
border-bottom-style:double;
border-left-style:dashed;

如下效果：

当边框宽度为0时，设置边框样式或颜色是无效的。

设置边框颜色

四个方向都是一样的颜色：

border-color: red;

分别设置每个方向的颜色：

border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:orang;

显示效果：

当边框宽度为0时，设置边框样式或颜色是无效的。

盒子的实际大小

一个html元素在页面中显示的实际宽高并一定等于它的width和height属性设置的值。

标准盒模型

标准盒模型的width/height 不包含padding和border

如下图：

盒子1的实际显示尺寸等于height + border + padding之和，如图中盒子1占据的空间：高度126 = 100 + 20 + 6，宽度 136 = 100 + 30 + 6。

非标准盒模型

比如在之前Ie浏览器中，width/height 包含了padding和border。

这里使用box-sizing: border-box模拟非标准盒模型。

如下图：

可以看到，padding 和 border 被包含到宽度和高度里了。

如果想要改变盒子的计算方式可以使用 CSS Box Sizing 。

当box-sizing: border-box，是非标准盒模型。

当box-sizing: content-box（浏览器默认），为标准盒模型。

总结

1、盒子模型的概念，由边距、边框、填充和元素内容组成。

2、边距、填充和边框的语法使用，简写、拆分使用、按方向或属性值维度单独使用。

3、html元素实际显示宽度和高度计算方法。

4、标准盒模型和非标准盒模型的区别。

总而言之，css盒子模型是学习css的基础知识，后面一切都是建立在盒子模型之上的，所以要完全理解它，感谢关注，祝学习愉快。

上一篇：前端入门——css 选择器

在线咨询

上一篇：js图片数据转换操作
下一篇：H5 手机 App 开发入门：技术篇

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS盒子（Box）模型入门

1. box-shadow属性的浏览器兼容性

2. box-shadow属性的语法

3. 实例解析

4. 让IE也支持box-shadow

边距、填充、和边框

盒子的实际大小

总结

您的项目需求