2021年面试题栏 -- CSS部分

最新推荐文章于 2023-05-06 17:28:34 发布

清狂无益

最新推荐文章于 2023-05-06 17:28:34 发布

阅读量872

点赞数 1

分类专栏：面试专栏文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_39166851/article/details/121102229

版权

面试专栏专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1，css和js两种方式实现div右移1000px动画?

2，visibility、display、opacity的区别？

3，单行截断css？

4，flex布局？

5，flex：1？

6，transition、transform、translate的区别？

16，css性能优化的方案，至少说出五个？

17，css选择器有多少种？他们的优先级如何？

18，如何清除浮动的影响？

19，为什么要初始化css样式？

1，css和js两种方式实现div右移1000px动画?

答案：

css方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #box{
        width: 100px;
        height: 100px;
        background-color: brown;
        position: relative;
        animation: mytest 3s linear 1s;
        -webkit-animation: mytest 3s linear 1s;
    }
    @keyframes mytest {
        1%{left: 0px;}
        20%{left: 200px;}
        50%{left: 500px;}
        70%{left: 700px;}
        100%{left: 1000px;}
    }
    @-webkit-keyframes mytest {
        1%{left: 0px;}
        20%{left: 200px;}
        50%{left: 500px;}
        70%{left: 700px;}
        100%{left: 1000px;}
    }
</style>
<body>
    <div id="box"></div>
</body>
</html>

js原生方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
    }
</style>
<body>
    <div id="box"></div>
</body>
</html>
<script>
    var oBox = document.getElementById("box")
    oBox.onclick = function(){
        moveDiv(1000)
    }
    function moveDiv(data){
        clearInterval(mytimer)
        var mytimer = setInterval(function(){
            let speed = 10;
            if(oBox.offsetLeft != data){
                oBox.style.left = oBox.offsetLeft + speed + 'px'
            }else{
                clearInterval(mytimer)
            }
        },50)
    }
</script>

2，visibility、display、opacity的区别？

答案：

visibility：hidden；是控制元素的样式的显示隐藏，它不会消除dom元素，元素依旧存在；

display：none；是控制元素的display属性，让dom元素被清除，元素不存在了；

opacit：0；是控制元素的透明度的样式，0的时候是透明度100%，元素依旧存在。

3，单行截断css？

答案：

.box{
  		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
  	}

4，flex布局？

答案：弹性布局。

5，flex：1？

答案：flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。flex:1；表示flex-grow：1；

表示元素将自动放大填充父元素；

6，transition、transform、translate的区别？

答案：

transform是css3的一个属性，控制元素的变换；

translate是transform的一个属性值，表示进行2D变换；transform:translte(X,Y)；X,Y是控制元素变换的值的大小。

transition 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性。语法 transition：需要变换的属性变换需要的时间控制动画速度变化延期多少时间后开始执行。

7，如何画一条0.5px的边框？

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box1{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }

        #box2{
            width: 300px;
            height: 300px;
            position: relative;
        }
        #box2::after{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            z-index: -1;
            border: 1px solid #000;
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
        }
    </style>
</head>
<body>
    <p>边框为1px</p>
    <div id="box1"></div>

    <p>边框为0.5px</p>
    <div id="box2"></div>
</body>
</html>

8，说一下BFC？

答案： bfc,即块级格式化上下文，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。具有bfc的元素可以看做是隔离了的独立容器，容器里的元素不会布局上影响容器外的元素。

形成条件：浮动元素，除了float：none以外都可以；

绝对定位元素，position:absolute;position:fixed;

display为inline-block、table-cells、flex;

overflow除visible以外的值：hidden、auto、scroll；

常见作用：阻止外边距折叠；

包含浮动元素后解决浮动脱离文本流的问题；

阻止浮动元素覆盖

9，CSS垂直居中的方案？

答案：

使用绝对定位和transform

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #father{
            width: 500px;
            height: 500px;
            background-color: darkseagreen;
            margin: 0 auto;
            position: relative;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
<body>
    <div id="father">
        <div id="child"></div>
    </div>
</body>

绝对定位结合margin:auto;

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* 绝对定位结合margin; */
        #father{
            width: 500px;
            height: 500px;
            background-color: darkseagreen;
            margin: 0 auto;
            position: relative;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
        }
    </style>
<body>
    <div id="father">
        <div id="child"></div>
    </div>
</body>

flex布局

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* flex布局 */
        #father{
            width: 500px;
            height: 500px;
            background-color: darkseagreen;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: black;
        }      
    </style>
<body>
    <div id="father">
        <div id="child"></div>
    </div>
</body>

10，伪元素和伪类的区别？

答案：

从根本上来说：伪元素创建了新元素，伪类没有创建新元素；

从表现上来说：伪元素是（E::before/after等等），伪类是（E:hover/focus等等）；

从使用上来说：一个选择器只能使用一个伪元素，可以使用多个伪类；

11，position的几个属性和含义？

答案：

static：默认值，表示没有定位；

relative：相对定位，表示元素根据自己正常位置进行定位；

absolute：绝对定位，表示元素根据父级元素中第一个具有定位属性的元素进行定位；

fixed：固定定位，表示元素根据浏览器窗口进行定位；

12，说一下盒模型？

答案：所有的HTML元素都可以看做一个盒子。盒模型由四部分构成，由内到外分别是，content，padding，border，margin；盒模型有两种。一个是标准盒模型，另一种是IE盒模型（也叫怪异盒模型），它俩的区别是width指的数据含义，标准指content宽度，怪异指content+padding+border的宽度。

13，响应式布局方案？

答案：响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。

方案：1，媒体查询；2，百分比布局；3，rem布局；4，视口单位（vw/vh）；5，依赖bootstrap框架的栅格系统；

14，响应式布局和自适应布局的区别？

答案：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

15，如何提高动画的渲染性能？

答案：transform:translateZ(0);或者will-change:transform;

16，css性能优化的方案，至少说出五个？

答案：1，图片异步加载；2，尽量使用雪碧图； 3，正确使用选择器；4，js和css文件压缩；

5，背景图采用分割后逐步加载显示；6，图片优先使用png格式；

17，css选择器有多少种？他们的优先级如何？

答案： ID选择器，class选择器，元素选择器，后代选择器，子选择器，伪类选择器，通配符，群组选择器，属性选择器等；

优先级：ID > class > 元素 > 通配符

18，如何清除浮动的影响？

答案：

1，使用::after伪元素

E::after{
    content:" ";
    clear:both;
    display:block;
}

2，在浮动元素后添加一个空元素，添加clear:both;

3，给父元素添加明确的宽高；

4，给父元素添加overflow:hidden;

19，为什么要初始化css样式？

答案：因为每种浏览器的兼容性不同，对于HTML标签的默认展示不同，初始css是排除差异的影响；

清狂无益

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
2021年面试题栏 -- CSS部分

1，css和js两种方式实现div右移1000px动画? 答案：css方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic...
复制链接

扫一扫