html＋css面试题

HTML部分

1、你做的页面在哪里浏览器测试过吗？这些浏览器的内核分别是什么？

IE：trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用GoogleChrome的Blink内核。
Chrome：Blink（基于webkit，Google与OperaSoftware共同开发）

２、行内元素、块元素和行内块元素都有什么？区别是什么？

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。三者可以互相转换，使用display属性能够将三者任意转换：

1. display:inline;转换为行内元素
2. display:block;转换为块状元素
3. display:inline-block;转换为行内块状元素

行内元素主要有：span,strong, em, label, select, textarea．
特征如下：

1. 设置宽高无效
2. 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
3. 不会自动进行换行

块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。
块状元素特征：

1. 能够识别宽高
2. margin和padding的上下左右均对其有效
3. 可以自动换行
4. 多个块状元素标签写在一起，默认排列方式为从上至下

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

行内块状元素主要有img、input。
特性：

1. 不自动换行
2. 能够识别宽高
3. 默认排列方式为从左到右

3、标签上title属性与alt属性的区别是什么？

title属性为设置该属性的元素提供建议性的信息，alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。

4、请写出至少5个html5新增的标签，并说明其语义和应用场景？

• section：定义文档中的一个章节
• nav：定义只包含导航链接的章节
• header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
• footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
• aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

5、html5有哪些新特性、移除了那些元素？

a. HTML5 主要是关于图像，位置，存储，多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签（header,nav,footer,aside,article,section）

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件，calendar、date、time、email、url、search

移除的元素：

a. 纯表现的元素：basefont，big、u等；

b. 对可用性产生负面影响的元素：frame，frameset等

6、iframe的优缺点？

优点：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点：

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面，不容易管理。

7、设置文字水平居中的属性是？设置标签盒子水平居中的属性是？

设置文字水平居中的属性：text-align:center;
设置标签盒子水平居中的属性：margin:0 auto;

CSS部分

１、谈谈你对CSS布局的理解？

常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。

２、请列举几种可以清除浮动的方法（至少两种）？

为什么要清除浮动？
页面布局的时候子元素不浮动的时候会撑起父盒子的高度，如果浮动了父盒子的高度为0，对后面的页面布局造成影响，所以需要清除浮动。
清浮动的方法：

• 额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div　style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

• 父级添加overflow属性方法

可以给父级添加：overflow为hidden| auto| scroll都可以实现。

优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

• 使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
使用方法：

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

    /* IE6、7 专有 */
    .clearfix {
      *zoom: 1;
    }

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝网、网易等

• 使用双伪元素清除浮动

使用方法：

 .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：小米、腾讯等

３、请列举几种隐藏元素的方法？

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。

b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate。可以继承。

c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。

d. display: none；元素会变得不可见，并且不会再占用文档的空间。

4、css什么属性可以继承？

1、字体系列属性

• font-family：字体系列
• font-weight：字体的粗细
• font-size：字体的大小
• font-style：字体的风格

2、文本系列属性

• text-indent：文本缩进
• text-align：文本水平对齐
• line-height：行高
• word-spacing：单词之间的间距
• letter-spacing：中文或者字母之间的间距
• text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
• color：文本颜色

总结就是和字体以及文本相关的属性可以继承

5、请简述CSS的选择器？

元素选择器：* 、标签选择器、id选择器、类选择器

关系选择器：子集选择器和后代选择器

属性选择器：E[att]、E[att=“val”]等等

伪类选择器：E:link、E:visited、E:hover、E:active E:first-child、E:last-child等

伪对象选择器：E:before和E:after等

6、css选择器的优先级是？

!important>id>类>标签选择器

7、请简述CSS的权重规则？

一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1。

8、CSS中 link 和@import 的区别是什么？

两者都是外部引用 CSS 的方式，但是存在一定的区别：

1. link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
2. link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
3. link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
4. link支持使用Javascript控制DOM改变样式；而@import不支持。

9、定位有几种？有什么区别？

• 静态定位：positive:static;静态定位是元素的默认定位方式，无定位的意思。它相当于 border
  里面的none，不要定位的时候用。
• 相对定位：positive:relative;它是参照它在页面中原来的位置进行移动的。原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
• 绝对定位：position:absolute;它是相对于距离它最近的有定位的父元素进行移动的。完全脱标，完全不占位置；父元素没有定位，则以浏览器为准定位（Document 文档）。
• 固定定位：position:fixed;它是相对于页面的位置进行移动的。

注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。

10、如何让一个盒子水平垂直居中？

已知宽高

<style>
    .div1 {
      width: 400px;
      height: 400px;
      background-color: #3366FF;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -200px;
    }
  </style>
  <div class="div1"></div>

未知宽高
方法一：

<style>
    .div1 {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      border: 1px solid #000;
      background-color: #CCFF33;
      width: 400px;
      height: 400px;
    }
  </style>
  <div class="div1"></div>

方法二：

