css面试题

最新推荐文章于 2024-05-19 15:59:41 发布

面相进程，面相对象

最新推荐文章于 2024-05-19 15:59:41 发布

阅读量136

点赞数

分类专栏：前端面试题思路共享文章标签：面试 java 经验分享

本文链接：https://blog.csdn.net/weixin_57575133/article/details/127789944

版权

思路共享同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端面试题

10 篇文章 0 订阅

订阅专栏

面试题

5、什么是渐进增强和优雅降级?它们有什么不同？

面试题一：

1、如何使一个盒子水平垂直居中？

问题解答：

方法一：利用定位（常用方法,推荐）

<!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> 
 .parent { 
 width: 500px; 
 height: 500px; 
 border: 1px solid #000; 
 position: relative; 
 } 
 
 .child { 
 width: 100px; 
 height: 100px; 
 border: 1px solid #999; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
 margin-top: -50px; 
 margin-left: -50px; 
 } 
 </style> 
</head> 
<body> 
 <div class="parent"> 
 <div class="child">我是子元素</div> 
 </div> 
</body> 
</html>

方法二：利用 margin:auto;

<!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> 
 .parent { 
 width: 500px; 
 height: 500px; 
 border: 1px solid #000; 
 position: relative; 
 } 
 
 .child { 
 width: 100px; 
 height: 100px; 
 border: 1px solid #999; 
 position: absolute; 
 margin: auto; 
 top: 0; 
 left: 0; 
 right: 0; 
 bottom: 0; 
 } 
 </style> 
</head> 
<body> 
 <div class="parent"> 
 <div class="child">我是子元素</div> 
 </div> 
</body> 
</html>

方法三：利用 display:table-cell

<!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> 
 .parent { 
 width: 500px; 
 height: 500px; 
 border: 1px solid #000; 
 display: table-cell; 
 vertical-align: middle; 
 text-align: center; 
 } 
 
 .child { 
 width: 100px; 
 height: 100px; 
 border: 1px solid #999; 
 display: inline-block; 
 } 
 </style> 
</head> 
<body> 
 <div class="parent">
 <div class="child">我是子元素</div> 
 </div> 
</body> 
</html>

方法四：利用 display：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> 
 .parent { 
 width: 500px; 
 height: 500px; 
 border: 1px solid #000; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 } 
 
 .child { 
 width: 100px; 
 height: 100px; 
 border: 1px solid #999; 
 } 
 </style> 
</head> 
<body> 
 <div class="parent"> 
 <div class="child">我是子元素</div> 
 </div> 
</body> 
</html>

方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

<!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> 
 .parent { 
 width: 500px; 
 height: 500px; 
 border: 1px solid #000; 
 } 
 
 .child { 
 width: 100px; 
 height: 100px; 
 border: 1px solid #999; 
 margin-top: 200px; 
 margin-left: 200px; 
 } 
 </style> 
</head> 
<body> 
 <div class="parent"> 
 <div class="child">我是子元素</div> 
 </div> 
</body> 
</html>

方法六：利用 transform

<!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> 
 .parent { 
 width: 500px; 
 height: 500px; 
 border: 1px solid #000; 
 position: relative; 
 } 
 
 .child { 
 width: 100px; 
 height: 100px; 
 border: 1px solid #999; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
 } 
 </style> 
</head> 
<body> 
 <div class="parent"> 
 <div class="child">我是子元素</div> 
 </div> 
</body> 
</html>

面试题二：

2、如何垂直居中一个 img?

问题解答：

#container //<img>的容器设置如下 
{ 
display:table-cell; 
text-align:center; 
vertical-align:middle; 
}

面试题三：

3、如何实现双飞翼（圣杯）布局？

问题解答：

1、利用定位实现两侧固定中间自适应

1.1）父盒子设置左右 padding 值

1.2）给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

1.3）中间盒子自适应

具体 CSS 代码

<style> 
 .father { 
 height: 400px; 
 background-color: pink; 
 position: relative; 
 padding: 0 200px; 
 } 
 .left,.right { 
 width: 200px; 
 height: 300px; 
 background-color: yellow; 
 position: absolute; 
 top: 0; 
 } 
 .left { 
 left: 0; 
 } 
 .right { 
 right: 0; 
 } 
 .center { 
 background-color: blue; 
 height: 350px; 
 } 
 
</style>

html 结构

<div class="father"> 
 <div class="left"></div> 
 <div class="center"></div> 
 <div class="right"></div> 
</div>

2、利用 flex 布局实现两侧固定中间自适应

2.1）父盒子设置 display:flex;

2.2）左右盒子设置固定宽高 ;

2.3）中间盒子设置 flex:1 ;

<style> 
 .father { 
 height: 400px; 
 background-color: pink; 
 display: flex; 
 } 
 .left { 
 width: 200px; 
 height: 300px; 
 background-color: yellow; 
 } 
 .right { 
 width: 200px; 
 height: 300px; 
 background-color: yellow; 
 } 
 .center { 
 flex: 1; 
 background-color: blue; 
 } 
 
</style>

html 结构

<div class="father"> 
 <div class="left"></div> 
 <div class="center"></div> 
 <div class="right"></div> 
</div>

3、利用 bfc 块级格式化上下文, 实现两侧固定中间自适应

3.1）左右固定宽高，进行浮动

3.2）中间 overflow: hidden;

<style> 
 .father { 
 height: 500px; 
 background-color: pink; 
 } 
 .left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background-color: blue; 
 } 
 .right { 
 float: right; 
 width: 200px; 
 height: 400px; 
 background-color: blue; 
 } 
 .center { 
 height: 450px; 
 background-color: green; 
 overflow: hidden; 
 } 
 </style>

