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

css九宫格问题--前端面试_第1张图片

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

<html>
    <head>
        <meta charset="utf-8">
        <title>九宫格title>
        /*消除各个浏览器之间的差异,初始化标签样式*/
        <link rel="stylesheet" href="./reset.css">
    head>
    <body>
    /*语义化的写标签*/
        <ul class="wrap">
            <li>1li>
            <li>2li>
            <li>3li>
            <li>4li>
            <li>5li>
            <li>6li>
            <li>7li>
            <li>8li>
            <li>9li>
        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>

你可能感兴趣的:(前端)