css3技巧实现九宫格布局

最新推荐文章于 2024-05-24 15:22:37 发布

tooyangtoosimple_

最新推荐文章于 2024-05-24 15:22:37 发布

阅读量5.9k

点赞数

分类专栏：前端文章标签： css3 布局

本文链接：https://blog.csdn.net/tooyangtoosimple_/article/details/53559975

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
             <head>
                         <meta charset="utf-8">
                         <title>九宫格布局</title>
                         <meta http-equiv="X-UA-Compatible" content="IE=edge">
                         <style type="text/css">
                         /*:after & :before的应用

                         区别：
                         伪类：伪类用于向某些选择器添加特殊的效果。
                         伪元素：伪元素用于将特殊的效果添加到某些选择器

                         定义：
                         :before   选择器在被选元素的内容前面插入内容。
                         :after     选择器在被选元素的内容后面插入内容。

                         用法：
                         1、 a:after { content: "string"; } 添加字符串
                         2、 a:after { content:"(" attr(href) ")"; } 添加获取的属性
                         3、
                         4、 .clearfix:after{    清浮动
                                       content:".";
                                       display:block;
                                       height:0;
                                       clear:both;
                                       visibility:hidden;

                                 }
                          ---------------------------------------------------------------
                          css浮动的理解：

                          1、为什么要清理浮动？
                          父元素的高度是由子元素撑开的，且子元素设置了浮动，父元素没有设置浮动，子元素脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置border或者background都得不到正确的解析。

                          2、什么时候清理浮动？
                                有设置浮动的情况下最好设置浮动

                          3、清除浮动的主要方法？
                                 3.1、<div style=”clear:both”></div>

                                 3.2、.clearfix:after {              //对父元素，推荐使用
                                                content: “.”;
                                                clear: both;
                                                height: 0;
                                                visibility: hidden;
                                                display: block;
                                           }
                                           注： 1) display:block 使生成的元素以块级元素显示,占满剩余空间;
                                    　　        2) height:0 避免生成内容破坏原有布局的高度。
                                    　　        3) visibility:hidden 使生成的内容不可用，并允许可能被生成内容的内
                                                   容可以进行点击和交互
                                    　　        4）通过 content:"."生成内容作为最后一个元素

                                 3.3、父级div定义 overflow: hidden;   //不推荐使用

                                 3.4、对父级元素设置合适的高度；
                                        注：要求能够详细计算出实际高度，否则容易布局混乱，不推荐使用。

                                 3.5、对父级元素设置浮动；
                                 注：与父元素相邻的元素的布局会受到影响，如果全部浮动的话，太麻烦也不利于后期维护，不推荐使用。

                         应该是说行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块框（即变成块元素），所以就可以设置宽高了。
                        */
                          body{margin:100px;padding:100px;}

                          /*外层div*/
                          .grid_wrapper{
                                      width: 170px;
                                      height: 170px;
                                      margin-left: auto;
                                      margin-right: auto;
                          }

                          /*里层div*/
                          .grid{
                                      margin-left: 5px;
                                      margin-top: 5px;
                          }
                          .grid:after{ /*对里层父元素清除浮动*/
                                      content: ".";
                                      display: block;
                                      line-height: 0;
                                      height: 0; /*设置高为0，让其宽高全里面的内容撑起*/
                                      clear: both;
                                      visibility: hidden;
                                      overflow: hidden;
                          }

                          /*内部a标签*/
                          .grid a,.grid a:visited{
                                      float: left; /*行内元素设置浮动或绝对定位就可以设置行高了*/
                                      display: inline;
                                      border: 5px solid #ccc;
                                      width: 50px;
                                      height: 50px;
                                      text-align: center;
                                      line-height: 50px;
                                      margin-left: -5px;
                                      margin-top: -5px;
                                      position: relative;
                                      z-index: 1;
                          }
                          .grid a{
                                      text-decoration: none;
                          }
                          .grid a:hover{
                                       border-color: #f00;
                                       z-index: 2;
                                       text-decoration: none;
                          }
                          </style>
             </head>
             <body>
                          <div class="grid_wrapper">
                                       <div class="grid">
                                                    <a href="#" title="1">1</a>
                                                    <a href="#" title="2">2</a>
                                                    <a href="#" title="3">3</a>
                                                    <a href="#" title="4">4</a>
                                                    <a href="#" title="5">5</a>
                                                    <a href="#" title="6">6</a>
                                                    <a href="#" title="7">7</a>
                                                    <a href="#" title="8">8</a>
                                                    <a href="#" title="9">9</a>
                                       </div>
                          </div>
             </body>

</html>