CSS布局基础:盒子模型和边距折叠

这是一个简单的段落,用于展示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; }

看起来是这样的:

可以使用负边距实现许多出色的效果,包括多列列表、文本阴影…列表还在继续。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485