css 布局

最新推荐文章于 2024-08-26 08:04:31 发布

^果然好^

最新推荐文章于 2024-08-26 08:04:31 发布

阅读量121

点赞数

分类专栏： # div+css+js

本文链接：https://blog.csdn.net/allensandy/article/details/90298224

版权

div+css+js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

看到一个效果图的时候，千万不要急着手贱去敲代码！先思考清楚页面的构造，理清各元素之间的关系，特别需要注意的是在不同的设备下需要有怎样的展现，当你思路清晰找到最好的布局方案时，coding其实真的不需要多少时间。

1、table 布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .table{
            display: table
        }
        .container {
            height: 200px;
            width: 200px;
        }
        .left{
            background-color: aqua;
            display: table-cell;
        }
        .right{
            background-color:burlywood;
        }
    </style>
</head>

<body>
    <table class="container">
        <tbody>
            <tr>
                <td class="left">左</td>
                <td class="right">右</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式。

但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)，但是某些情况下，当采用其他方式不能很好的达到自己的效果时，采用 table 布局能适应当前场景。

2、flex 布局

盒模型

在介绍 flex 布局之前，我们先了解一下盒模型的概念，这个是 css 最基础的概念，首先，我们引用一张图来解释

首先最中间的是 content 区域，即我们常说的内容区。我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域，这部分指的是内容区到边框的区域，即我们常说的内边距。然后就是 border 区，border 区本身也是占据空间的。边框外面是 margin 区，这部分指的是当前元素与其他元素的距离，即常说的外边距。

首先要明白我们平常说的宽度和高度指的是内容区的宽度和高度。

然后计算一个盒子占用的空间是 content + padding + border + margin

display / poistion

这里还要介绍两个属性，display 和 poistion

display 有如下几个值

block（元素表现为块级元素，有固定宽高，独占一行）
inline（元素表现为行内元素，不能设置宽高）
inline-block （对外表现为行内元素，对内表现为块级元素）3

position 有如下几个值

static（默认情况，存在文档流当中）
relative（根据元素本身原来所应该处的位置偏移，不会改变布局的计算）
absolute（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的 relative 或者 absolute 定位元素）
fixed（绝对定位，脱离文档流，相对于的是屏幕，就是那些浮动的广告那样，怎么拉都固定在同一个位置，而 absolute 元素离开屏幕就看不见了）

position 的层叠是按顺序层叠的，不过可以通过设置 z-index 来改变层叠顺序，只有 relative，absolute，fixed 可以设置 z-index。

2.1、flexbox 布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            height: 200px;
            width: 400px;
            display: flex;
        }
        .left {
            background-color: aqua;
            flex: 1;
        }
        .middle {
            background-color: chartreuse;
            flex: 1;
        }
        .right {
            background-color:burlywood;
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

有时我们可能需要两边定宽，中间自适应，那么可以这样写

        .left {
            background-color: aqua;
            /* flex: 1;*/
            width: 20px;
        }
        .middle {
            background-color: chartreuse;
            flex: 1;
        }
        .right {
            background-color:burlywood;
           /* flex: 1;*/
           width: 20px;
        }

如果想深入了解可以看阮一峰老师的文章

但是 flexbox 布局方式浏览器的支持不是太好，有一些兼容性的问题，但是是未来布局的趋势。

3、float 布局

浮动布局还包括圣杯布局，双飞翼布局等

3.1、二栏布局

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>二栏布局</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .container{
            height: 300px;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
            background-color: aquamarine;
        }
        .main{
            width: 100%;
            height: 100%;
            background-color: bisque;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="left">123</div>
        <div class="main">456</div>
    </div>
</body>
 
</html>

但是注意：下图为什么main的div撑满宽度，但是456却没有显示再最左边呢？这是因为float影响的是行内元素，而不影响块元素。什么

3.2、三栏布局

讲完两栏布局再讲一下三栏布局，思路主要是左边一个浮动元素，右边一个浮动元素。这里有个小问题，中间的元素要写在最后，因为中间元素假设有块级元素的话，会影响右边浮动元素的定位。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container div {
            min-height: 200px;
        }

        .container .left {
            float: left;
            width: 300px;
            background: red;
        }

        .container .right {
            float: right;
            width: 300px;
            background: blue;
        }

        .container .center {
            background: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

因为浮动元素会把块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以正确的写法应该是

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>

3.2、上中下布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上中下</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .divBox {
            background: yellow;
            width: 100%;
        }

        .top {
            background:aquamarine;
            width: 100%;
            height: 100px;
            position: absolute;
            top: 0;
        }

        .center {
            width: 100%;
            background: grey;
            position: absolute;
            top: 100px;
            bottom: 100px;
        }

        .bottom {
            width: 100%;
            background:chartreuse;
            height: 100px;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
   <div class="divBox">
       <div class="top"></div>
       <div class="center"></div>
       <div class="bottom"></div>
   </div>
</body>

</html>

5、inline-block实现三栏布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }

        .center {
            clear: both;
            background: bisque;
            /* height: calc("100% - 60px"); */
            height: 100%;
            width: 100%;
            display: inline-block;
        }

        .left {
            width: 33.3%;
            height: 100%;
            float: left;
            background-color: aqua;
        }

        .middle {
            width: 33.3%;
            float: left;
            height: 100%;
            background-color: chartreuse;
        }

        .right {
            width: 33.3%;
            height: 100%;
            float: left;
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <div class="center">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>

</body>

</html>

效果：