css九宫格问题--前端面试

2019年3月24日 267次阅读 来源: 九宫格问题

《css九宫格问题--前端面试》

flex布局实现九宫格，浮悬被选中框变红。
下面介绍下写的过程中软实力的体现

<html>
    <head>
        <meta charset="utf-8">
        <title>九宫格</title>
        /*消除各个浏览器之间的差异,初始化标签样式*/
        <link rel="stylesheet" href="./reset.css">
    </head>
    <body>
    /*语义化的写标签*/
        <ul class="wrap">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <style type="text/css"> .wrap{ display: flex; flex-wrap: wrap; width: 300px; } .wrap li{ width: 100px; height: 100px; line-height: 100px; text-align: center; /*盒子width以border+padding+content计算*/ box-sizing: border-box; border:1px solid #000; /*解决边距重叠问题*/ margin-left: -1px; margin-top: -1px; } /*css高级选择器实现边距上移和左移问题*/ .wrap li:nth-child(3n+1){ margin-left: 0; } .wrap li:nth-child(-n+3){ margin-top: 0; } .wrap li:hover{ /*悬浮被掩盖问题*/ z-index: 10; border:1px solid red; } </style>
    </body>
</html>
    原文作者：九宫格问题
    原文地址: https://blog.csdn.net/dandan_18/article/details/80854156
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