CSS篇之1. CSS 盒子模型，绝对定位和相对定位

最新推荐文章于 2024-06-19 16:48:21 发布

时光默

最新推荐文章于 2024-06-19 16:48:21 发布

阅读量1.2w

点赞数 15

文章标签： css

本文链接：https://blog.csdn.net/zengyonglan/article/details/53301146

版权

前端面试之基础篇[前端你别闹] 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

css篇

1. CSS 盒子模型，绝对定位和相对定位
解答：
(1)css盒子模型：
CSS中，盒子模型也叫框模型，它规定了元素框处理元素内容、内边距、边框和外边距的方式。在HTML文档中，每个元素都有盒子模型。
这里写图片描述

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
这里写图片描述
w3c的图

说明：
　　1.和第一幅图一样，在上图中，元素框的最内部分是实际的内容（element）；直接包围内容的是内边距（padding），内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。
这里写图片描述　　
2.内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器（*）对所有元素进行设置：

/*设置所有元素的外边距和内边矩为0*/
* {
  margin: 0;
  padding: 0;
}

这里写图片描述

在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，以下是CSS代码：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

下图是对代码的解释：
这里写图片描述

补充内边距的知识：
1.不允许使用负值；
2.可以设置百分数值，但这百分数值是相对于其父元素的 width属性计算的（这一点与外边距margin一样）。
3.注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

补充边框的知识：
CSS 规范指出，边框绘制在“元素的背景之上”。
CSS2 指出背景只延伸到内边距，而不是边框。
后来，CSS2.1 指出：元素的背景是内容、内边距和边框区的背景。
这里写图片描述
设置边框的样式border-style，如果没有样式，将根本没有边框。
CSS 的 border-style 属性没有默认值，它定义了包括none在内的dashed、 dotted 和 double等10个非 inherit 样式值。例如，把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

一次定义多个样式：顺序为：上右下左。

p.aside {border-style: solid dotted dashed double;}

定义单边边框样式：

p {border-style: solid solid solid none;}
//等价于下面的：
p {border-style: solid; border-left-style: none;}

这里写图片描述
设置边框宽度border-width:
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值，表示中等粗细）和 thick。

p {border-style: solid; border-width: thick;}

定义单边宽度：可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

没有边框：如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。那么，如果把 border-style 设置为 none 会出现什么情况？

p {border-style: none; border-width: 50px;}

在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了！
因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

忘记声明边框样式是一个常犯的错误。由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果要边框显示，就必须声明一个边框样式。
这里写图片描述
设置边框颜色border-color ：
值可以是命名颜色，也可以是十六进制和 RGB 值：

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：

p {
  border-style: solid;
  border-color: blue red;
  }

说明：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

设置单边颜色：
为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

透明边框：虽然在边框没有样式时，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

这里写代码片
外边距注意的知识点：

百分数是相对于父元素的 width 计算的。下面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

p {margin : 10%;}

如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距（当然，只要你特别作了声明，就会覆盖默认样式）。
IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

这里写图片描述

值复制：
您可以不必重复地键入这对数字

p {margin: 0.5em 1em;}

CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

　　　　 •如果缺少左外边距的值，则使用右外边距的值。
　　　　•如果缺少下外边距的值，则使用上外边距的值。
　　　　 •如果缺少右外边距的值，则使用上外边距的值。

下图提供了更直观的方法来了解这一点：
这里写图片描述

换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。

　　利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：

h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}  /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}   /* 等价于 1px 1px 1px 1px */

这里写图片描述
外边距合并：
外边距合并的规则：

　　外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

　　a.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
这里写图片描述

b.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
这里写图片描述

说明：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

这里写图片描述

(2)绝对定位和相对定位
元素定位

1111元素定位机制

　　1.普通文档流

　　普通文档流将浏览器窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。　　

　　2.定位思想和浮动

　　CSS元素定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。此外，CSS中的浮动允许元素向左或者向右移动。通常情况下，我们使用div+css布局页面，而css布局中最重要的就是float属性。

