前端面试题 -- HTML+CSS

doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义 DTD来解析文档. <!DOCTYPE>声明必须是HTML文档的第一行，位于html标签以前
HTML5 不基于 SGML，因此不须要引用 DTD。在 HTML5 中 <!DOCTYPE> 只有一种

SGML: 标准通用标记语言,是现时经常使用的超文本格式的最高层次标准

<h5 id='l2'>2. 行内元素有哪些，块级元素有哪些，空(void)元素有那些</h5>

行内元素：a span i img input select b 等

块级元素：div ul ol li h1~h6 p table 等

空元素：br hr link 等

<h5 id='l3'>3. 简述一下你对HTML语义化的理解</h5>

简单来讲，就是合适的标签作合适的事情，这样具备如下好处：

有助于构架良好的HTML结构，有利于搜索引擎的创建索引、抓取，利于SEO
有利于不一样设备的解析
有利于构建清晰的机构，有利于团队的开发、维护

<h5 id='l4'>4. 常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解</h5>

Trident 内核： IE
Gecko 内核：NETSCAPE6 及以上版本，火狐

Presto 内核：Opera7 及以上。[Opera 内核原为：Presto，现为：Blink;]

Webkit内核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]

浏览器内核又能够分红两部分：渲染引擎和JS引擎。 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，JS引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

<h5 id='l5'>5. html5有哪些新特性</h5>

语义化标签: header footer nav section article aside 等
加强型表单：date(从一个日期选择器选择一个日期) email(包含 e-mail 地址的输入域) number(数值的输入域) range(必定范围内数字值的输入域) search(用于搜索域) tel(定义输入电话号码字段) 等
视频和音频：audio video
Canvas绘图 SVG绘图
地理定位：Geolocation
拖放API：drag
web worker：是运行在后台的 JavaScript，独立于其余脚本，不会影响页面的性能
web storage: localStorage sessionStorage
WebSocket: HTML5 开始提供的一种在单个 TCP 链接上进行全双工通信的协议

<h5 id='l6'>6. 描述一下 cookie，sessionStorage 和 localStorage 的区别</h5>

特性	Cookie	localStorage	sessionStorage
生命周期	可设置失效时间，没有设置的话，默认是关闭浏览器后失效	除非被手动清除，不然将会永久保存	仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
存放数据大小	4KB左右	能够保存5MB的信息
http请求	每次都会携带在HTTP头中，若是使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通讯

<h5 id='l7'>7. 如何实现浏览器内多个标签页之间的通讯</h5>

使用 localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
websocket协议
webworker

多个标签页之间的通讯

<h5 id='l8'>8. HTML5的离线存储怎么使用，解释一下工做原理</h5>

HTML5的离线存储

<h5 id='l9'>9. src与href的区别</h5>

区别：src 用于替代这个元素，而 href 用于创建这个标签与外部资源之间的关系

<link href="style.css" rel="stylesheet" />浏览器加载到这里的时候，html 的渲染和解析不会暂停，css 文件的加载是同时进行的

<script src="script.js"></script>当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件

<h5 id='l10'>10. 表单提交中Get和Post方式的区别</h5>

Get 通常用于从服务器上获取数据，Post 向服务器传送数据
Get 传输的数据是拼接在Url以后的，对用户是可见的；Post 的传输数据对用户是不可见的
Get 传送的数据量较小，不能大于 2KB。Post 传送的数据量较大，通常被默认为不受限制
Get 安全性很是低，Post 安全性较高
在 FORM 提交的时候，若是不指定 Method，则默认为 Get 请求

CSS

<h5 id='c1'>1. css盒子模型，box-sizing属性的理解</h5>

css 的盒模型由 content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定

box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：

box-sizing: content-box|border-box|inherit:

content-box 使得元素的宽高即为内容区的宽高(默认模式)
border-box: 计算方式content + padding + border = 自己元素大小，即缩小了content大小
inherit 指定 box-sizing 属性的值，应该从父元素继承

<h5 id='c2'>2. 清除浮动，何时须要清除浮动，清除浮动都有哪些方法</h5>

