css常见面试题

398 阅读2分钟

CSS作为HTML页面结构的样式补充语言,在Web页面的布局和样式中起了重要作用。在前端面试中也是必不可少的一个考察点。本篇文章针对初级前端工程师总结了前端面试中常见的css面试题,帮助大家对页面布局、CSS中常见的计量单位、常用属性有一个相对全面的了解。

一、两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            background-color: red;
            height: 40px;
        }

        .left {
            float: left;
            width: 200px;
            background-color: blueviolet;
        }

        .right {
            float: left;
            width: calc(100% - 200px);
            background-color: blue;
        }


        .container1 {
            width: 100%;
            background-color: red;
            height: 40px;
        }

        .left1 {
            float: left;
            width: 200px;
            background-color: blueviolet;
        }

        .right1 {
            margin-left: 200px;
            background-color: blue;
        }

        .container2 {
            width: 100%;
            background-color: red;
            height: 40px;
        }

        .left2 {
            position: absolute;
            width: 200px;
            background-color: blueviolet;
        }

        .right2 {
            margin-left: 200px;
            background-color: blue;
        }

        .container3 {
            display: flex;
            height: 40px;
            background-color: red;
        }

        .left3 {
            width: 200px;
            background-color: blueviolet;
        }

        .right3 {
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 双float 缺点:父元素需要清除浮动 -->
    <div class="container">
        <div class="left">
            <span>我在左边</span>
        </div>
        <div class="right">
            <span>我在右边</span>
        </div>
    </div>
    <hr />
    <!-- float + margin-left 缺点: 需要清除浮动 -->
    <div class="container1">
        <div class="left1">左边</div>
        <div class="right1">右边</div>
    </div>
    <hr>
    <!-- position+margin-left -->
    <div class="container2">
        <div class="left2">左边</div>
        <div class="right2">右边</div>
    </div>

    <hr>
    <div class="container3">
        <div class="left3">左边</div>
        <div class="right3">右边</div>
    </div>
</body>
</html>

总结:

  • 1.双float
  • 2.单float+margin-left
  • 3.position+margin-left
  • 4.flex

二、画等边三角形、直角三角形、等腰三角形、扇形、圆、半圆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tri1 {
            width: 0;
            height: 0;
            border-bottom: 50px solid blue;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
        }

        .tri2 {
            width: 0;
            height: 0;
            border-bottom: 50px solid blue;
            border-right: 50px solid transparent;
        }

        .tri3 {
            width: 0;
            height: 0;
            border-bottom: 43px solid blue;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
        }

        .shanxing {
            width: 0;
            height: 0;
            border-bottom: 50px solid blue;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-radius: 50%;
        }

        .yuan {
            width: 50px;
            height: 50px;
            background-color: blue;
            border-radius: 25px;
        }

        .banyuan {
            width: 100px;
            height: 50px;
            background-color: blue;
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
        }
    </style>
    <div class="tri1"></div>
    <hr />
    <div class="tri2"></div>
    <hr />
    <div class="tri3"></div>
    <hr />
    <div class="shanxing"></div>
    <hr />
    <div class="yuan"></div>
    <hr />
    <div class="banyuan"></div>
    </body>
</html>

三、em单位相对谁

对于如下两种情况,em 分别是相对谁的

font-size: 2em;
width: 2em;

对于font-size属性,em是相对于父元素的,根元素是有一个初始值大小为 16px; 对于font-size之外的属性,em就是相对当前元素的font-size

四、position: absolute相对谁定位

如果祖先元素有设置 position: static 以外的属性值,则相对该祖先元素定位,否则相对视口定位。

五、position: relative偏移,会影响后面元素的定位吗

相对元素原来的位置进行偏移,脱离文档流,但在文档流中保留原位置的空间(预留空间),

也就是说,元素原来位置会一直保留空白占位,相邻兄弟元素会保持原来的位置,不会随元素的移动而改变

六、flex常用属性

之前整理一篇flex的文章,关于flex的简介和相关属性、参数设置可以参见:

flex: 0 1 auto是什么意思

参考链接

CSS两栏布局方式

em单位相对谁

CSS中的position属性