CSS（十九）——布局

最新推荐文章于 2022-09-30 14:48:51 发布

戒烟失败的老可爱

最新推荐文章于 2022-09-30 14:48:51 发布

阅读量149

点赞数 2

分类专栏： CSS3 文章标签： css html html5 前端

本文链接：https://blog.csdn.net/qq_40749255/article/details/120015342

版权

CSS3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

CSS（十九）——布局

前言

布局在前端页面中很重要，比如页面中的侧边栏，导航栏等在页面中的位置以及相互之间的组合。本篇笔记中没有任何新知识，使用之前学过的只是就可以完成页面布局。

概述

一般来说，页面布局分为：几栏布局，有两栏布局、三栏布局以及更多的布局方式，在此我们统称为多栏布局。

所谓**“几栏布局”**表示的是页面中一共分为几个部分。如下图所示：

在这里插入图片描述

上图中展示出的CSDN的个人中心中有左边栏和内容栏，即两栏布局。

多栏布局

两栏布局

废话不多说，直接上代码！

	    <style>
        /* 解决高度坍塌 */
        .clearfix::after{
            display: block;
            content: "";
            clear: both;
        }
        /* 设定一个总区域 */
        .container{
            background-color: lightblue;
            /* width: 1000px; */
            /* 为了使页面可以随浏览器大小自适应，设置为百分比 */
            width: 90%;
        }
        /* 表示侧边栏 */
        .aside{
            float: left;
            background-color: #008c8c;
            color: #fff;
            /* 侧边栏宽度一般固定，所以直接定宽 */
            width: 300px;
        }
        /* 表示主区域 */
        .main{
            /* 设置为BFC元素可以使常规流避开浮动元素 */
            overflow: hidden;
            
            /* 设置浮动不利于页面自适应 */
            /* float: right; */
            background-color: gray;
            /* 主区域自适应，不设置定宽 */
            /* width: 600px; */
        }
        
    </style>
	<div class="container clearfix">
        <aside class="aside">
            <!-- 表示侧边栏 -->
        </aside>
        <div class="main">
            <!-- 表示主区域 -->
        </div>
    </div>

需要注意的知识点基本在代码的注释中了，笔记最后的总结中会有说明。

三栏布局

三蓝布局的逻辑与两栏布局基本一致。其中在三栏布局中，除需要注意侧边栏基本定宽、其他区域根据实际情况设置浮动或BFC元素以外，还要注意页面之间的间距。话不多说，上代码！

    <style>
        .clearfix::after{
            display: block;
            content: "";
            clear: both;
        }
        .container{
            padding: 30px;
            border: 3px solid;
            /* 主区域设定最小宽度可以保证页面在浏览器窗口带下改变的时候的最小宽度 */
            min-width: 1000px;
        }

        .left{
            float: left;
            width: 300px;
            background-color: lightblue;
            margin-right: 10px;
        }
        .right{
            float: right;
            width: 300px;
            background-color: lightblue;
            margin-left: 10px;
        }
        .main{
            overflow: hidden;
            border: 2px solid;
        }
    </style>
    <div class="container clearfix">
        <div class="left">
        	<!-- 表示左边栏 -->
        </div>
        <div class="right">
        	<!-- 表示右边栏 -->
        </div>
        <div class="main">
        	<!-- 表示主区域 -->
        </div>
    </div>

补充知识点：

在设定各个区域之间的空隙时，设置的是浮动元素的margin：在**CSS（十八）**中有过说明，BFC能避开浮动元素的原因可以理解为BFC设定了与视窗边界之间等同于浮动元素宽度的margin值，如果设定BFC的margin’值则会造成设置失效的现象。
在测试练习的时候，通常用文字来表示区域内容，可能出现不注意设置BFC却依旧可以避开浮动元素。因为，文字本质上属于行盒，就算放在块盒中也会自动出现一个匿名行盒包裹住文字，然后整体避开浮动盒子。
使用浮动和BFC的方式制作多栏布局的时候，BFC元素要写在最后，因为浮动盒子会避开常规流盒子。
如果主区域（BFC）写在最前面，那么最好将主区域的左右marging设置好预留空间（注意不能使用auto），width不设置（可以使主区域适应浏览器宽度）。侧边栏用绝对定位挂起。

等高

一般等高问题出现在侧边栏的内容没有主区域的内容多，导致高度的不一致。所以，一般我们都会处理侧边栏，因为他短。

等高一般都由CSS3或者JS来完成，如果脱离这两者技术来处理等高很麻烦，所以本篇笔记记录的是伪等高。具体方式如下：

将侧边栏的高度设置为超级大（要多大有多大）
将侧边栏的margin-bottom设置为负数（保证侧边栏的盒子实际高度很小）
将侧边栏超出的区域隐藏（设置父元素的overflow：hidden）。

【注】：该伪等高方法仅适用于没有CSS3、JS，且主区域高度超出侧边栏区域，否则会出问题（你们可以自己试着玩）

具体代码如下：

    <style>
        .clearfix::after{
            display: block;
            content: "";
            clear: both;
        }
        .container{
            width: 90%;
            overflow: hidden;
        }
        .aside{
            float: left;
            background-color: #008c8c;
            color: #fff;
            height: 100000px;
            margin-bottom: -99990px;
            width: 300px;
        }
        .main{
            overflow: hidden;
            background-color: gray;
        }
    </style>

	<div class="container clearfix">
        <aside class="aside">
            侧边栏
        </aside>
        <div class="main">
            主区域：内容多一些，生成个1万多字。
        </div>
    </div>

以上方式仅用作理解知识点，这种方式现在不用来解决等高问题。

后台页面的布局

后台布局较为简单，一般类似于网上下载下来前端页面的样式，设置起来其实十分简单，话不多说，上代码。

    <style>
        body{
            margin: 0;
        }
        .app{
            position: fixed;
            width: 100%;
            height: 100%;
            /* background-color: yellow; */
        }
        .app>.header{
            height: 60px;
            width: 100%;
            background-color: lightblue;
            position: absolute;
        }
        h1{
            margin: 0;
        }
        .app>.container{
            width: 100%;
            height: 100%;
            background-color: yellow;
            padding-top: 60px;
            box-sizing: border-box;
        }
        .app>.container>.left{
            float: left;
            width: 300px;
            background-color: gray;
            color: white;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
        .app>.container>.main{
            overflow: hidden;
            height: 100%;
            background-color: white;
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
    </style>

    <div class="app">
        <header class="header">
            <h1>文件智能管理系统</h1>
        </header>
        <div class="container">
            <aside class="left">
                生成1000个字符
            </aside>
            <div class="main">
				生成1000个字符
            </div>
        </div>
    </div>

以上代码在设计后台布局的时候可以按照以下顺序设计：

首先将浏览器默认样式重置。然后设置这个页面的大小，将整个页面设置固定定位，使页面没有整体的滚动条；
接下来设置导航栏，导航栏高度固定，宽度撑满，然后设置绝对定位（下一条解释）；
设置侧边栏和主区域之前先将二者的总体区域设置出来，为了方便，我们同样将下方区域的高度设置为100%（这个样子会造成页面溢出），所以导航栏设置了定位，使常规流盒子忽略定位，页面总体高度不变；最后设置padding-top为导航栏高度；这样就可以使内容不背导航栏遮住。——以上宽高设置都应该设置box-sizing： border-box；
接下来就是设置侧边栏和珠区域，用两栏布局的方式来设置；
注意要想在侧边栏和主区域分别自动显示滚动条而不影响整个页面，直接在各个区域内设置overflow：auto。
自己在侧边栏和主区域加上大量文字来试试滚动条。