实现九宫格

最新推荐文章于 2022-02-28 17:20:14 发布

画一生情入颜容

最新推荐文章于 2022-02-28 17:20:14 发布

阅读量1.2k

点赞数

文章标签： HTML+CSS九宫

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/77986325

版权

这里写图片描述
像这种，实现该九宫格。
外部的大小为120px，120px。边框为蓝色1px。
问题就每个相邻的小格子的边框不会自动重叠，比如这儿是1px，如果每个都设置为1px，那么相邻的格子边框就会出现2px的。
思路：
设置父元素的上方和左方的padding为1px；
即相当于里面的内容普遍就会像右下方偏移1px；
这时设置里面每一个的小格子的margin-top和margin-left都为-1px；但是格子的大小还需要设定，包含边框刚好每个40px；所以使用IE的盒子模型，box-sizing:border-box。
这时的每个格子都会在原始位置上普遍向左上移了一段距离。而且格子间的边框刚好重叠。

    <style type="text/css">
    #content{
        width: 120px;
        height: 120px;
        padding: 1px 0 0 1px;

        box-sizing:border-box;

    }
    .divs{
        width: 40px;
        height: 40px;
        float: left;
        margin-top: -1px;
        margin-left: -1px;
        border:1px solid blue;
        box-sizing:border-box;
    }
    </style>
</head>
<body>
<div id = "content">
    <div class = "divs"></div>
    <div class = "divs"></div>
    <div class = "divs"></div>
    <div class = "divs"></div>
    <div class = "divs"></div>
    <div class = "divs"></div>
    <div class = "divs"></div>
    <div class = "divs"></div>
    <div class = "divs"></div>
</div>

画一生情入颜容

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现九宫格

像这种，实现该九宫格。外部的大小为120px，120px。边框为蓝色1px。问题就每个相邻的小格子的边框不会自动重叠，比如这儿是1px，如果每个都设置为1px，那么相邻的格子边框就会出现2px的。思路：设置父元素的上方和左方的padding为1px；即相当于里面的内容普遍就会像右下方偏移1px；这时设置里面每一个的小格子的margin-top和marg
复制链接

扫一扫