浮动的元素是脱离文档标准流的，若是咱们不清楚浮动，那么就会形成父元素高度塌陷，影响页面布局。

清除浮动的方式：

为父元素设置高度
为父元素添加overflow:hidden
伪元素

.fix::after { 
     content:""; 
     display:block; 
     clear:both;
}

使用伪元素的好处：不增长冗余的 DOM 节点，符合语义化

overflow: hidden 能够触发 BFC 机制。
BFC：块级格式化上下文，建立了 BFC 的元素就是一个独立的盒子，它规定了内部如何布局，而且与这个独立盒子里的布局不受外部影响，固然它也不会影响到外面的元素，计算BFC的高度时，浮动元素也参与计算

<h5 id='c3'>3. 如何让一个不定宽高的盒子水平垂直居中</h5>

定位的方式

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

css3属性

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex布局

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

<h5 id='c4'>4. px和em和rem的区别</h5>

px: 像素，相对长度单位。像素 px是相对于显示器屏幕分辨率而言的
em的值并非固定的，会继承父级元素的字体大小，表明倍数

rem的值并非固定的，始终是基于根元素 <html> 的，也表明倍数

<h5 id='c5'>5. position的值有哪些</h5>

static：默认值。没有定位，元素出如今正常的流中
relative（相对定位）：生成相对定位的元素,相对于其正常（原先自己）位置进行定位

absolute（绝对定位）：生成绝对定位的元素，相对于static定位之外的第一个父元素进行定位

fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

<h5 id='c6'>6. display:none与visibility：hidden的区别</h5>

区别	display:none	visibility：hidden的
是否占据空间	不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）	该元素空间依旧存在
是否渲染	会触发reflow（回流），进行渲染	只会触发repaint（重绘），由于没有发现位置变化，不进行渲染
是不是继承属性	不是继承属性，元素及其子元素都会消失	是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出

<h5 id='c7'>7. CSS中link 和@import的区别</h5>

link属于 XHTML标签， @import彻底是 CSS提供的一种方式,只能加载 CSS
加载顺序的差异，当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面所有被下载完再被加载

兼容性的差异。因为@import是CSS2.1提出的因此老的浏览器不支持，而link标签无此问题

当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import不是dom能够控制的

<h5 id='c8'>8. 什么是响应式设计，响应式设计的基本原理是什么</h5>

响应式网站设计是一个网站可以兼容多个终端，而不是为每个终端作一个特定的版本。基本原理是经过媒体查询检测不一样的设备屏幕尺寸作处理

<h5 id='c9'>9. 为何要初始化CSS样式</h5>

由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对 CSS 初始化每每会出现浏览器之间的页面显示差别
初始化样式会对 SEO 有必定的影响

<h5 id='c10'>10. CSS3有哪些新特性</h5>

实现圆角border-radius，阴影box-shadow，边框图片border-image
对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
增长了更多的CSS选择器、多背景、rgba()
惟一引入的伪元素是::selection；
实现媒体查询@media，多栏布局flex
过渡transition 动画animation

<h5 id='c11'>11. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的做用</h5>

单冒号(:)用于 CSS3伪类，双冒号(::)用于 CSS3伪元素。（伪元素由双冒号和伪元素名称组成）,双冒号是在当前规范中引入的，用于区分伪类和伪元素

<h5 id='c12'>12. CSS优化、提升性能的方法有哪些</h5>

移除空的css规则（Remove empty rules）
正确使用display的属性
不滥用浮动、web字体
不声明过多的font-size
不在选择符中使用ID标识符
遵照盒模型规则
尽可能减小页面重排、重绘
抽象提取公共样式，减小代码量

<h5 id='c13'>13. 重绘和回流</h5>

重绘和回流

<h5 id='c14'>14. flex布局</h5>

flex布局教程--阮一峰

<h5 id='c15'>15. css预处理器</h5>

提供了一种css的书写方式，常见的就是 SAAS文档和 LESS文档

后记

这里只是前端面试题的一部份内容，后面会不断更新

了解更多前端片断，有兴趣的小伙伴能够点击这里，欢迎 star 关注