CSS实现九宫格布局方法

在实际开发中经常会遇到九宫格布局,所以总结几种利用CSS实现九宫格布局的方法,仅供参考...

目录:

  1. 利用grid创建网络布局

  2. 利用display:table

  3. 利用absolute方位值

  4. 利用float

  5. 利用flex弹性布局

方法一:利用grid创建网络布局

网络布局(grid)是最强大的CSS布局方案。

它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。

参考文档:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

CSS

    /*指定一个三行三列的网格,列宽和行高都是100px*/
.wrapper {
            display: grid;
            grid-template-columns: 100px 100px 100px; /*定义每一列的列宽*/
            grid-template-rows: 100px 100px 100px;/*定义每一行的行高*/
        }
        .list {
            background: #eee;
        }
        .list:nth-child(odd) {
            background: #999;
        }

HTML

  
1
2
3
4
5
6
7
8
9

方法二:利用display:table

原理:

 1. 三行li,每个li里三列div(模拟表格的结构)

2. 父元素ul使用display: table(此元素会作为块级表格来显示(类似 

),表格前后带有换行符。)

3. li元素使用display: table-row(此元素会作为一个表格行显示(类似 

)。)

 4. li元素内部三个子元素使用display: table-cell(此元素会作为一个表格单元格显示(类似 

 和 ))

CSS

 .table {
            display: table;
        }

        .table li {
            display: table-row;
            background: #beffee;
        }

        .table li:nth-child(odd) {
            background: #bec3ff;
        }

        .table li div {
            width: 200px;
            line-height: 200px;
            display: table-cell;
            text-align: center;
        }

        .table li:nth-child(odd) div:nth-child(even) {
            background: #beffee;
        }

        .table li:nth-child(even) div:nth-child(even) {
            background: #bec3ff;
        }

HTML

 
  • 1
    2
    3
  • 4
    5
    6
  • 7
    8
    9

方法三:利用absolute方位值

原理:absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。高度百分比实现自适应。

            关键点:

             1.page最外层的父元素使用absolute负责占位,给子元素们把空间拉开。或者用宽高也行

             2.每一个块的父元素list利用浮动和33.33%的宽度百分比实现横向自适应排列

CSS

    

HTML

       .page {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

        .list {
            float: left;
            height: 33.3%;
            width: 33.3%;
            position: relative;
        }

方法四:利用float实现

 .float::after {
            content: "";
            display: block;
            clear: both;
            visibility: hidden;
        }

        .float>li {
            float: left;
            background-color: #42a59f;
            text-align: center;
            color: #fff;
            font-size: 50px;
            line-height: 2;
        }

        .float>li:nth-of-type(3n) {
            margin-right: 0;
        }

        .float>li:nth-of-type(n+7) {
            margin-bottom: 0;
        }

HTML

    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

方法五:利用flex弹性布局

flex布局是目前用的比较多的一种方法,可以详细学习下

flex参考文档:https://www.runoob.com/w3cnote/flex-grammar.html

     .flexDiv {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            /*换行*/
        }

        .flex {
            width: calc(calc(100% / 3) - 10px);
            margin: 5px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid #000;
        }

        .flex:nth-of-type(odd) {
            background: red;
        }

HTML

   

本文只是将9宫格布局的几种方法总结了一下,并未对原理进行详细说明,在这里只是做个记录,欢迎各位批评指正。

参考文档:

https://www.cnblogs.com/sunshq/p/10118425.html

https://www.cnblogs.com/padding1015/p/9566443.html

 

 

 

 

 

你可能感兴趣的:(CSS,css,html5)