上一篇文章中,我们以一个导演的视角介绍了HTML与CSS样式,但光学会那两项还远远不够,这节课我们继续来聊一聊页面的布局。
盒子模型
所有HTML元素可以看作一个盒子。我们回到上节课的界面,我们发现,大写字母是一个盒子,小写字母也是一个盒子,整个页面都是一个盒子。
那么每个盒子的细节是什么样的呢?
这就是我们的整个盒模型- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
重要: 当我们指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。 像下面这个盒子我们设置他的属性宽度为300px。但是最后他的占位为450px。
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
页面布局
元素类型
已经知道了元素在页面中是一个个小盒子,那么我们现在要做的就是把他安排到规定的位置上,我们先来了解一下两种基本的标签类型
1.块级元素
块级元素在页面中每个元素占据一整行或者多个整行,可以对其设置宽度、高度、对齐等属性。
常见:元素有 <h1>~<h6>、<p>、<div>、 <ul>、<ol>、<li>等
其中
2.行内元素
行内元素通常会和其前后的其他行内元素显示在同一行中,不占独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、 <a>、<span>等, 其中<span>
标记是最典型的行内元素。
类型转换
使用display属性对元素的类型进行转换。 display属性常用的属性值及含义:
- inline:此元素将显示为行内元素(行内元素默认的display属性值)。
- block:此元素将显示为块元素(块元素默认的display属性值)。
- inline- block: 此元素将显示为行内块元素,可以对其设置宽度、高度和对齐等属性,但是该元素不会独占一行。
- none:此元素将被隐藏,不显示,也不占用页面空间,相当于该元素不存在。
这样子元素就占据了行和列,就能够让元素出现在想要的位置了。
文档流
- 顺序性:文档流遵循HTML元素在标记中出现的顺序。这意味着,如果在HTML代码中先写了一个
<div>
元素,然后写了另一个<div>
元素,那么在页面上,第一个<div>
会先显示,第二个<div>
会在它后面显示。 - 流式布局:文档流是一种流式布局,这意味着内容会从左到右、从上到下填充页面,就像水流过一样。如果一行内容排不下,它会自动换行到下一行。
- 默认布局:文档流是浏览器对HTML文档的默认解释方式。除非通过CSS或其他方式明确改变,否则元素会按照文档流的规则进行布局。
- 文档结构:文档流反映了HTML文档的结构。块级元素(如
<div>
、<p>
、<h1>
等)会占据整行空间,而行内元素(如<span>
、<a>
、<img>
等)会在一行内排列。
内容驱动:文档流的布局是由文档的内容和结构驱动的。元素的位置和尺寸是根据其在文档中的位置、内容和CSS样式决定的。 “文档流”这个术语形象地描述了HTML元素在页面上的默认布局方式,它就像水流过一样,从左到右、从上到下填充页面,反映了文档的结构和内容。 简单来说,就是元素原来规定所在的位置。
定位
1.相对定位 position: relative
相对定位是普通文档流的一部分,相对于本元素在文档流原来出现位置的左上角进行定位,可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置,但该元素仍占据原来未移动时的位置,该元素移动后会导致其覆盖其他的框元素。
简单来说,就是元素移动是按照自己的左上角坐标移动。并且其他元素在此元素移动后不会改变自己位置。
可以看到元素还在文档流中
绝对定位 position:absolute
绝对定位是脱离文档流的,不占据其原来未移动时的位置,是相对于父级元素或更高的祖先元素中有relative (相对)定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时,就默认相对于body进行定位。
可以看到元素之间不会相互影响。
简单来说,就是元素移动是按照自己的父元素左上角坐标移动。并且其他元素在此元素移动后会占据此元素位置。相当于此元素不存在了
固定定位 position:fixed
固定定位是绝对定位的一种特殊形式, 是以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后,该元索将脱离标准文档流的控制,始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。
定位元索的层叠次序 z-index:(number)
多个块元素形成多个层。可以使用z-index属性对这些层进行层叠设置。 z-index属性设置一个定位元素沿z轴的位置, z轴定义为垂直延伸到显示区的轴。如果为数,则离用户更近,为负数则表示离用户更远。即拥有z-index属性值大的元素放置顺序在上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box1 {
position: absolute;
z-index: 1;
background-color: lightblue;
width: 100px;
height: 100px;
margin: 20px;
}
.box2 {
position: absolute;
z-index: 2;
background-color: lightgreen;
width: 100px;
height: 100px;
margin: 20px;
left: 20px;
}
.box3 {
position: absolute;
z-index: 3;
background-color: lightcoral;
width: 100px;
height: 100px;
margin: 20px;
left: 40px;
}
</style>
<title>z-index Example</title>
</head>
<body>
<div class="box1">Box 1 (z-index: 2)</div>
<div class="box2">Box 2 (z-index: 1)</div>
<div class="box3">Box 3 (z-index: 3)</div>
</body>
</html>
值得注意的是,z-index
会受到 层叠上下文(stacking context)的影响。如果父元素的 z-index
被设置为某个值,或者元素本身具有某些 CSS 属性(如 opacity
小于 1、transform
等),那么该元素和它的子元素就会创建一个新的层叠上下文。新的层叠上下文会限制该元素和子元素的 z-index
层叠作用域,影响它们的堆叠顺序。