CSS面试题(一)

作者: 迷人的洋葱葱 | 来源:发表于2017-09-05 09:35 被阅读0次

一、垂直居中，多行文本垂直居中？

1、单行文本垂直居中
设置高度height和行高line-height，使高度height等于行高line-height。
2、多行未知高度文字的垂直居中
设定Padding值，使padding-top等于padding-bottom。
优点：可以在任何浏览器上运行，代码简单。
缺点：仅限于容器高度是可伸缩的情况。
3、多行文本固定高度的居中。
使用三层嵌套的div，假定三个div由外到内的id值分别为wrap、subwrap和content.
对wrap设置 display:table;
对subwrap设置 display:table-cell; vertical-align:middle;
针对IE6/7的兼容性处理：
运用CSS hack——
对wrap设置 *position:relative;
对subwrap设置 *position:absolute;
*top:50%;
对content设置 *position:relative; *top:-50%;

CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

二、如何实现两边固定中间自适应的布局？

1.绝对定位法：左右两侧div采用绝对定位，中间div的margin-left设为左侧div的宽度，中间div的 margin-right设为右侧div的宽度。三个div顺序任意。（左右div绝对定位，margin-left,margin-right,三个div顺序任意）
2.浮动法：左侧div左浮动，右侧div右浮动，中间div的margin-left设为左侧div的宽度，中间部分的 margin-right设为右侧div的宽度。左右div顺序任意，中间div必须放在最后。（左右div分别左右浮动，margin-left,margin-right,三个div顺序为左右中）
3.margin负值法：也叫圣杯布局。在中间div外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度为100%。左侧div的margin-left:-100%，右侧div的margin-left:右侧div的宽度的负值。中间div必须放在最前面，左右div顺序任意。
参考博文1 参考博文2

三、两列自适应布局

左边固定，右边自适应

1、
左div：固定宽度和左浮动。
右div:margin-left=左边div宽度+两列间距，宽度100%。

<div class="left">left</div>
<div class="main">main</div>

.left {
    float: left;
    width: 100px;
    background:red;
}
.main {
    margin-left: 110px;
    width: 100%;
    background:blue;
}

原理分析：根元素会生成BFC,因此left div和main div的左边会与包含块的border box的左边相接触。因此可以设置main左外边距margin-left为left的宽度。从而使main的content部分处于自适应的可视区。

2、
左div：左浮动，固定宽度。
右div：overflow: hidden;或overflow：auto

.left {
    float: left;
    width: 100px;
    background:red;
}
.main {
    overflow: hidden; //或overflow：auto
    background:blue;
}

原理分析：根元素会生成BFC,因此left div和main div的左边会与包含块的border box的左边相接触。因为BFC的区域不会和float box重叠，因此可以设置main为overflow:hidden或overflow:auto,使main生成BFC。

右边固定，左边自适应

1、

.main{
    width:100%;
    float:left;
    margin-right:-200px;
    background:red;
    }
.right{
    width:200px;
    float:right;
    background:blue;
    }

原理分析：右边固定宽度，右浮动。左边想自适应屏幕宽度必须设置宽度100%，这时候左边会占满一行。浮动元素被挤到下一行。因此要设置main 为float:left，使main生成BFC,BFC的区域就不会和float box重叠。这时候左边还是占满一整行，并没有给右浮动的区域留位置，因此要设置main margin-right负边距，大小为右边的宽度。

两列自适应布局

四、清除浮动的方法有哪些？

浮动问题

清除浮动后
1.给父级div设置 height：
原理：给父级div设置height值，从而解决父级div无法自动获取高度的问题。
缺点：只适合高度固定的布局。

