谁偷了我的像素? —— CSS边框与悬浮

最新推荐文章于 2023-03-24 18:29:00 发布

子狼

最新推荐文章于 2023-03-24 18:29:00 发布

阅读量299

点赞数 1

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_36624456/article/details/99655285

版权

前端学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

题目

今日学习的是CSS的盒子模型与悬浮, 老师给我们布置了一个作业↓↓↓
在这里插入图片描述
是的,看起来一个很简单的小作业, 调整大小然后全部float:left不就行了?
于是我做了以下的布局:

具体分块如下

<div id="frame0">
    <div id="block1">1</div>
    <div id="frame1">
        <div id="frame2">
            <div id="block4">4</div>
            <div id="frame3">
                <div id="frame4">
                    <div id="block6">6</div>
                    <div id="frame5">
                        <div id="block8">8</div>
                        <div id="block7">7</div>
                    </div>
                </div>
                <div id="block5">5</div>
            </div>
        </div>
        <div id="block3">3</div>
    </div>
    <div id="block2">2</div>
</div>

block1到block8的大小严格按照我的布局来设定(单位为px),以及margin为10px, frame1-5的内外边距均设置为0, 这样严格的数值导致只有一个像素格溢出,布局就会失败,事实上我确实因为很多原因导致失败.
最后成功的样式如下:
在这里插入图片描述
在这期间,最有价值的一个问题就是: 不同div块的margin从哪里开始?是上一个block还是div?
经过测试后我的答案是: 从同级元素的边框开始

margin的起始位置

我们从block3的margin起始位置分析
这是frame1的划分(黑色背景)与frame2的划分(紫色框)
在这里插入图片描述
注意:边框是占像素的,如果设计的时候没有考虑边框,写代码的时候用border来测试就会布局错乱
block3如果没有设置margin,那么left是从同级元素(frame2)的右边界开始,top是从父元素(frame1)开始,至于block5是否溢出与block3的位置没有关系,由于设置了margin,所有从原本位置移动所设置的margin长度来到现在的位置.

另外分析一下block7的起始位置
在这里插入图片描述
紫色边框是frame5的占位, block8的margin是10px, 从图可以看出,block7的起始位置是top为父级元素的top,left为同级元素block8的右边界margin之后的位置.

边框占位

边框占位是一个很容易想到的问题,所以我在网上查到了不占位边框的写法(弄边框是为了测试,而且主要是frame的测试, 不是显示,所以用改变block大小来解决边框问题是不行的)

box-sizing: border-box;
border: 1px solid red;
/*
border-box	
为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
*/

事实证明block里面加上这两句并不会导致布局错乱,但是frame里面用这两句依然会出现位置不够的情况,为什么呢?
我们来放大像素为2 的 border-box元素
在这里插入图片描述
绿色为frame1的边框, 红色为block4的边框

可以看出,即使frame1, block4设置的是boder-box, 也就是占用的是本身的大小,但是现在block4的起始位置frame1.margin+2px+block.margin和我们一开始想要的起始位置相比大了两个像素,所以导致占位.

结束

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #block1, #block2, #block3, #block4, #block5, #block6, #block7, #block8{
            margin: 10px;
            background-color: #2fa0ec;
            /*box-sizing: border-box;*/
            /*border: 2px solid red;*/
            display: inline-block;
        }
        #frame0, #frame1, #frame2, #frame3, #frame4, #frame5{
            background-color: #dbdbdb;
            display: inline-block;
        }
        #block1{
            height: 100px;
            width: 560px;
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 20px;
            float: left;
        }
        #block2{
            height: 100px;
            width: 560px;
            margin-left: 20px;
            margin-right: 20px;
        }
        #block3{
            height: 340px;
            width: 100px;
            float: left;
            margin-right: 20px;
        }
        #block4{
            float: left;
            height: 100px;
            width: 440px;
        }
        #block5{
            float: left;
            height: 220px;
            width: 100px;
        }
        #block6{
            float: left;
            height: 100px;
            width: 320px;
        }
        #block7{
            float: left;
            height: 100px;
            width: 200px;
        }
        #block8{
            float: left;
            height: 100px;
            width: 100px;
        }


        #frame0{
            height: 620px;
            width: 600px;
        }
        #frame1{
            /*box-sizing: border-box;*/
            /*border: 2px solid green;*/
            height: 360px;
            width: 590px;
            float: left;
            margin-left: 10px;
        }
        #frame2{
            height: 360px;
            width: 460px;
            float: left;
        }
        #frame3{
            height: 240px;
            width: 460px;
            float: left;
        }
        #frame4{
            height: 240px;
            width: 340px;
            float: left;
        }
        #frame5{
            height: 120px;
            width: 340px;
            float: left;
        }
        /*li{*/
        /*    float: right;*/
        /*    list-style: none;*/
        /*}*/
    </style>
</head>
<body>
<div id="frame0">
    <div id="block1">1</div>
    <div id="frame1">
        <div id="frame2">
            <div id="block4">4</div>
            <div id="frame3">
                <div id="frame4">
                    <div id="block6">6</div>
                    <div id="frame5">
                        <div id="block8">8</div>
                        <div id="block7">7</div>
                    </div>
                </div>
                <div id="block5">5</div>
            </div>
        </div>
        <div id="block3">3</div>
    </div>
    <div id="block2">2</div>
</div>
</body>
</html>

子狼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
谁偷了我的像素? —— CSS边框与悬浮

题目今日学习的是CSS的盒子模型与悬浮, 老师给我们布置了一个作业↓↓↓是的,看起来一个很简单的小作业, 调整大小然后全部float:left不就行了?于是我做了以下的布局:具体分块如下<div id="frame0"> <div id="block1">1</div> <div id="frame1"> ...
复制链接

扫一扫