前端面试题及答案（视图篇）

最新推荐文章于 2024-06-15 03:51:35 发布

YuFun_0923

最新推荐文章于 2024-06-15 03:51:35 发布

阅读量280

点赞数 1

分类专栏：面试笔试

本文链接：https://blog.csdn.net/YuFun_0923/article/details/94463515

版权

面试笔试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. CSS 盒子模型，绝对定位和相对定位

盒子模型包含元素内容、内边距、边框和外边距 。

w3cçå¾

2.清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

(1)使用after元素（推荐使用）

.clearfix:after{
    content:"";/*设置内容为空*/
    height:0;/*高度为0*/
    line-height:0;/*行高为0*/
    display:block;/*将文本转为块级元素*/
    visibility:hidden;/*将元素隐藏*/
    clear:both;/*清除浮动*/
}
.clearfix{
    zoom:1;/*为了兼容IE*/
}
<body>
<div class="box clearfix">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>
</body>

（2）使用clear:both（好用，但是会多一个div，也是常用的一种）

.clear{clear: both;}
<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
    <div class="clear"></div>
</div>

（3）父级div定义overflow:hidden（不能定义height、不能和position搭配，不推荐使用）

（4）父级div定义overflow:auto（可能出现滚动条，高度不能保证的最好不用）

（5）将父级变为表格——display:table（不推荐使用，表格一大堆兼容问题，没必要，只要知道有这种方法就行）

3.水平居中的方法

（1）使用绝对定位和transform结合

 .center {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%); 
    }

（2）flex布局（做PC端不建议使用，如果是手机端基本可以放心大胆使用）

.parent{
　justify-content:center;
　align-items:center;
　display: -webkit-flex;
}

（3）display:table-cell（将其转换为表格，有很简单的写法，但是兼容性问题会比较严重，不建议使用，只做了解）

    display: table-cell;
    vertical-align: middle;
    text-align: center;

（4）利用定位与margin: auto（如果是确定的长宽才可以用，实际使用中问题会比较严重，需要谨慎使用，个人觉得是最简单的绝对定位法）

　 <div class="parent">
　　　　<div class="child">111</div>
　　</div>
       .parent{
               width: 600px;
               height: 400px;
               background: red;
               position: relative;
          }
          .child{
               width: 200px;
               height: 200px;
               position: absolute;
               top: 0;
               left: 0;
               bottom: 0;
               right: 0;
               margin: auto;
               background:blue;
          }

4.样式的层级关系、选择器优先级、样式冲突

!important>内联样式>id选择器>class（类）选择器>标签选择器>*

选择器相同时后面的会覆盖前面的属性。

如果对SEO不用太多要求，强烈建议初始化*{margin:0;padding:0}（写在公共样式里）

5.CSS3常用动画

（1）animation 动画：

使用场景：animation: iconA 4.8s linear infinite both;（这个是旋转图片，常用在页面加载中的图片）

（2）transition 过渡：

使用场景（常用在加载的动画）：

<style> 
div{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover{
width:200px;
}
</style>

<div></div>

（3）transform 改变大小位置：

6.px、em和rem的区别

px为绝对单位，兼容性好，在兼容低版本浏览器很好用。

em为相对单位，兼容性稍差，在开发手机端和兼容高版本浏览器可选择。em并不是固定的大小，他是根据父级来确定大小。

rem也是相对单位，但是不会继承父级大小，在手机端或者响应式网站最好使用这个单位，在做PC端依然不建议使用本单位。

7.flex布局

会问这个问题的公司大概率是做H5移动端之类的，对低版本浏览器来讲兼容性差。

Flex 布局教程：语法篇 - 阮一峰的网络日志

上面这个网站可以学习flex布局，不了解的可以去学一学主要的布局方式。

YuFun_0923

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试题及答案（视图篇）

1. CSS 盒子模型，绝对定位和相对定位盒子模型包含元素内容、内边距、边框和外边距。2.清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法(1)使用after元素（推荐使用）.clearfix:after{ content:"";/*设置内容为空*/ height:0;/*高度为0*/ line-height:0;/*行高为0*/ dis...
复制链接

扫一扫