CSS基础:Box模型,margin 和 padding

分享于 

9分钟阅读

Web开发

  繁體

介绍

现代HTML和级联样式表( CSS )的一个强大特性是,你可以在HTML中完全分离页面的标记。 使用少量标签和一些CSS样式的HTML页面看起来就像- -。 你喜欢的任何东西。 你可以改变CSS的外观来改变它的外观。

CSS样式的一个基本但经常被误解的特性叫做框模型。 长方体模型仅定义元素周围的矩形空间,并由三个属性定义:

  • 边框
  • padding
  • margin

分配给这些CSS属性的宽度将增加关联HTML元素与其相邻元素之间的空间。 下面是一个展示所有三个例子的例子:

A simple box model example.

边框表示元素本身的有效外部限制。 边框可以是可见的或者不可见的,并且具有线条类型。颜色和宽度的属性。

padding 指定边框和HTML元素内任何内容之间的间距。 如果没有可见边界,则 padding的范围实际上是元素的范围。 元素关联的任何 background CSS属性都显示在边界和 padding 属性定义的区域内。

margin 表示边界外边缘与任何相邻元素之间的距离。 这通常是混淆的源,因为它很容易将 margin 视为元素之间的一种"padding"。 最好把它想象成页面的margin: 它表示对象的外边缘。 margin 是有效透明的,不会反映为元素指定的任何 background 属性。

CSS语法

让我们构造一个简单的示例,以便你可以看到CSS语法。 下面是一个简单容器 div的HTML,其中包含一行文本:

<divid="container"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>

为了实现视觉清晰,我们首先设置 body 和"容器"div的样式:

body {background: black;}
#container {
 background: gray; 
 width: 600px; 
 margin: 0px auto; 
 border: 1px solid black;}

这里要注意的是,页面 background 是 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 元素边界内的任何东西都应该是白色的,我们将有一个很好,厚,红色的边框,所以你不能错过它。 以下是它的外观:

The box model elements annotated.

注意我们在这个例子中分别指定了顶。底。左和右 margin 和 padding 值。 这是指定这些值的一种方法,类似的border-top ( 等等) 设置可以用于边框。 这样可以清楚地设置所需的任何或者全部边框。margin 和 padding 设置。 例如如果你只想指定上边距和右边距,则这是完全可以接受的:

margin-top: 30px;margin-right: 8px;

但是,你也可以使用 CSS shorthand 语法来设置这些值。 实际上,这就是我们在边界设置中所做的:

border:20pxsolid red;

对于 margin 和 padding,你可以使用这里 shorthand 一次设置所有四个值:

margin:000 0; padding:000 0;

这些值按顺时针顺序从顶部按顺时针顺序分隔。 换句话说:

margin: [top] [right] [bottom] [left]

你必须给出所有4 个值,使用 0表示在 direction 中没有 margin 或者 padding。 尽管这些属性通常在 %, px或者 em 值中设置,但是可以使用任何合法的CSS单元。

相邻和嵌套元素

页面标记中的边框。边距和 padding的配置使你能够在网站的设计中大大灵活性。 其他CSS属性一样,你可以为元素。元素状态( 盘旋,例如)。id和类指定样式。 还有一些使用JavaScript或者jQuery的脚本,使你能够在飞行时进行一些非常漂亮的样式。

你需要注意相邻元素的组合 margin 和 padding 效应。 设置如何组合并不总是显而易见的- 特别是样式更改影响呈现页面上元素的位置。 还有一些技巧你也需要注意。

首先,让我们来看看这里的各种不同的边框,margin 和 padding 配置:

Neighboring divs with various borders, margins and padding.

这里代码的HTML非常简单,只是前面示例的扩展。 每一行文本都包含在一个单独的div 中,每个 div 都有惟一的ID。

<divid="container"><divid="none">Lorem ipsum dolor sit amet....</div><divid="margin">Ut enim ad minim veniam....</div><divid="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;}

注意 margin 和 padding 是加法的,你需要记住它。 5px 和 10px 可以增加一些意想不到的元素放置。

然而,还有一些例外,其中最重要的是。

折叠边距

在许多情况下,当两个相邻的元素都有顶部或者底部边距时,边距将组合在一起。 这被称为折叠的margin。 下面是一个示例:

An example of collapsing margins on adjacent elements.

这四个 div 在这里都使用相同的20px 页边距和 padding。

#marginpadding {
 margin: 20px 20px 20px 20px; 
 padding: 20px 20px 20px 20px;}

注意,在每个元素周围都有相同的填充,元素之间的顶部和底部边界明显小于 20px + 20px = 40 x。 在这种情况下,结果是可以的,我们得到了适当的边距。 但是值得注意的是,这种行为是由设计。 此外,空元素通常完全不考虑值,还有其他规则。 要了解更多信息,请阅读 W3C CSS推荐的折叠页边距部分,这将详细介绍页边距的大小和什么时候。

另一个崩溃 margin 案例有点棘手。 请记住,在原始的HTML示例中,容器具有边框。 如果我们把它拿出来。

#container {background: gray;width: 600px;margin: 0px auto;}

。然后上边和下边的边都是 collapse。

Collapsing top and bottom margins.

一个简单的补救方法就是我们首先要做的: background 混合或者使用透明颜色值的小边框。 然而,在复杂的布局中,你可能最终使用虚元素来否定崩溃行为。 仔细阅读CSS建议应该可以帮助你避免这些情况。

负毛利

到目前为止,所有示例都显示了零或者正 margin 值。 使用CSS2规范,负 margin 值是完全合法的CSS。 简单地说,负顶值和左值可以向上和向上拉动元素,而负底值和右值将相邻元素。 将负数和 z-index 结合起来,只需几行代码就可以创建一些非常光滑的布局。

例如这里CSS将我们以前的线性示例转换为重叠框的Collection:

#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;}

以下是它的外观:

Negative margins enable overlapping elements.

利用负边距,包括多列列表,文本投影阴影,有很大的效果。 此类 事件 举不胜举.

到现在你应该对盒子模型有一个很好的处理。 使用CSS定位- 请参见 Fluid multi垂直排序列表using垂直排序列表 usingheight height height height height height height code code。

开心编码!


模式  BOX  Basic  PAD  Padding  Margin  
相关文章