面试题
目录
面试题一:
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; }
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站
“渐进增强”观点则认为应关注于内容本身