提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

吃了吗？来5道css面试题

CSS 试题
2023-02-25 18:16:20 时间

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 */

相关文章