Web入门——三栏布局页面

前置知识

内外边距

内边距(padding)： padding是元素边框与其内容之间的空间。也就是说，如果你给一个元素设置了内边距，这个空间会作为元素内容与元素边框之间的缓冲区域。设置内边距会使元素本身变大。例如padding:10px就创建了10像素的空间，使元素的内容与边框之间有了10像素的距离。
外边距(margin)： margin则是元素与相邻元素之间的空间。与内边距不同，外边距不会使元素本身变大，但会使元素与其周围的其他元素有更大的距离。例如，margin:10px在元素与其旁边元素之间创建了10像素的空间。

在CSS中，你可以控制元素的顶部、底部、左侧和右侧的内外边距。例如：

.example {margin-top: 10px;     /* 设置外边距 */margin-bottom: 20px;  margin-left: 30px;margin-right: 40px;padding-top: 50px;    /* 设置内边距 */padding-bottom: 60px;padding-left: 70px;padding-right: 80px;
}

另外，要注意的一点是，水平方向的margin可以重叠，也就是说，两个垂直相邻元素之间的margin取的是两者之间较大的一个，不是两者的加和。对于垂直方向的padding则没有这个特性。

浮动与定位

浮动(float)：float属性被用来让一个元素沿着其容器的左或右边缘，尽可能地向上浮动。同时，让文本和内联元素环绕它。是为了实现文字环绕图片的效果而诞生的。

我们可以给一个元素设置float:left; 或 float:right;来控制这个元素浮动的方向。要注意，浮动会使元素脱离文档的普通流，所以可能会影响布局。
例如，在父元素中，如果所有的子元素都设为浮动，则父元素的高度就会变为0。可以通过设置父元素的overflow属性或者清除浮动来解决这个问题。

定位(position)：position属性通过与top，bottom，left，right属性配合使用，允许你精确地控制一个元素的位置。其常见的值有以下几种：

static：元素在文档流中的默认位置。
relative：元素的位置相对于其在文档流中的位置。
absolute：元素的位置相对于最近的已定位父元素（一个父元素的position属性不为static），如果元素没有已定位的父元素，那么它的位置相对于最初的包含块。
fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

对于定位元素，通过设置top, right, bottom和left四个属性，可以决定这个元素距离定位参考点的距离。例如，top: 10px;表示元素距离上边界(或者最近的一个定位祖先元素的上边界)10像素远。

z-index层叠等级属性

z-index 是 CSS 属性，用于指定一个元素在三维Z轴上的位置。这对于控制重叠的元素的视觉顺序非常有用。
z-index 只有在元素被赋予了一个不是 static 的位置属性（即，position 的值为 relative、absolute、fixed 或 sticky）时才生效。

数字可以是正、负或零。元素的 z-index 值越高，它就越在其它元素之上。如果两个并列元素的 z-index 值相等，则根据它们在 HTML 中的顺序来决定哪一个在上面；后来的元素会覆盖先前的元素。

比如：

element1 {position: absolute;z-index: 1;  /* 此元素将位于其它元素之下 */
}element2 {position: absolute;z-index: 3;  /* 此元素将位于其他元素之上 */
}

在上述的例子中，element 2 会出现在 element 1 的上方，因为它的 z-index 值更大。

不过，z-index 也有其复杂性，比如在使用嵌套元素时，z-index 只能影响其父级上下文中的层级。在有些情况下，高层级的元素会出现在低层级的项下，这种情况常常出现在有不同层叠上下文的元素交互时。所以在实际使用时需要注意这些细节。

三栏布局页面

因为代码中的.header、.main 和 .bottom 所在的位置都是 .one 的直接子元素，因此它们会默认垂直排布，因此就不需要加入position属性。
在main区域中的三个区域也同理，只需要添加float来确认排列方向就好。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局</title><style>html body {margin: 0;padding: 0;background-color: antiquewhite;}.one {/* 设定总区域大小 */width: 600px;height: 400px;/* 定位 */position: absolute;margin: 20px 25%;background-color: rgba(0,0,0,0.4);}.one>* {margin: 0;padding: 0;}.header {/* 大小 */width: 100%;/* 设定边框和背景颜色，美观 */border: 0px solid #000;background-color: white;/* 文字居中 */text-align: center;line-height: 40px;}/* 编写代码使文字居中 */.main>* {text-align: center;line-height: 320px;}.main {width: 100%;height: 80%;float: left;}.left {height: 100%;width: 15%;background-color: rgba(0,0,0,0.5);float: left;}.middle {height: 100%;width: 70%;float: left;}.right {height: 100%;width: 15%;background-color: rgba(0,0,0,0.5);float: left;}.bottom {/* 添加这一行代码，来消除main区域的浮动影响，不然bottom区域会被挤到下方 */clear: both;width: 100%;height: 10%;background-color: white;/* 文字居中 */text-align: center;line-height: 40px;}</style>
</head>
<body><div class="one"><div class="header"><span>头部区域</span></div><div class="main"><div class="left"><span>左侧边栏</span></div><div class="middle"><span>内容区域</span></div><div class="right"><span>右侧边栏</span></div></div><div class="bottom"><span>底部区域</span></div></div>
</body>
</html>