<style>
    .div1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
      width: 400px;
      height: 400px;
      background-color: #33CCFF;
    }
  </style>
   <div class="div1"></div>

11、请描述一下cookies，sessionStorage和localStorage的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

12、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码？

方法１：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .div1 {
      width: 100px;
      height: 200px;
      background-color: #ccc;
      float: left;
    }

    .div2 {
      background-color: #ff0;
      margin-left: 100px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="div1"></div>
  <div class="div2"></div>
</body>

</html>

方法２:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .div {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .div1 {
      flex-basis: 100px;
      background-color: #ccc;
      height: 300px;
    }

    .div2 {
      background-color: #66FF33;
      height: 300px;
      flex-grow: 1;
    }
  </style>
</head>

<body>
  <div class="div">
    <div class="div1"></div>
    <div class="div2"></div>
  </div>
</body>

</html>

11、如何解决跨域问题？

JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面

1、JSONP

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

2、CORS

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

3、通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

主域相同的使用document.domain

4、使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

13、前端如何优化网站性能？

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的 请求数量可以很大程度上对网站性能进行优化。

可以通过精灵图、合并css和js文件、懒加载等方式来减少http请求。
CSS Sprites

国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用 lazyLoad

俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

2、控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。
一般情况下都是CSS在头部，JS在底部。

3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

4、减少 DOM 操作（vue这种减少操作DOM）

5、图标使用 IconFont 替换image标签

14、说一下你对css盒子模型的理解？

图中最内部的框是元素的实际内容，也就是元素框， 紧挨着元素框外部的是内边距padding， 其次是边框（border）， 然后最外层是外边距（margin），整个构成了框模型。

通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。 而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

box-sizing:border-box;和box-sizing:content-box;的区别如下：

• content-box是先根据设定的样式确定元素content的宽高，有border和padding的情况下再额外增加盒子的宽高，内容宽高不受影响，设定多少就是多少。
• border-box是先根据设定的样式固定盒子的宽高，如果有border和padding的情况下，再根据盒子的宽高减去border或者padding，内容的宽高会受到影响，会被减去border或者padding。

15、解释下 CSS sprites原理，优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，

再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，

background-position可以用数字精确的定位出背景图片的位置。

优点：

a. 减少网页的http请求

缺点：

a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂

b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置

c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

16、css盒子的margin中的合并和塌陷问题如何解决？

外边距塌陷:

当嵌套的两个块元素,给子盒子加向上的外边距时,父盒子会跟着掉下来,此时就是外边距塌陷.
解决方案:
1.给父盒子加padding
2.给父盒子加上边框
3.给父元素加overflow:hidden 属性

嵌套盒子垂直外边距合并方案:
给父亲上边框
border: 1px solid transparent
给父亲内边距
padding-top: 1px;
给父元素 添加 overflow: hidden
子元素 添加 position:absolute/relative 或 float

17、如何用css绘制一个实心三角？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .triangle {
      width: 0;
      height: 0;
      border: 100px solid transparent;
      border-top: 100px solid blue;
      /*这里可以设置border的top、bottom、left、
right四个方向的三角*/
    }
  </style>
</head>
<body>
  <div class="triangle"></div>
</body>
</html>

18、css3新增属性？

border-radius 圆角
border-shadow 盒子阴影
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景显示原点
text-shadow 文字阴影
text-overflow 文字隐藏的方式 裁剪/省略号
box-sizing
transform 变换 转换
animation 动画
transition 过渡动画
媒体查询 @media

19、px，em，rem的区别？

px像素（Pixel）。
相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
PX特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem。
em是相对长度单位。
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，
这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em,
也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em特点

em的值并不是固定的；
em会继承父级元素的字体大小。 所以我们在写CSS的时候，需要注意两点：
body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em， 那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em， 它因继承#content的字体高而变为了1em=12px。
rem特点
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。

20、display：inline-block什么时候会出现间隙？及解决办法。

出现间隙：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      overflow-x: auto;
      background: #fff;
      white-space: nowrap;
    }

    .box span {
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #f00;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="box">
    <span>111</span>
    <span>111</span>
    <span>111</span>
    <span>111</span>
  </div>
</body>
</html>

解决方法：
方法一： 元素之间不换行，代码如下：

<div class="box">
    <span>111</span><span>111</span><span>111</span><span>111</span>
  </div>

方法二： 给其父元素设置font-size:0;给其自身设置实际需要的字号大小。
方法三： 负margin方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值。

21、css3的伸缩盒子？

https://www.cnblogs.com/landuo629/p/12500201.html

22、css预处理器？

https://zhuanlan.zhihu.com/p/63920577

23.浏览器兼容性？

前端浏览器兼容性问题总结

浏览器兼容性问题解决方案 · 总结

24.css hack？

https://blog.csdn.net/freshlover/article/details/12132801

25.重置css(Reset CSS)

https://meyerweb.com/eric/tools/css/reset/