html&css&浏览器相关面试题大全（四）

58.用纯CSS创建一个三角形的原理是什么？

1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为 0，仅保留边框 4.得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明。

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

59.常见的兼容性问题？

• 不同浏览器的标签默认的margin和padding不一样。

*{margin:0;padding:0;}

• IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
  
• 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{
 background-color:#f1ee18;/*所有识别*/
 .background-color:#00deff\9; /*IE6、7、8识别*/
 +background-color:#a200ff;/*IE6、7识别*/
 _background-color:#1e0bd1;/*IE6识别*/
 }

• 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。
  
• IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
  
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性
  -webkit-text-size-adjust: none; 解决。
  
• 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A。 解决办法:按lvha的顺序书写css

":link": a标签还未被访问的状态；
 ":visited": a标签已被访问过的状态；
 ":hover": 鼠标悬停在a标签上的状态；
 ":active": a标签被鼠标按着时的状态；

60.为什么要初始化CSS样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

61.absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

• 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的padding box (除 margin, border 外的区域) 的最小矩形；
• 否则,则由这个祖先元素的 padding box 构成。 如果都找不到，则为 initial containing block。

补充：

static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

absolute: 向上找最近的定位为absolute/relative的元素

fixed: 它的containing block一律为根元素(html/body)

62.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

visibility属性详情：

• visibility:visible;

visible：visible属性值定义的元素是可见显示的，是默认的属性值。

• visibility:hidden;

hidden：hidden属性值定义的元素是不可见不显示的，但是元素还会占据原有的空间。

• visibility:inherit;

inherit：inherit属性值定义的元素会继承父元素的visibility属性值，就是父元素的visibility属性值是什么，该元素的visibility属性值就是什么。

• visibility:collapse;

collapse属性值定义不同的元素有不同的效果。

　　用在表格元素时：会删除一行或一列，不会影响表格的布局；

　　用在非表格元素上时：和hidden属性值的效果一样；

visibility:collapse不同浏览器的区别：

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟 display: none 一样，也就是说，它们占用的空间也会释放。

• 在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。

