CSS盒模型-4.5display属性-block、inline、inline-block以及大厂经常面试的问题-消除间隙body {font-size: 0px；}

最新推荐文章于 2024-04-09 00:38:49 发布

say hi.

最新推荐文章于 2024-04-09 00:38:49 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108306322

版权

1.神奇的display属性
disply属性用于控制元素如何显示（内联/块级）
(1)当属性值为block时，会将元素以块级元素的方式显示
(2)当属性值为inline时，会将元素以内联元素的方式显示
(3)当属性值为inline-block时，会将元素以内联块级元素的方式显示，会同时具有这两个显示特性【给div设置自身宽高，就可以看出其也具有块级元素的特性了（因为，只有给块级元素设置宽高才有效果。对于给内联元素设置自身宽高是不生效的，没有作用，内联元素的大小，取决于内容的多少即display: inline’, the width, height, margin-top, margin-bottom, （margin左右是有效,上下左右padding 是有效的噢！！）
and float properties have no effect.）】
(4)当属性值为none时，元素将会被隐藏

例如：

.box1{ display:inline;}
.box2{ display:block;}
<div class="box1">我是一个div块级元素，现在被当成内联元素显示了</div>
<span class="box2">我是一个span内联元素，现在被当成块级元素显示了</span>

大厂面试必考的题目：尤其是关于 display属性使用时的一个技巧性问题
两个span元素之间是有空隙的
但是我们不想要这个间隙怎么消除呢？
从造成原理上分析：内联元素，主要是对文字进行一些修饰的，
因为文字和文字之间，肯定是有一些间隙的，不能两个文字都粘在一块，影响美观
所以说，内联元素天生在显示的时候，就有一定的间隙
那么这个间隙怎么来的呢，就是空格回车
我们去掉两个元素之间的回车和空格，间隙就没有了
但是，虽然这种方法能解决间隙问题，但是，一般不符合我们写代码格式化的习惯
我们使用另一个办法解决，设置 body {font-size: 0px;}但是文字消失了,因为,box3,box4会继承body的font-size: 0px;
我们在box3,box4 中重新设置一下就好了.box3 {font-size: 14px;} .box4 {font-size: 14px;}

小例子：：挺重要的，看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>display</title>
    <style>
        /* .box1 {
            background: yellow;
            display: inline;
        } 
        .box2 {
            background: green;
            display: block;
        } */
        .box3 {
            /* display: inline-block; */
            border: 1px solid #000;
            /* 直接键盘打出w200就会自动提示出现了  width: 200px;*/
            width: 200px;
            height: 100px;
            font-size: 14px;
        }
        .box4 {
            /* display: inline-block; */
            /* display: none; */
            border: 1px solid #000;
            width: 200px;
            height: 100px;
            font-size: 14px;
        }

        /* 看到行内元素之间是有一个小间隙的
        因为，两个span元素之间是有空隙的*/
        /* 但是我们不想要这个间隙 怎么消除呢 ？使用 font-size: */
        span {
            background: #dd7370;
            font-size: 14px;
        }
        body {
            font-size: 0px;
            /* 但是文字消失了,因为,box3,box4会继承body的font-size: 0px;
            我们在box3,box4 中重新设置一下就好了 */
        }
    </style>
</head>
<body>
    <!-- <div class="box1">华为云</div>
    <span class="box2">华为云</span> -->
    <div class="box3">华为云1号</div>
    <div class="box4">华为云2号</div>
    <!-- 两个span元素之间是有空隙的
        但是我们不想要这个间隙 怎么消除呢？
        从造成原理上分析：内联元素，主要是对文字进行一些修饰的，
        因为文字和文字之间，肯定是有一些间隙的，不能两个文字都粘在一块，影响美观
        所以说，内联元素天生在显示的时候，就有一定的间隙
        那么这个间隙怎么来的呢，就是空格回车
        我们去掉两个元素之间的回车和空格，间隙就没有了

        但是，虽然这种方法能解决间隙问题，但是，一般不符合我们写代码格式化的习惯
        我们使用另一个办法解决，设置 body {font-size: 0px;}但是文字消失了,因为,box3,box4会继承body的font-size: 0px;
        我们在box3,box4 中重新设置一下就好了.box3 {font-size: 14px;} .box4 {font-size: 14px;}
        -->
    <span>span元素1</span>
    <span>span元素2</span>
</body>
</html>

say hi.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型-4.5display属性-block、inline、inline-block以及大厂经常面试的问题-消除间隙body {font-size: 0px；}

1.神奇的display属性disply属性用于控制元素如何显示（内联/块级）当属性值为block时，会将元素以块级元素的方式显示当属性值为inline时，会将元素以内联元素的方式显示当属性值为inline-block时，会将元素以内联块级元素的方式显示，会同时具有这两个显示特性【给div设置宽高，就可以看出其也具有块级元素的特性了（因为，只有给块级元素设置宽高才有效果。对于给内联元素设置宽高是不生效的，没有作用，内联元素的大小，取决于内容的多少）】当属性值为none时，元素将会被隐藏例如：.
复制链接

扫一扫