吃了吗？来5道css面试题

用户4793865

发布于 2023-01-12 14:09:08

3960

发布于 2023-01-12 14:09:08

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

1.居中

问题：让如下div居中

给body加display:flex
给当前div加margin:auto

 .orange {
        width: 400px;
        height: 400px;
        background-color: orange;
        margin:auto;
    }

    body {
        display: flex;
    }
  <body>
    <div class="orange">

    </div>

</body>
复制代码

2.padding和margin有什么不同

你肯定会说一个是外边距一个是内边距。但这谁都知道。

二者的区别在于：作用对象不同，padding是针对自身的，margin是作用于外部对象的。

3.vw和百分比有什么区别

第一种情况，两者都在body中，并且我给body的外边距margin都设置成了0px。很显然二者没有区别

<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin:0px;
    }
      .percentage {
        background-color: blue;
        width: 50%;
        height: 50px;
        color:white;
    }

    .vw {
        background-color: aqua;
        width: 50vw;
        color:white;
        height: 50px;
    }
</style>
<body>
  3.vw和百分比
   <div class="vw">vw</div>
   <div class="percentage">百分比</div>

</body>
复制代码

第二种情况，大部分浏览器的body都会有8px的内边距。我们去掉body的margin:0px属性。明显看到了vw会比百分比宽了那么一小些。

第三种情况，我们在他们外部加一层父元素div，并且给这个div的宽度设置为50%。如下vw依旧不变，而百分比以父元素的宽度重新计算了。

  <div style="width: 50%;">3.vw和百分比
        <div class="vw">vw</div>
        <div class="percentage">百分比</div>
    </div>
复制代码

总而言之，百分比是有继承关系的，而vw只与设备的分辨率有关。

4. 行内元素与块级元素

如下：

块级元素默认占满宽，并且器宽继承自父元素
行内元素我们给它添加宽高也是不管用的。其宽高由自身内容决定。

 <div>
        4.块级元素行内元素
        <div style="background:rgb(110, 210, 228)">块级元素div</div>
        <span style="background-color: aquamarine;">行内元素span</span>
    </div>
复制代码

5.谷歌如何支持小字体

大部分浏览器最小的字体，是12px。

如下，我们使用了transform的scale属性，将字体变小了。但是注意一下，

① 可以看到他缩小的不仅仅是字体而是整个div。

② 如果要想缩小到比12px还小的字体就需要先给他12px。

<style>
  .font_scale_8{
        font-size:12px;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        background-color: aquamarine;
    }
    .font_scale_5{
        font-size:12px;
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        background-color: antiquewhite;
    }
</style>
    <div style="font-size: 12px;">
        这是12px字体
    </div> 
    <div class="font_scale_8">
       这是小字体 0.8倍
    </div>
    <div class="font_scale_5">
        这是小字体 0.5倍
    </div>
    
复制代码

这里顺便说一下 transform，针对不同浏览器的内核不同，有的时候需要把这些属性都写上。

transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-03，如有侵权请联系 cloudcommunity@tencent.com 删除

css

面向对象编程

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

面向对象编程

登录后参与评论

0 条评论

热度