这是一个简单的段落,用于展示CSS盒子模型的效果。
在CSS中,盒子模型是布局的基础。它定义了元素周围的矩形空间,由以下三个属性定义:
边框(border)、内边距(padding)和外边距(margin)。这些CSS属性的宽度加起来就是元素与其相邻元素之间的空间。
边框代表元素本身的有效外限。边框可以是可见的也可以是不可见的,并且具有线型、颜色和宽度的属性。
内边距指定边框和HTML元素内任何内容之间的间距。如果没有可见的边框,那么内边距的范围就是元素的范围。与元素关联的任何背景CSS属性都在边框和内边距属性定义的区域内显示。
外边距代表边框的外边缘与任何相邻元素之间的距离。这通常是混淆的来源,因为很容易将外边距视为元素之间的“内边距”。更好的理解是将其视为页面的页边距:它代表对象的外边缘。外边距实际上是透明的,不会反映为元素指定的任何背景属性。
CSS语法:
让构建一个简单的例子,以便可以看到CSS语法。以下是包含单个文本行的简单容器div的HTML:
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
为了视觉清晰,首先设置body和“container”div的样式:
body {
background: black;
}
#container {
background: gray;
width: 600px;
margin: 0px auto;
border: 1px solid black;
}
这里需要注意的重要一点是页面背景是黑色的,而容器div是灰色的。现在可以格式化容器内的p元素:
p {
background: white;
border: 20px solid red;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
因此,p元素边框内的所有内容都应该是白色的 - 并且有一个很好、厚实的红色边框,所以不会错过它。
注意在本例中分别指定了上、下、左、右边距和内边距值。这是指定这些值的一种方式,类似的border-top(等等)设置也可用于边框。这使可以清楚地设置需要的任何或所有边框、边距和内边距设置。例如,如果只想指定顶部和右侧边距,这是完全可以接受的:
margin-top: 30px;
margin-right: 8px;
然而,也可以使用CSS简写语法来设置这些值。实际上,这就是到目前为止对边框设置所做的:
border: 20px solid red;
对于边距和内边距,可以一次设置所有四个值,使用这种简写:
margin: 0 0 0 0;
padding: 0 0 0 0;
值按顺时针顺序从顶部开始,用空格分隔。换句话说:
margin: [top] [right] [bottom] [left]
必须给出所有四个值,使用0表示在该方向上没有边距或内边距。可以使用任何合法的CSS单位,尽管这些属性通常设置为%、px或em值。
相邻和嵌套元素:
页面标记中元素的边框、边距和内边距的配置为提供了设计网站时的极大灵活性。与其他CSS属性一样,可以为元素、元素状态(例如悬停)、ID和类分配样式。而且,使用JavaScript或jQuery进行一点脚本编写,还可以在运行时进行一些相当花哨的样式设置。
需要了解相邻元素的组合边距和内边距效果。设置的组合方式并不总是显而易见的 - 特别是当样式更改影响渲染页面上元素的放置时。而且,还有一些技巧需要注意。
首先,让看看这里各种不同的边框、边距和内边距配置:
<div id="container">
<div id="none">
Lorem ipsum dolor sit amet....
</div>
<div id="margin">
Ut enim ad minim veniam....
</div>
<div id="padding">
Duis aute irure dolor....
</div>
...
</div>
以下是相关的CSS:
#none {
border: 1px solid red;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#margin {
border: 1px solid red;
margin: 20px 20px 20px 20px;
padding: 0 0 0 0;
}
#padding {
border: none;
margin: 0 0 0 0;
padding: 20px 20px 20px 20px;
}
#marginpadding {
border: none;
margin: 20px 20px 20px 20px;
padding: 20px 20px 20px 20px;
}
#marginborderpadding {
border: 20px solid red;
margin: 20px 20px 20px 20px;
padding: 20px 20px 20px 20px;
}
请注意,边距和内边距是累加的,需要记住这一点。这里5px,那里10px,加起来可能会导致元素的意外放置。
然而,有一些例外,其中最重要的是…
边距折叠:
在许多情况下,当两个相邻元素的顶部或底部边距接触时,边距会合并,而不管为各个元素设置的CSS属性如何。这称为边距折叠。
这里的四个div都使用相同的20px边距和内边距。
#marginpadding {
margin: 20px 20px 20px 20px;
padding: 20px 20px 20px 20px;
}
但请注意,尽管每个元素周围都有相等的内边距,元素之间的顶部和底部边距明显小于20px + 20px = 40px。在这种情况下,结果是可以的,得到了适当的边距。但值得注意这种行为是有意为之的。此外,空元素通常会完全折叠,而不管边距值如何,还有其他规则。要了解更多信息,请阅读W3CCSS建议的“边距折叠”部分,该部分详细介绍了边距何时以及如何折叠。
另一个边距折叠案例有点棘手。请记住,在原始HTML示例中,容器有一个边框。如果去掉它…
#container {
background: gray;
width: 600px;
margin: 0px auto;
}
…噗,顶部和底部边距完全折叠。
一个简单的补救方法是最初所拥有的:一个小边框,与背景融合在一起,或者使用透明颜色值。然而,在更复杂的布局中,可能最终会使用否定边距的行为。仔细阅读CSS建议应该可以帮助避免这些情况。
负边距:
到目前为止,所有示例都显示了零或正边距值。根据CSS2规范,负边距值也是完全合法的CSS。简而言之,负的顶部和左侧值使可以将元素向上和向左拉动,而负的底部和右侧值将相邻元素拉入并覆盖目标元素。将负边距与z-index结合使用,可以仅用几行代码创建一些非常光滑的布局。
例如,此CSS将之前的线性示例转换为一系列重叠的框:
#marginpadding {
margin: 20px 40px 20px 20px;
padding: 20px 20px 20px 20px;
z-index: 1;
position: relative;
}
#negativemargin {
background: orange;
margin: -30px 20px -30px 40px;
padding: 20px 20px 20px 20px;
z-index: 2;
position: relative;
}
看起来是这样的:
可以使用负边距实现许多出色的效果,包括多列列表、文本阴影…列表还在继续。