<style type="text/css"> 
.superdiv{background:#000080;border:1px solid red;/*清除浮动代码*/ height:200px;} 
.float{float:left;width:200px;height:200px;background:#DDD} 
</style>

<div class="superdiv "> 
<div class="float">float:left;</div> 
</div>

2.在浮动元素后面加空的div标签
原理：在浮动元素后添加一个空div标签，在空div的样式中设置clear:both清除浮动，让父级div能自动获取到高度。
缺点：如果页面浮动布局多，就要增加很多空div标签。

<style type="text/css"> 
.superdiv{background:#000080;border:1px solid red;} 
.float{float:left;width:200px;height:200px;background:#DDD} 
/*清除浮动代码*/
.clearfloat{clear:both;}
</style>

<div class="superdiv "> 
<div class="float">float:left;</div> 
<!--添加空div标签-->
<div class="clearfloat"></div>
</div>

3.给父级div设置伪类：after和zoom
原理：IE8以上和非IE浏览器才支持:after，对父级div的伪类after设置clear:both清除浮动，让父级div能够自动获取高度；zoom(IE专有属性)用于解决ie6,ie7浮动问题。

<style type="text/css"> 
.superdiv{background:#000080;border:1px solid red;} 
.float{float:left;width:200px;height:200px;background:#DDD} 
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.clearfloat{zoom:1;}
</style>

<div class="superdiv clearfloat "> 
<div class="float">float:left;</div> 
</div>

4.给父级div设置 overflow:hidden
原理：使用overflow:hidden时，必须设置父级div的width或zoom:1，同时不能设置height，浏览器会自动检查浮动区域的高度。
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

<style type="text/css"> 
.superdiv{background:#000080;border:1px solid red;/*清除浮动代码*/width:100%;overflow:hidden;} 
.float{float:left;width:200px;height:200px;background:#DDD} 
</style>

<div class="superdiv "> 
<div class="float">float:left;</div> 
</div>

5.给父级div设置 overflow:auto
原理：使用overflow:auto时，必须设置父级div的width或zoom:1，同时不能设置height，浏览器会自动检查浮动区域的高度。

<style type="text/css"> 
.superdiv{background:#000080;border:1px solid red;/*清除浮动代码*/width:100%;overflow:auto;} 
.float{float:left;width:200px;height:200px;background:#DDD} 
</style>

<div class="superdiv "> 
<div class="float">float:left;</div> 
</div>

追问1：overflow:hidden清除浮动的原理是什么？

四、页面滚动较卡，该怎么优化？

1、防抖
在设定时间内没有连续触发两次scroll事件，才会触发真正想在 scroll 事件中触发的函数。
存在问题：图片懒加载。连续滚动下滑过程中图片不会被加载出来，只有停止下滑时候，图片才被加载出来。
2、节流
即使页面不断被滚动，被连续触发scroll事件，scroll 事件中的函数也可以以固定的频率被触发。
3、简化 scroll 内的操作
将一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll 事件外提前就绪。避免在scroll 事件中修改样式属性。
4、使用 pointer-events: none 禁止鼠标事件
滑动过程中给 <body> 添加上 pointer-events: none 的样式，禁止鼠标事件，减少了hover和click等鼠标事件的触发，滚动结束之后，再移除该样式。

另外，滚动优化其实不仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发页面渲染的事件。
[【前端性能】高性能滚动 scroll 及页面渲染优化]](http://www.cnblogs.com/coco1s/p/5499469.html)

五、使用css实现一个三角形（盒模型border和css旋转两种方法，主要考察css3旋转）

1、css border

#triangle-up {
     width: 0;
    height: 0;
    /*注意：上色的border必须设置solid才能显示颜色*/
    border-left: 60px solid transparent;/*transparent:color值为透明色*/
    border-right: 60px solid transparent;
    border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

2、css旋转正方形
1）创建2个嵌套的div。
2）将内部的div旋转45°，获得菱形。
3）将菱形的块向顶部偏移，父级div设置overflow:hidden;

#div1{
    position:relative;
    width:100px;
    height:100px;
    overflow:hidden;
    }
#div2{
    position:absolute;
    width:100px;
    height:100px;
    background:red;
    top:-70%;   
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    }

<div id="div1">
<div id="div2" class="transform"></div>
</div>

注意：css3旋转需要考虑浏览器兼容性。

.transform {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}
/*ie7-9要用matrix filter*/
.ie-transform-filter{
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(
    M11=0.707,
    M12=-0.707,
    M21=0.707,
    M22=0.707,  
SizingMethod='auto expand'  
)";
filter:progid:DXImageTransform.Microsoft.Matrix(
    M11=0.707,
    M12=-0.707,
    M21=0.707,
    M22=0.707,  
SizingMethod='auto expand'  
);
}

六、绝对定位与相对定位的区别

relative：相对定位，相对于自己在文档流中的位置进行偏移，并且原来在文档流中占有的位置得以保留。
absolute；绝对定位，相对于自己向父级元素查找出的第一个带有position属性的元素进行偏移，并且脱离文档流，原来在文档流中所占用的位置不保留。

七、CSS实现矩形按钮右边缘的中间有个往里凹的小半圆，如图：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
      .btn {
        width: 100px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background: #000;
        color: #fff;
        position: relative;
      }
      .btn:after {
        position: absolute;
        content: '';
        width: 30px;
        height: 30px;
        background: #fff;
        top: 10px;
        right: -15px;
        border-radius: 100%;
      }
    </style>
</head>
<body>
 <div class="btn">
   button
 </div>
    </body>
</html>

参考文献：
CSS实现矩形按钮右边缘的中间有个往里凹的小半圆

八、用css实现九宫格

.wrap{
    width:306px;
    height:306px;
    display:flex;
    flex-wrap:wrap;
    background:red;
    }
.content{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    color:white;
    border:1px solid white;
    background:blue;
    }

<div class="wrap">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>

关键点：
①外面的包裹的元素设置display:flex和flex-wrap:wrap。

九、css3动画有哪些实现方式？

transform：变换主要实现旋转，缩放，倾斜，移动的2D或3D变形。
Transitions：从一个属性值平滑过渡到另一个属性值。
Animations：通过设置关键帧在页面上产生复杂的动画效果。

十、CSS3的新功能

1、边框
1)圆角 border-radius，IE不支持。
2)图片边框 border-image
2、多背景
向后兼容会是一个很大的问题。
3、@font-face 使用自定义字体
Firefox的最新版本将支持该功能，Safari，Opera甚至IE也将支持或已经支持该功能，我们会看到该功能的广泛应用，只是字体的版权问题会很麻烦。
4、动画 transform Transitions Animations
5、渐变色 gradient
6、Box阴影
7、RGBa-加入透明色
RGBa中的a代表透明色，IE不支持。
8、文字阴影 text-shadow
9、新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
10、多列布局 multi-column layout

参考文献：
CSS3八大新功能