前端面试题整理1
1. display: none 与 visibility: hidden的区别。
相同点: 都可以让元素不可见。
不同点:
- display: none 会让元素完全从 渲染树中消失,渲染的时候不占据任何空间;
- visibility: hidden 不会让元素从渲染树中消失,渲染元素继续占据空间,只是内容不可见。
- display: none是非继承属性。子孙节点消失是因为元素从渲染树消失造成,通过修改子孙节点属性无法显示;
- visibility: hidden是继承属性。子孙节点消失是因为继承了hidden,通过设置visibility: visible可以让子孙节点显示。
- 修改常规流中元素的display通常会造成文档重排;
- 修改visibility属性值会造成本元素的重绘。
- 读屏器不会读取display: none元素内容;但是会读取visibility: hidden元素内容。
2. display:block 和display: inline的区别。
display: block元素的特点:
- 1.处于常规流时,如果width没有设置,会自动填充满父容器
- 2.可以应用margin/padding
- 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
- 4.处于常规流中时,在前后元素位置之间(独占一个水平空间)
- 5.忽略vertical-align
display: inline元素的特点:
- 1.水平方向上根据direction依次布局
- 2.不会在元素前后换行
- 3.受 white‐space 控制
- 4. margin/padding 在竖直方向上无 效，水平方向上有效
- 5. width/height 属性对非替换行内元素无效，宽度由元素内容决定
- 6.非替换行内元素的行框高由 lineheight 确定，替换行内元素的行框高由 height , margin , padding , border 决定
- 6.浮动或绝对定位时会转换为 block
- 7. vertical-align 属性生效
3. 如何创建块级格式化上下文(block formatting context),BFC有什么用?
创建规则：
- 1. 根元素
- 2. 浮动元素（ float 不是 none ）
- 3. 绝对定位元素（ position 取值为 absolute 或 fixed ）
- 4. display 取值为 inline‐block , table‐cell , table‐caption , flex , inline‐flex 之一的元素
- 5. overflow 不是 visible 的元素
作用：
- 1. 可以包含浮动元素
- 2. 不被浮动元素覆盖
- 3. 阻止父子元素的margin折叠
4.外边距折叠(collapsing margins)。
毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。
规则如下:
1. 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
2. 浮动元素/inline‐block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
3. 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
4. 元素自身的margin‐bottom和margin‐top相邻时也会折叠
5. display,float,position的关系。
- 1. 如果 display 为none，那么position和float都不起作用，这种情况下元素不产生框
- 2. 否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调 整。
- 3. 否则，如果float不是none，框是浮动的，display根据下表进行调整
- 4. 否则，如果元素是根元素，display根据下表进行调整
5. 其他情况下display的值为指定值总结起来：绝对定位、浮动、根元素都需要调整 display
6. PNG,GIF,JPG的区别及如何选?
GIF:
- 1. 8位像素，256色
- 2. 无损压缩
- 3. 支持简单动画
- 4. 支持boolean透明
- 5. 适合简单动画
JPEG：
- 1. 颜色限于256
- 2. 有损压缩
- 3. 可控制压缩质量
- 4. 不支持透明
- 5. 适合照片
PNG：
- 1. 有PNG8和truecolor PNG
- 2. PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
- 3. 适合图标、背景、按钮
7. CSS有哪些继承属性?
关于文字排版的属性 如：
- font
- word‐break
- letter‐spacing
- text‐align
- text‐rendering
- word‐spacing
- white‐space
- text‐indent
- text‐transform
- text‐shadow
line‐height
color
visibility
cursor
8. 容器包含若干浮动元素时如何清理(包含)浮动?
1. 容器元素闭合标签前添加额外元素并设置 clear: both
2. 父元素触发块级格式化上下文﴾见块级可视化上下文部分﴿
3. 设置容器元素伪元素进行清理推荐的清理浮动方法
在标准浏览器下使用 :
- 1 content内容为空格用于修复opera下文档中出现contenteditable属性时,在清理浮动元素上下的空白
- 2 使用display使用table而不是block：可以防止容器和子元素margin‐top折叠,这样能使清理效果与BFC，IE6/7 zoom: 1;一致
.clearfix:before, .clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/** * IE 6/7下使用 * 通过触发hasLayout实现包含浮动 **/
.clearfix {
*zoom: 1;
} 9. 什么是FOUC?如何避免?
Flash Of Unstyled Content：用户定义的样式表加载之前浏览器会使用默认的样式显示文档，用户样式加载渲染之后再重新显示文档，造成页面闪烁。
解决方法：把样式表放到文档的 head 。
10 .如何确定一个元素的包含块(containing block)?
1. 根元素的包含块叫做初始包含块，在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin；对于paged media，它的尺寸等于page area。初始包含块的direction属性与根元素相同。
2. position 为 relative 或者 static 的元素，它的包含块由近的块级（ display 为 block , list‐item , table ）祖先元素的 内容框组成
3. 如果元素 position 为 fixed 。对于连续媒体，它的包含块为viewport；对于paged media，包含块为page area
4. 如果元素 position 为 absolute ，它的包含块由祖先元素中近一个 position 为 relative , absolute 或者 fixed 的元素产 生，规则如下：
- 如果祖先元素为行内元素，the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
- 其他情况下包含块由祖先节点的padding edge组成
如果找不到定位的祖先元素，包含块为初始包含块
11.如何水平居中一个元素?
如果需要居中的元素为常规流中inline元素: 为父元素设置 text‐align: center; 即可实现;
如果需要居中的元素为常规流中block元素:
- 1）为元素设置宽度，
- 2）设置左右margin为auto。
3）IE6下需在父元素上设置 text‐align: center; ,再给子元素恢复需要的值
<body> <div class="content"> aaaaaa aaaaaa a a a a a a a a </div> </body> <style> body { background: #DDD; text-align: center; /* 3 */ } .content { width: 500px; /* 1 */ text‐align: left; /* 3 */ margin: 0 auto; /* 2 */ background: purple; } </style>
如果需要居中的元素为浮动元素:
- 1）为元素设置宽度，
- 2） position: relative; ，
- 3）浮动方向偏移量（left或者right） 设置为50%，
- 4）浮动方向上的margin设置为元素宽度一半乘以‐1
<body> <div class="content"> aaaaaa aaaaaa a a a a a a a a </div> </body> <style> body { background: #DDD; } .content { width: 500px; /* 1 */ float: left; position: relative; /* 2 */ left: 50%; /* 3 */ margin‐left: ‐250px; /* 4 */ background‐color: purple; } </style>
如果需要居中的元素为绝对定位元素:
- 1）为元素设置宽度，
- 2）偏移量设置为50%，
- 3）偏移方向外边距设置为元素宽度 一半乘以‐1
<body> <div class="content"> aaaaaa aaaaaa a a a a a a a a </div> </body> <style> body { background: #DDD; position: relative; } .content { width: 800px; position: absolute; left: 50%; margin‐left: ‐400px; background‐color: purple; } </style>
如果需要居中的元素为绝对定位元素:
- 1）为元素设置宽度，
- 2）设置左右偏移量都为0,
- 3）设置左右外边距都为auto
<body> <div class="content"> aaaaaa aaaaaa a a a a a a a a </div> </body> <style> body { background: #DDD; position: relative; } .content { width: 800px; position: absolute; margin: 0 auto; left: 0; right: 0; background‐color: purple; } </style>
12. 如何竖直居中一个元素?
有8种CSS实现垂直居中。
需要居中元素为单行文本，为包含文本的元素设置大于 font‐size 的 line‐height ：<p class="text">center text</p> <style> .text { line‐height: 200px; } </style>
13. sessionStorage,localStorage,cookie区别。
- 1. 都会在浏览器端保存，有大小限制，同源限制
- 2. cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器
- 3. cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
- 4. 有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效， 直到用户删除
- 5. 共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
- 6. localStorage的修改会促发其他文档窗口的update事件
- 7. cookie有secure属性要求HTTPS传输
- 8. 浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M
14.什么闭包,闭包有什么用?
闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。
闭包作用域链通常包括三个部分：
- 1. 函数本身作用域。
- 2. 闭包定义时的作用域。
- 3. 全局作用域。
闭包常见用途：
- 1. 创建特权方法用于访问控制
- 2. 事件处理程序及回调
14.position的值， relative和absolute分别是相对于谁进行定位的？
absolute:生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative生成相对定位的元素，相对于其在普通流中的位置进行定位。
static默认值。没有定位，元素出现在正常的流中
sticky生成粘性定位的元素，容器的位置根据正常文档流计算得出
15.渐进增强和优雅降级。
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
上一篇： 山东中医药大学是双一流大学吗？是一流学科建设高校吗？算是名校吗？
下一篇： 前端面试题整理3