html&&css面试题（1）

1，什么是盒模型？计算元素尺寸时从哪部分开始计算？

一个html元素，从里到外分为4个部分，内容盒(content)，内间距(padding)，边框(border)，外间距(margin)。
默认情况下，给元素设置的宽高，是内容盒的宽高，不包含边框与内间距。
通过box-sizing设置计算方式，默认为content-box，计算内容盒，可以设置为border-box,计算到边框盒。

2，块元素，行元素，行内块元素分别有哪些？他们有什么不同？

• 块元素：独占一行，可以设置宽高。标签：div，p，h1—h6。
  如果不设置宽高，宽度就继承父元素的宽度，高度是0。如果有内容，高度就是内容的高度。
• 行元素：不能设置宽高，宽高取决于元素本身的内容。
  多个元素占用一行，到最后会自动换行。标签：a，b。
• 行内块元素：既有行元素的特性，也有块元素的特性。标签：bottom，img，input。可以为元素设置宽高，不独占一行，多个行内块会左右排列。

图片（img）下方会占据一些空白，怎么消除？
父元素font-size设置为0

3，css水平、垂直居中的写法，请至少写出3种？

3.1，水平居中

• 行内元素: text-align: center
• 块级元素: margin: 0 auto
• position:absolute +left:50%+ transform:translateX(-50%)
• display:flex + justify-content: center

3.2，垂直居中

• 设置line-height 等于height
• position：absolute +top:50%+ transform:translateY(-50%)
• display:flex + align-items: center
• display:table + display:table-cell + vertical-align: middle;

4，1rem、1em、1vh、1px各自代表的含义？

• rem：是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
• em：子元素字体大小的em是相对于父元素字体大小。元素的width/height/padding/margin用em的话是相对于该元素的font-size。
• vw/vh：相当于屏幕宽度和高度的1%，
• px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

5，说出几种元素定位的方式

• 5.1，默认定位：position:static，采用流式布局，不能通过top等样式来设置位置。
• 5.2，相对定位：position:relative，元素还在流式文档中，通过top等属性进行样式的微调。
• 5.3，绝对定位：position:absolute，元素脱离文档流，不在参与父元素的流式布局，不在撑开父元素。
• 5,4，固定定位：position:fixed，脱离文档流。当对于根标签进行定位时，页面滚动时不随着页面的滚动而滚动。
• 5.5，sticky，粘性定位，可实现动态fixed。

6，清除浮动的方法（最少2种）

（1）在最后一个浮动标签后，新加一个标签，给其设置clear：both；
（2）父级添加overflow属性（父元素添加overflow:hidden）
（3）使用after伪元素清除浮动（推荐使用）；
（4）使用before和after双伪元素清除浮动。

7，Css选择器有哪些？各个选择器的优先级顺序是什么？

（1）Id选择器（ # myid）
（2）类选择器（.myclassname）
（3）标签选择器（div, h1, p）
（4）相邻选择器（h1 + p）
（5）子选择器（ul > li）
（6）后代选择器（li a）
（7）通配符选择器（ * ）
（8）属性选择器（a[rel = “external”]）
（9）伪类选择器（a:hover, li:nth-child）
!important>id>class>属性选择器>标签选择器

问：Less/SCSS比css高级到哪了？
答：增加了变量，函数，混入，嵌套等功能。

8，HTML5新特性

广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。
（1）语义化标签：<header>，<footer>，<nav>，
（2）音频标签：<audio>，视屏标签：<video>
（3）Canvas绘图，

Css3中新增了：圆角，阴影，滤镜，vwvh单位，flex布局，媒体查询，过度和动画，伪类。

webAPI
（4）地理定位：使用getCurrentPosition()方法来获取用户的位置。
（5）拖放api，
（6）Web Worker：创建一个独立工作的线程，在主线程之外运行。
（7）WebSocket协议：为web应用程序客户端和服务端之间提供了一种全双工通信机制。
（8）Web Storage：客户端存储数据。它有2个对象：localStorage ，sessionStorage，两者之间的区别？

• sessionStorage，针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除；
• localStorage：没有时间限制的数据存储。

9，Css新特性

（1）CSS3圆角 border-radius
（2）盒阴影 box-shadow
（3）边框图像 border-image
（4）CSS3渐变
（5）CSS3过渡

10，元素消失的方案

• (1)Visibility:hidden；元素隐藏但保留位置，
• (2)display: none；元素隐藏且不保留位置。

11，怎样实现在动画结束之后执行一段代码？

过度动画：监听transitionend事件。
关键帧动画：监听animationend事件。
Js动画：1，手写js动画时，直接在停止动画的代码之后添加要执行的代码，如果使用js动画工具库，则把要执行的代码写在动画结束时的回调函数中。

12，你对响应式页面的理解？

能够根据不同的浏览器尺寸，显示不同的布局方式。依赖媒体查询实现。

13，什么是元素外间距重叠？哪种情况下会产生外间距重叠？

流式布局中块元素的上下外间距会产生重叠。

14，前端开发中实现动画有几种方式？其各自的特点是什么？

1：css过渡，2：css关键帧动画，3：js动画，4：canvas动画。
从动画执行效率上对比：canvas>css过渡>css关键帧动画>js动画。
从动画功能上对比：canvas=js动画>css关键帧动画>css过渡。
Canvas动画最优秀，但是开发成本高。

15，::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。

伪元素在css1中已经存在，当时用单冒号；css3时做了修订用双冒号，并且伪元素不允许再支持旧的单冒号的写法。(伪元素由双冒号和伪元素名称组成)。

区别：
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。
伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

作用：在元素前面（::before）和后面（::after）加内容

16，常用的浏览器有哪些？他们分别是什么内核？

1，chrome、safari属于webkit内核。
2，老IE(10和10以下) 属于Trident内核。
3，firefox属于Gecko内核。
4，新IE属于Edge内核。
5，360等特殊浏览器：多内核浏览器。

17，什么是HTML语义化？HTML语义化的好处是什么？

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。