html 结构

<!-- 注意:left 和 right 必须放在 center 前面 --> 
 <div class="father"> 
 <div class="left"></div> 
 <div class="right"></div> 
 <div class="center"></div> 
 </div>

面试题四：

4、CSS 的盒模型？

问题解答：

        盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分

盒子模型分为两种:

        第一种是 W3C 标准的盒子模型（标准盒模型）

        第二种 IE 标准的盒子模型（怪异盒模型）

标准盒模型与怪异盒模型的表现效果的区别之处：

1、标准盒模型中 width 指的是内容区域 content 的宽度

        height 指的是内容区域 content 的高度

        标准盒模型下盒子的大小 = content + border + padding + margin

2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border +         padding）；height 指的是内容、边框、内边距总的高度

        怪异盒模型下盒子的大小=width（content + border + padding） + margin

         除此之外，我们还可以通过属性 box-sizing 来设置盒子模型的解析模式

可以为 box-sizing 赋两个值：

        content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin

        border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型，总宽=width+margin

面试题五：

5、什么是渐进增强和优雅降级?它们有什么不同？

问题解答：

优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级浏览器只保证最基本的功能。关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。

举个例子：
a{ 
display：block； 
width：200px； 
height： 100px； 
background：aquamarine； 
/*我就是要用这个新 css 属性*/ 
transition：all 1s ease 0s； 
/*可是发现了一些低版本浏览器不支持怎么吧*/ 
/*往下兼容*/ 
-webkit-transition：all 1s ease 0s； 
-moz-transition：all 1s ease 0s； 
-o-transition： all 1s ease 0s； 
/*那么通常这样考虑的和这样的侧重点出发的 css 就是优雅降级*/ 
} 
a：hover{ 
height：200px； 
} 
/ *那如果我们的产品要求我们要重低版本的浏览器兼容开始*/ 
a{ 
/*优先考虑低版本的*/ 
-webkit-transition：all 1s ease 0s； 
-moz-transition：all 1s ease 0s； 
-o-transition： all 1s ease 0s； 
/*高版本的就肯定是渐进渐强*/ 
transition：all 1s ease 0s； 
}
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站

“渐进增强”观点则认为应关注于内容本身