前端CSS面试题详解

最新推荐文章于 2024-11-19 20:43:38 发布

JavaTree2017

最新推荐文章于 2024-11-19 20:43:38 发布

阅读量448

点赞数

分类专栏：基础面试题文章标签：面试题前端 css

本文链接：https://blog.youkuaiyun.com/shengming0302/article/details/75053291

版权

基础面试题专栏收录该内容

3 篇文章

订阅专栏

1.请描述一下 cookies，sessionStorage 和 localStorage 的区别。
首先对三者的概念进行介绍：
Cookie: 熟知的主要用途是保存登陆信息，比如登录某个网站可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
LocalStorage: 在客户端存储数据，没有时间限制的数据存储，除非被清除，否则永久保存。
SessionStorage: 在客户端存储数据，仅在当前会话下有效，关闭页面或浏览器后被清除。
具体区别见下表：
特性 Cookie LocalStorage SessionStorage
数据生命周期可设置失效时间，默认是关闭浏览器后失效。除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除。
存储数据大小 4K左右 5MB左右 5MB左右
与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题仅在客户端（即浏览器）中保存，不参与和服务器的通信仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性需要程序员自己封装，源生的Cookie接口不友好源生接口可以接受，亦可再次封装来对Object和Array有更好的支持源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
可总结为以下四点：
1）cookie在浏览器和服务器间来回传递，sessionStorage和localStorage不会。
2）sessionStorage和localStorage的存储空间更大。
3）sessionStorage和localStorage有更多丰富易用的接口。
4）sessionStorage和localStorage各自独立的存储空间。

三者的应用场景我们举一个购物商城的例子来阐述：
针对登陆过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录。
localStorage用于存储购物车信息。
当遇到内容较多的表单，可将其存储在sessionStorage，把页面拆分成多个子页面，引导用户填写。

2.CSS中display有哪些值？说明他们的作用。
display常用的属性有none、block、inline和inline-block。他们的作用分别是：
1)none: 元素不会显示，而且该元素现实的空间也不会保留。但有另外一个 visibility: hidden，是保留元素的空间的。
2)inline: display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为inline，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
3)block: 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
4)inline-block: 行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

另外还会用到如下值：
list-item: 此元素会作为列表显示。
table: 此元素会作为块级列表显示，表格前后带有换行符
inline-table: 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group: 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group: 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group: 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row: 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group: 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column: 此元素会作为一个单元格列显示（类似 <col>）
table-cell: 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption: 此元素会作为一个表格标题显示（类似 <caption>）
inherit: 规定从父元素继承display的值

3.CSS实现水平垂直居中的方法有哪些？
假设我们有如下HTML代码：

<body>
    <div id=”container”>
        <div id=”center”>
            ******
        </div>
    </div>
</body>

为了实现id为“center”的div在父级”container”中的水平垂直居中，经过搜集，我们给出以下几种思路：
1）用ghost element、inline-block和vertical-align实现：适用于未知宽度高度的情况
其中inline-block在本期的另外专栏中有介绍，简述即为设置该属性后，这一元素不仅仅是内联元素，也可以设置宽度和高度; vertical-align即为字面理解的垂直居中; 至于ghost element在这里如何使用我们看详细代码，如下：
这里写图片描述

#container{
        text-align:center;
        height:400px;
}
#container:before{
        content: ""; 
height: 100%;
    display: inline-block; 
vertical-align: middle;
}
#center{
        display: inline-block; 
vertical-align: middle;
}

从上述代码和上图中可以得出这一结论，通过在父级中设置伪类，并设置其高度为100%让其纵向撑满，再通过inline-block的属性保证“center”的垂直水平居中。这一方法是现在最流行的方法。

2）用相对定位和负边距实现上下左右居中：适用于高度宽度已知的情况
首先简要介绍绝对定位和相对定位。
相对定位，如果说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意，在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间，即文档流后面的元素不会填入因偏移造成的空间中。
介绍完了相对定位，相信大家已经大概知道了如何实现水平垂直居中了，以下为实例代码：

.container{ 
height: 600px; 
width: 600px;
    position: relative; 
} 
.center{ 
height: 200px; 
width: 200px;
position: relative; 
top: 50%;
    left: 50%;
margin: -100px 0 0 -100px; 
}

首先相对父元素top，left定位在50%的位置，这时候只是子元素左上角居中，而中心点还没居中，加上margin: -100px 0 0 -100px;利用负边距把图片的中心点位于父元素的中心点，从而实现垂直水平居中。

3）利用绝对定位实现居中：适用于高度宽度已知的情况
绝对定位，被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该元素浮起来，但它们的不同点在于，相对对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来。那么绝对定位是如何定位的呢？首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位。实例代码如下：

#container{
    text-align: center;
    height: 400px;
position: relative;
} 
#center{
    position: absolute; 
margin: auto; 
top: 0; right: 0; left:0; bottom: 0; 
width: 200px;
    height: 200px;
}

此处设置了绝对定位后，利用margin：auto这一属性直接实现了水平垂直居中。
4）使用table-cell、inline-block实现水平垂直居中：适合高度宽度位置的情况
display：table-cell属性是指让标签元素以表格单元格的形式呈现，类似于td标签。单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等。具体代码如下：

#container{
display: table-cell; 
text-align: center;
vertical-align: middle;
height: 300px; 
}
#center{
display: inline-block; 
}

5）使用CSS3中的transform来实现水平垂直居中：适合高度宽度位置的情况
transform是CSS3新增的特性之一，字面上就是变形、改变的意思，功能主要包括:旋转rotate、扭曲skew、缩放scale、移动translate以及矩阵变形matrix。这里主要要用到的是translate功能。
移动translate我们分为三种情况：
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
translateX(x)仅水平方向移动（X轴移动）；
translateY(Y)仅垂直方向移动（Y轴移动）。
移动的时候，其基点默认为元素中心点，也可以根据transform-origin进行基点的改变。
具体水平垂直操作代码如下：

#container{
    position: relative;
    height: 200px；
 }
#center{
position: absolute;
top:50%; 
left: 50%; 
transform: translate(-50%,-50%);
}

这里写图片描述