Web入门——三栏布局页面

最新推荐文章于 2024-05-21 23:21:19 发布

阿常11

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量835

点赞数 28

分类专栏： web 文章标签：前端

本文链接：https://blog.csdn.net/weixin_72939806/article/details/138748550

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前置知识

内外边距

内边距(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>