firefox(/faifɔ:ks/)，opera(/ˈɑːprə/）和IE，使用collapse(/kəˈlæps)值和使用display：none没有什么区别。

在火狐浏览器、Opera和IE11里，使用 collapse 值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

63.display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

64.position(定位)跟display（元素类型）、overflow（溢出）、float（浮动）这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；

position属性规定元素的定位类型；

float属性是一种布局方式，定义元素在哪个方向浮动。

• relative相对定位，相对定位是相对于该元素的原始位置，即以自己原始位置为参照物，另外relative相对定位依据top，right，bottom，left等属性偏移位置，其层叠通过z-index属性定义。position：relative的一个主要用法：方便绝对定位元素找到参照物。
  
• absolute：绝对定位，将元素从文档流中拖出来，然后使用left，right，top，bottom相对属性对其最接近的，一个具有定位属性的父级块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即相对于浏览器的窗口。
  
• fixed：以浏览器窗口为参考物元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
  
• static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  

类似于优先级机制：position：absolute（绝对定位）/fixed（绝对定位）优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

65.对BFC规范(块级格式化上下文：block formatting context)的理解？

点击查看详情

66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

浮动元素引起的问题

多个浮动起的元素是无法撑开父元素的宽度，父元素的高度可能会变成0。

若浮动元素前面还有同级元素没有浮动则会影响页面结构。

关于清除浮动，方法有多种：

• 使用额外标签法：给谁清除浮动，就在其下面额外添加一个空白标签 。设置属性为 clear:both。

优点： 通俗易懂，书写方便。（不推荐使用）
 缺点： 添加许多无意义的标签，结构化比较差。

• 使用：after伪元素清除浮动：

:after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after

• 使用双伪元素清除浮动：.clearfix:before,.clearfix:after 。zoom(IE专有属性)可解决ie6,ie7浮动问题
  
• 父级div定义 height： 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点： 简单、代码少、容易掌握 

• overflow属性来清除浮动：包含浮动元素的父标签添加样式overflow为hidden或auto。
  

67.上下margin重合的问题？

在重合元素外包裹一层容器，并触发该容器生成一个BFC。

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

68. 设置元素浮动后，该元素的display值是多少？

1.Html元素分三种

块级元素（display:block）–> 可以设置元素的宽高

行内元素（display:inline）–> 默认不换行,设置width/height无效(可以设置line-height)，margin/padding上下无效

行内块级元素（display:inline-block ）–> 可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。

结果：

所以无论是块级元素，行内元素，行内块元素，在设置元素浮动后，自动变成display:block

2.有什么意义？

以后在项目中如果需要设置行内元素的宽高，则设置为浮动后，就可以设置了。

69.移动端的布局用过媒体查询吗？

概念：一个网站适配所有终端，实现不同屏幕分辨率下的终端网页的不同布局，使用媒体查询针对不同设备宽度进行布局设置。

优点：一站适配所有终端，减少工作量，缩短开发周期。对搜索引擎友好，在每个设备中都能得到较好的展示。

缺点：对老版本浏览器兼容性不好，兼容各个设备工作量大。效率较低，加载更多的样式文件和脚本文件。设计比较难以精确，是一种折中性的设计方案，维护困难。

技术：弹性布局，图片，CSS，media, query等

页面的设计和开发需要根据用户的行为、设备环境进行相应的调整。

通过媒体查询检测不同设备的尺寸，通常在页面头部添加meta标签声明viewport

媒体查询

可以根据设备显示器的特性，设置不同的CSS样式。

媒体查询可以检测：viewport的宽度和高度，设备的宽度和高度，设备的朝向，分辨率。

引入方式

1，在样式表中引入：在style标签对中书写语法或通过link引入外部css文件

style:语法：@media mediaType and (media feature) {

选择器{属性：属性值}

}

70.CSS优化、提高性能的方法有哪些？

加载性能：

（1）css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。

（2）css 单一样式：当需要下边距和左边距的时候，很多时候会选择 使 用 margin:top 0 bottom 0 ； 但

margin-bottom:bottom;margin-left:left;执行效率会更高。

（3）减少使用@import，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样

式。去除这些空规则无疑能减少 css 文档体积。

（4）属性值为 0 时，不加单位。

（5）正确使用 display 的属性，由于 display 的作用，某些样式组

合会无效，徒增样式体积的同时也影响解析性能。

• 避免过度约束
• 避免后代选择符
• 避免链式选择符
• 避免不必要的命名空间
• 避免不必要的重复
• 避免！important大量使用，可以选择其他选择器
• 使用紧凑的语法
• css类命名最好使用语义的名字。
• 样式与内容分离：将 css 代码定义到外部 css 中。

71.浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。

• 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
• 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

72.在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

73.margin和padding分别适合什么场景使用？

margin和padding是在html中的盒模型的基础上出现的。

margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离

何时使用margin：

需要在border外侧添加空白

空白处不需要背景色

上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白

空白处需要背景颜色

上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

74.元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

75.全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

overflow：hidden；transition：all 1000ms ease；

76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式设计：

是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整

基本原理

通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport.

实现方式

• 媒体查询
  
• 百分比
  
• vw/vh
  
• rem
  总结

响应式设计的思考方向：
  * 弹性盒子和媒体查询
  * 使用百分比创建流式布局，同时使用媒体查询限制元素的尺寸和内容变更范围
  * 使用相对单位是内容自适应调节
  * 选择断点，针对不同断点实现不同的布局和内容展示

77. 视差滚动效果？

78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？

**单冒号(: )**用于CSS3伪类，双冒号(::)用于CSS3伪元素。

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。

79.让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

80. position:fixed;在android下无效怎么处理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

81.nth-child 与 nth-of-type 的区别？

nth-child 与 nth-of-type 都是 CSS 伪类，用于选取元素中的第 n 个或第 n 个特定类型的子元素。它们之间的区别在于，nth-child 选择所有指定父元素的子元素中的第 n 个，而 nth-of-type 选择特定类型的子元素中的第 n 个。

具体来说，下面我们将对它们进行详细讲解。

nth-child

nth-child 伪类可以选择元素的一系列子元素，而不考虑它们的类型。举个例子：

ul li:nth-child(2) {
  color: red;
}

nth-of-type

nth-of-type 伪类只选择同种类型的元素中的第 n 个。

css
ul li:nth-of-type(2) {
  color: red;
}

两者的区别在于，nth-child 会选择一个父元素下的所有子元素，而 nth-of-type 只会选择相同类型的子元素。因此，如果你需要选择所有子元素的话，使用 nth-child 是更好的选择，否则，就用 nth-of-type 选择相同类型的子元素。

82.移动端禁止放大缩小的方法

在移动端，当用户通过手势在屏幕上进行缩放操作时，有时候会影响页面的显示效果。为了避免这种情况，我们可以禁止移动设备上的缩放功能。

下面介绍几种禁止移动端缩放功能的方法：

• 禁止用户手动缩放

在 HTML 的头部添加以下 meta 标签，可以禁止用户手动缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 禁止双指缩放

通过 CSS 对 body 进行样式设置，可以禁止双指缩放

body {
  touch-action: pan-x pan-y;
}
//touch-action 属性被设置为 pan-x pan-y，即禁止双指缩放。

• 使用 JavaScript 禁止缩放

使用 JavaScript 代码也可以禁止页面的缩放功能：

javascript
document.addEventListener('gesturestart', function (e) {
  e.preventDefault();
});

上述代码中，当用户触发 gesturestart 事件时，通过 preventDefault() 方法来阻止默认的缩放行为。

需要注意的是，在禁止移动端缩放的同时，也可能会对某些用户体验产生影响，因此需要结合实际应用场景进行选择。