　　3.一切皆为框
　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。可以使用 display 属性改变生成的框的类型。通过将 display 属性设置为 block，可以让行内元素（比如元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div>
/*文本生是无名框*/
some text
/*p为块框*/
<p>Some more text.</p>
</div>

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
   4.CSS定位机制
　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在
(X)HTML
中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line
Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

2222元素定位

在CSS中，用position属性来定位元素。position属性有4个取值，从而实现 4 种不同类型的定位，这会影响元素框生成的方式。

1.static
　　position属性的默认值，表示CSS文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左到右布局，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。平常我们设计网页时，没有指定 position，也就表示使用 static。

　2.relative
　　relative属性表示CSS相对定位，设置为相对定位的元素框会偏移原来的位置某个距离。通过top、right、bottom和left属性来设置元素位置的偏移量。但是元素仍然保持其未定位前的形状，而且它原本所占的空间仍保留。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。比如，将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方；将left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
　　注意：相对定位实际上被看作普通流定位模型（static）的一部分，因为元素的位置相对于它在普通流中的位置。

/*相对定位*/
#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

这里写图片描述

3.absolute
　　 absolute属性设置CSS绝对定位，设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块（即相对于position属性非static值的最近父级元素进行偏移），如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。普通流中其它元素的布局就像绝对定位的元素不存在一样：

/*绝对定位*/
#box_absolute{
  position: absolute;
  left: 30px;
  top: 20px;
}

这里写图片描述
效果：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS绝对定位</title>
    <style type="text/css">
        .divAbsolute
        {
            width: 200px;
            height: 100px;
            left: 50px;
            top: 100px;
            background-color: blue;
            position: absolute; /*绝对定位,相对于浏览器window窗口偏移*/
        }
        #divAbsolutesub
        {
            width: 100px;
            height: 50px;
            left: 20px;
            top: 20px;
            background-color: yellow;
            position: absolute; /*绝对定位，相对于class="divAbsolute"偏移*/
        }
    </style>
</head>
<body>
    <div class="divAbsolute">
        <div id="divAbsolutesub">
        </div>
    </div>
</body>
</html>

　4.fixed
　　fixed属性表示CSS固定定位，它的模式与 absolute 相同，不过无论怎么拖动滚动条，它始终固定在屏幕的指定位置。在 IE6 中不支持这个属性；在 IE7 中支持这个属性但需要指明 DOCTYPE；Firefox 等浏览器支持这个属性。fixed定位的top、right、bottom、left 属性指相对于视口的。

　　下面是一个fixed定位的例子，模仿了一些网站右下角的广告信息：
　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS fixed定位</title>
    <style type="text/css">
        #divFixed
        {
            width: 300px;
            height: 200px;
            font-size: 16px;
            color: White;
            font-weight: bold;
            background: red;
            position: fixed; /* top: 0px;
            left: 0px;
            */
            right: 0;
            bottom: 0;
        }
        /*设置内容高度使页面出现滚动条*/
        #content
        {
            height: 2000px;
            background-color:Green;
        }
    </style>
</head>
<body>
    <div id="content">
    </div>
    <div id="divFixed">
        你好，恭喜你获得腾讯QQVIP会员大礼包，赶快领取吧！
    </div>
</body>
</html>

5.z-index
　　除了上述四个position取值，还有一个比较重要的属性—z-index。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。通过top和left属性定位元素的x轴和y轴，z-index属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

　　注意：元素可拥有负的 z-index 属性值；Z-index 仅能在绝对定位元素上奏效（position:absolute;）。

　　下面是一个z-index属性应用的示例：
　　z-index:2:
这里写图片描述
z-index:-1:

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:2
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" /> 
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>

时光默

关注

15
点赞
踩
61

收藏

觉得还不错? 一键收藏
3
评论
CSS篇之1. CSS 盒子模型，绝对定位和相对定位

1. CSS 盒子模型，绝对定位和相对定位解答： (1)css盒子模型： CSS中，盒子模型也叫框模型，它规定了元素框处理元素内容、内边距、边框和外边距的方式。在HTML文档中，每个元素都有盒子模型。内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。说明：　　1.和第一幅图一样，在上图
复制链接

扫一扫

专栏目录