【前端】面试题 html/css/js基础知识篇

一、CSS面试题

1、display: none 与 visibility: hidden 的区别。

相同： 它们都能让元素不可见
区别：

• display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden不会让元素从渲染树消失，渲染树元素继续占据空间，只是内容不可见；
• display: none是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible可以让子孙节点显示；
• 修改常规流中元素的 display 通常会造成文档重排，修改 visibility 属性只会造成本元素的重绘；
• 读屏器不会读取 display: none得元素内容；会读取 visibility: hidden的元素内容。

2、css hack 原理及常用 hack。

原理：利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式。常见的 hack 有 ：1）属性 hack，2）选择器 hack，3）IE 条件注释。
IE 条件注释，适用于[IE5, IE9]常见格式如下：

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

选择器 hack，不同浏览器对选择器的支持不一样：

/***** Selector Hacks ******/
/* IE6 and below */
* html #uno  {
    color: red }

/* IE7 */
*:first-child+html #dos {
    color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres {
    color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro {
    color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco {
    color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis {
    color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete {
    color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {
     color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
   
 #diez  {
    color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
   
 #veintiseis {
    color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  {
    color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce {
    color: red  }

/* Everything but IE6-8 */
:root *> #quince {
    color: red  }

/* IE7 */
*+html #dieciocho {
     color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  {
    color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  {
    color: red  }

属性 hack：不同浏览器解析 bug 或方法：

/* IE6 */
#once {
    _color: blue }

/* IE6, IE7 */
#doce {
    *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete {
    color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve {
    color: blue\9; }

/* IE7, IE8 */
#veinte {
    color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete {
    color: blue !ie; } /* string after ! can be anything */

3、link 与 @import 的区别。

• link 是 HTML 方式， @import 是 CSS 方式；
• link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUC；
• link 可以通过 rel=“alternate stylesheet” 指定候选样式；
• 浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式；
• @import 必须在样式规则之前，可以在 css 文件中引用其他文件；
• 总体来说：link 优于@import。

4、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

5、display,float,position 的关系。

• 如果 display 为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框；
• 否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整；
• 否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整；
• 否则，如果元素是根元素，display 根据下表进行调整；
• 其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display。

6、外边距折叠(collapsing margins)

外边距重叠就是 margin-collapse，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值；
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
• 两个外边距一正一负时，折叠结果是两者的相加的和。

7、介绍一下盒模型？有哪几种盒模型？

• 有两种， IE 盒子模型、W3C 盒子模型；
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 标准(W3C)盒模型：元素宽度 = content + padding + border + margin
• 怪异(IE)盒模型：元素宽度 = content（content+border+padding）+margin
• 区 别： IE 的 content 部分把 border 和 padding 计算了进去;
• 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高
• 通过设置 css3 的 box-sizing: content-box属性，触发标准盒模型

8、box-sizing 常用的属性有哪些？分别有什么作用？

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素 box-sizing 属性的值

9、CSS 选择器有哪些？

• id 选择器（ # myid）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = “external”]）
• 伪类选择器（a:hover, li:nth-child）

10、CSS3 新增伪类有那些？

• p:first-of-type 选择属于其父元素的首个 p元素的每个p元素。
• p:last-of-type 选择属于其父元素的最后 p元素的每个p元素。
• p:only-of-type 选择属于其父元素唯一的 p元素的每个p元素。
• p:only-child 选择属于其父元素的唯一子元素的每个 p元素。
• p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。
• :after 在元素之前添加内容,也可以用来做清除浮动。
• :before 在元素之后添加内容
• :enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。
• :disabled 控制表单控件的禁用状态。
• :checked 单选框或复选框被选中

11、如何居中 div？如何居中一个浮动元素？如何让绝对定位的 div 居中？

如果需要居中的元素为常规流中 inline 元素，为父元素设置 text-align: center，即可实现。
如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto，3）IE6 下需在父元素上设置 text-align: center，再给子元素恢复需要的值。

<body>
    <div class="content">aaaaaa</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</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</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</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、如何竖直居中一个元素？

• 绝对定位居中；
• 如果居中的是行内元素，可以设置父级 height 与 line-height 相等；
• 设置 margin/padding 居中；
• 相对位置偏移居中；
• flex 居中，设置 align-items:center 即可。

13、display 有哪些值？说明他们的作用。

• block 像块级元素一样显示；
• none 缺省值，像行内元素类型一样显示；
• inline-block 像行内元素一样显示，但其内容像块级元素一样显示；
• list-item 像块级元素一样显示，并添加样式列表标记；
• table 此元素会作为块级表格来显示；
• inherit 规定应该从父元素继承 display 属性的值。

14、position 有哪些值 ？relative 和 absolute 定位依据是？

• static 静态定位，默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 的应用）；
• relative 生成相对定位的元素，相对于元素的正常位置进行定位；
• absolute绝对定位，相对于值不为 static 的第一个父元素进行定位，如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位；
• fixed 固定定位，相对于浏览器窗口进行定位，（老 IE 不支持），使用固定定位的元素无论如何滚动浏览器窗口，元素位置固定不变 ；
• sticky粘性定位，滚动页面时它的效果与relative相同，当要滚动到屏幕之外时则自动变成fixed的效果；
• inherit 规定从父元素继承 position 属性的值。

15、CSS3 有哪些新特性？

• 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
• 弹性盒模型 display: flex;
• 多列布局 column-count: 5;
• 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
• 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
• 颜色透明度 color: rgba(255, 0, 0, 0.75);
• 圆角 border-radius: 5px;
• 渐变 background:linear-gradient(red, green, blue);
• 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
• 倒影 box-reflect: below 2px;
• 文字装饰 text-stroke-color: red;
• 文字溢出 text-overflow:ellipsis;
• 背景效果 background-size: 100px 100px;
• 边框效果 border-image:url(bt_blue.png) 0 10;
• 平滑过渡 transition: all .3s ease-in .1s;
• 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
• 转换
  • 旋转 transform: rotate(20deg);
  • 倾斜 transform: skew(150deg, -10deg);
  • 位移 transform: translate(20px, 20px);
  • 缩放 transform: scale(.5);

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

/* 把上、左、右三条边隐藏掉（颜色设为 transparent）*/
#demo {
   
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

17、一个满屏品字布局如何设计?

简单的方式：

• 上面的 div 宽 100%，
• 下面的两个 div 分别宽 50%，
• 然后用 float 或者 inline 使其不换行即可

18、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧 ？

• png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8；
• 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一；
• IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性;
• Firefox下,只能使用 getAttribute()获取自定义属性。解决方法:统一通过 getAttribute()获取自定义属性；
• IE下,even 对象有 x,y 属性,但是没有 pageX,pageY属性；
• Firefox下,event 对象有 pageX,pageY属性,但是没有 x,y 属性。

19、li 与 li 之间有看不见的空白间隔是什么原因引起的(也称幽灵字符)？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了。

20、display:inline-block 间隙问题怎么解决？

移除空格、使用 margin 负值、使用 font-size:0、letter-spacing、word-spacing。

21、display:inline-block 什么时候会显示间隙？

• 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距；
• 非 inline-block 水平元素设置为 inline-block 也会有水平间距；
• 可以借助 vertical-align:top; 消除垂直间隙；
• 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙；
• 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差。

22、css 定义的权重。

权重：
1.从0开始，一个行内style属性+1000;
2.一个id选择器+100;
3.一个属性选择器、class或者伪类+10;
4.一个元素选择器，或者伪元素+1，通配符+0。

23、CSS 优先级算法如何计算？

• 优先级就近原则，同权重情况下样式定义最近者为准；
• 载入样式以最后载入的为准；
• 优先级为: !important > id > class > tag important比内联优先级高。

24、谈谈浮动和清除浮动。

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

1. 父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)

   .clearfloat:after{
   
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0
   }
   .clearfloat{
   zoom:1}

2. 在结尾处添加空 div 标签 clear:both

<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<style>
    .left {
     float:left}
    .clearfloat{
     clear:both}
</style>

3. 父级 div 定义 height；
4. 父级 div 定义 overflow:auto；
5. 父级 div 定义 overflow:hidden；
6. 父级 div 也一起浮动；
7. 父级 div 定义 display:table；
8. 结尾处加 br 标签 clear:both。

参考链接几种常用的清除浮动方法

25、请列举几种隐藏元素的方法。

• visibility: hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；
• opacity: 0 设置 0 可以使一个元素完全透明；
• position: absolute设置一个很大的 left 负值定位，使元素定位在可见区域之外；
• display: none元素会变得不可见，并且不会再占用文档的空间；
• transform: scale(0)将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；
• <div hidden=“hidden”> HTML5 属性,效果和 display:none相同，但这个属性用于记录一个元素的状态；
• height: 0将元素高度设为 0 ，并消除边框；
• filter: blur(0)，将一个元素的模糊度设置为 0，从而使这个元素消失。

26、rgba() 和 opacity 的透明效果有什么不同？

• opacity 作用于元素以及元素内的所有内容（包括文字）的透明度；
• rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果。

27、css 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式。

28、请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局。

29、请写出多种等高布局。

• 在列的父元素上使用这个背景图进行 Y 轴的铺放，从而实现一种等高列的假像；
• 模仿表格布局等高列效果：兼容性不好，在 ie6-7 无法正常运行；
• css3 flexbox 布局： .container{display: flex; align-items: stretch;}。

30、圣杯布局的实现原理？

要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽。
好处：重要的内容放在文档流前面可以优先渲染。
原理：利用相对定位、浮动、负边距布局，而不添加额外标签。

  .container {
   
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
   
      float: left;
      width: 100%;
  }
  .left {
   
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
   
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

31、什么是双飞翼布局？实现原理？

双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局。
原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

.container {
   
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
   
    width: 100%;
    float: left;
}
.main {
   
    margin-left: 150px;
    margin-right: 190px;
}
.