web前端面试题汇总（二）

最新推荐文章于 2021-01-07 18:44:29 发布

jiaojsun

最新推荐文章于 2021-01-07 18:44:29 发布

阅读量585

点赞数

分类专栏： web面试题文章标签：面试题

本文链接：https://blog.csdn.net/jiaojsun/article/details/76408176

版权

web面试题专栏收录该内容

20 篇文章 1 订阅

订阅专栏

#####1. 块元素和行内（内联）元素特征比较

块元素特征（form,h1,div,p,ul,table,hr）

在没有设置宽高的时候，默认撑满一行
支持所有css命令

行内（内联）元素特征（a,br,em,img,input,span）

不支持宽高。宽高由内容撑开
一行中可以显示继续跟同类的标签
不能设置margin-top、margin-bottom；padding-top、padding-bottom值
代码换行被解析

#####2. inline-block（行内块元素）的特征

display:block 显示为块，使内联元素具备块属性标签的特征
display：inline 显示为内联，使块属性标签具备内联元素的特征
display:inline-block
1)块在一行显示
2)行内属性标签支持宽高
3)没有宽高的时候内容撑开高度

#####3. 浮动介绍及基本语法

文档流：指文档中可显示对象在排列时所占用的位置。
浮动：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
clear:left/right/both/none/inherit 元素的某个方向上不能有浮动元素
clear:both 在左右两侧均不允许浮动元素 clear:inherit 规定应该从父元素继承 clear 属性的值。
#####4. 浮动元素的特性
块元素在一排显示
内联支持宽高
默认内容撑开高度
脱离文档流
提升层级半层
#####5. 各种清浮动的办法

a. 给父级加高
问题：扩展性不好
b. 给父级加浮动
问题：页面中所有元素都加浮动，margin左右失效
c. 给父级添加display:inline-block
问题：margin左右自动失效
d. 空标签清浮动，见图 .clearfix
这里写图片描述
e. br清浮动

f. after伪类（主流办法）

g. overflow:hidden(触发BFC，详见下一篇博文)清浮动法

#####6. 谈谈CSS3中的定位元素

1）相对定位 position:relative

通过top,left,bottom,right等属性值定位元素相对其原本应显示位置的偏移位置
不影响元素本身的特性
不使元素脱离文档流（元素移动之后原始位置会被保留）即占用原位置空间
如果没有定位偏移量，对元素本身没有任何影响
提升层级

2）绝对定位 position:absolute

通过top,left,bottom,right等属性值定位元素相对于 static 定位以外的第一个父元素进行定位
使元素完全脱离文档流，即不占用原位置空间
使行内元素支持宽高
使块属性标签内容撑开高度
如果有定位父级则相对于定位父级发生偏移，没有则相对于发生偏移
绝对定位元素一般都是配合相对定位元素使用
提升层级

3）固定定位 position:fixed

通过top,left,bottom,right等属性值定位元素相对浏览器窗口的偏移位置
与绝对定位元素特征基本一致，区别是始终相对整个文档进行定位
IE6不支持固定定位

4）粘性定位 position:fixed

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

5）其他定位

position:static 静态定位，默认的定位方式，盒子按照HTML规则定位，定义top,left,bottom,right无意义
position:inherit:从父元素继承定位属性的值

#####7. 关于透明度

标准浏览器： opacity：0~1；
IE:filter:alpha(opacity=0~100);

#####8.常见的兼容性问题

1） H5标签兼容：自定义标签都是行内元素。
IE6不兼容H5标签，所以需要添加js代码document.createElement(“header”);样式加display:block;

2）元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动;

如下所示，如果h2不加浮动的话，在IE6下显示有问题。

这里写图片描述

3）第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题; 给.right加上float:left可以解决。

这里写图片描述

4）IE6下子元素超出父级宽高，会把父级的宽高撑开

这里写图片描述

5）p 标签不能包含块元素（td,h也不能）。

如下所示这里写图片描述
审查元素变为

6）margin兼容性问题

如下这样写，在有些浏览器会出现显示问题

这里写图片描述

如下改正即可

这里写图片描述

7）display：inline-block在IE6下不起作用

这里写图片描述

8）IE6最小高度是19px
加上overflow:hidden;

9)IE6 双边距
当元素浮动之后再设置margin就会产生双倍边距问题，加上*display:inline可以解决

10）li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
给li加 *vertical-align:top;

11)浮动元素之间注释，导致多复制一个文字问题

12)IE6 7 父级元素的overflow:hidden 是包不住子级的relative
可以给父级加上*position:relative;

13)IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差

14)IE6下绝对定位元素和浮动元素并列绝对定位元素消失

15)IE6 下input的空隙
给input加浮动解决

16)IE6 下输入类型表单控件背景问题

如下所示，背景图片被挤走了
这里写图片描述

加上fixed可以解决

这里写图片描述

17)css hack
针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!

\9 所有的IE10及之前
+ * IE7及ie7以下的ie浏览器认识	
_IE6及ie6的ie浏览器认识

18)PNG24 兼容性问题

JS插件(问题:不能处理body之上png24)
DD_belatedPNG.fix(‘xxx’);
原生滤镜
_background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=“XX.png”, sizingMethod=“crop”);

19)样式优先级、提升样式优先级

默认 < 类型 < class < id < style(行间) < !important
!important 提升样式优先级权重

累死了，先到这^_