作者：樱桃小丸子儿

链接：https://www.jianshu.com/p/abadcc84e2a4

HTML&CSS

img的alt和title的异同？

**alt **是图片加载失败时，显示在网页上的替代文字；

**title **是鼠标放上面时显示的文字,title是对图片的描述与进一步说明;

这些都是表面上的区别，alt是img必要的属性，而title不是。

对于网站seo优化来说，title与alt还有最重要的一点：

搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。

简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

html5新元素？

HTML5 中一些有趣的新特性：

①用于绘画的 canvas 元素；

②用于媒介回放的 video 和 audio 元素；

③对本地离线存储的更好的支持；

④新的特殊内容元素，比如 article、footer、header、nav、section；

⑤新的表单控件，比如 calendar、date、time、email、url、search"

以上是w3c上的原话，简单说就是更符合标准，提供更多功能支持；更加规范，可读性更强，性能有提升，实现功能更加简单方便，就像手机一样，高版本的功能多一些。

更详细请看html5新元素

CSS层叠是什么？介绍一下

CSS就是层叠式样式表（Cascading Style Sheets）的简称,CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式，还可以多次定义自己的样式，全部样式按照从外到内、由先到后的顺序叠加起来，如果不发生冲突，则全部样式都有效，重复定义冲突时按照内层优先、后定义优先的原则进行覆盖，即内层子元素覆盖父元素样式、后定义的覆盖先定义的样式。

CSS实现垂直和水平居中

这是一道经典的问题，实现方法也有很多种，以下是其中一种实现：

具体方案说明：

①使用绝对定位left:50%与margin-left取宽度值一半的复数形式设置水平居中。

②使用绝对定位top:50%与margin-top取高度值一半的复数形式设置垂直居中

HTML结构：

<div class="box1">
 <div class="content"></div>
 </div> 

CSS代码：

.box1 {
 position: relative;
 width: 600px;
 height: 600px;
 background-color: red;
 }
 .content{
 background-color:pink;
 width:200px;
 height:200px;
 position: absolute; 
 //父元素相对定位,使子元素相对父元素定位
 top: 50%;
 left: 50%;
 margin-top:-100px ; 
 //二分之一的height，width
 margin-left: -100px;
 } 

什么是CSS Hack?

针对不同的浏览器写不同的CSS,就是 CSS Hack。

详情请看以下链接

CSS hack大全&详解（什么是CSS hack）

你知道哪些CSS浏览器兼容性问题。

CSS 多浏览器兼容性问题及解决方案

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，是绝对单位，类似的还有pt（磅，1pt=1/72英寸）、pc（皮卡，1pc=12pt）、mm（毫米）、cm（厘米）、in（英寸）绝对单位指定是多少就是多少，计算比较容易。

em的值不是固定的，它是相对单位，em是指当前默认字号大小（继承父元素默认字号）的倍数，可根据父元素字号的改变而自动调整。例如2em是当前字号的2倍，若父元素或默认字号为12pt,则2em就是24pt。类似的还有ex,ex是当前字号高度值（通常是字体尺寸一半）的倍数。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

HTML5离线存储

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

说说你对语义化的理解

①去掉或者丢失样式的时候能够让页面呈现出清晰的结构；

②有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

③方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

④便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

描述一段语义的HTML代码

（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则）

 < div id="header"> < h1>标题< /h1> 
< h2>专注Web前端技术< /h2>
 < /div>

如何居中div？

给div设置一个宽度，然后添加margin:0 auto属性

div{width:200px; margin:0 auto; }

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

①

block 像块类型元素一样显示。

none 缺省值。像行内元素类型一样显示。

inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。

**list-item **像块类型元素一样显示，并添加样式列表标记。

②

absolute

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素（浏览器窗口）定位。

fixed

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative

relative生成相对定位的元素，相对于其原来所在的文档流中的位置进行定位。

static

static 默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）

对BFC规范的理解

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

描述CSS Reset的作用和用途。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。

最简化的CSS Reset

*{
outline:0;
padding:0;
margin:0;
border:0;
}

CSS定义的权重

CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。

理解选择器的特殊性很重要，特别是在修复bug的时候，但是要尽量避免使用。

CSS选择器的权重与优先规则

CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

? static 自动定位，自动定位就是元素在页面普通文档流中由HTML自动定位，普通文档里中的元素也称为流动元素。不能通过z-index进行层次分级。

? relative 相对定位，相对定位不脱离文档流，参考其在原来文档流中的位置，通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

? absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位（绝对、相对或固定定位）的父元素，通过 top,bottom,left,right 定位。当父级 position 为 static 时，absolute元素将依据body根元素（浏览器窗口）进行定位，可以通过z-index进行层次分级。

? fixed 固定定位，固定定位与父元素无关（无论父元素是否定位），直接根据浏览器窗口定位，且不随滚动条拖动页面而滚动，可通过z-index进行层次分级。

CSS中margin和padding的区别

margin是外边距，属于元素之外，相邻元素的margin可以融合。

padding是内边距，在元素之内，相邻元素的padding不可融合。