03HTML和CSS知识点总结（三）

[目录]

1、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素（block）特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制
行内元素（inline）特性：和相邻的内联元素在同一行；宽度（width）、高度（hight）、内边距的top/bottom（padding-top/padding-bottom）和外边距的top/bottom（margin-top/margin-bottom）都不可改变，padding和margin的left和right属性可以改变

2、浏览器的默认inline-block元素有哪些？

input、img、button、textera、label
（inline-block属性是拥有内在尺寸，可设置高宽，但不会换行）

3、什么是外边距重叠？重叠的效果是什么？

外边距重叠就是margin-collapse，在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距
折叠的结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个相邻的外边距一正一负时，折叠的结果是两者相加的和

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

rgba()和opacity都能实现透明效果

rgba()只作用于元素的颜色或其背景色（rgba设置透明的元素的子元素不会继承透明效果）
opacity作用于元素，以及元素内的所有内容的透明度

5、CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing（同时这个属性可以消除line-block元素间的换行符空格间隙问题）

6、如何垂直居中一个浮动元素？

//方法一：已知元素的高宽
#div{
    background-color: #666666;
    width: 200px;
    height: 200px;
    position: absolute;//父元素需要相对定位
    top:50%;
    left:50%;
    margin-top: -100px;//二分之一的height，width
    margin-left: -100px;
}

//方法二：未知元素的高度
#div1{
    width: 200px;
    height: 200px;
    background-color: #666666;
    margin: auto;
    position: absolute;//父元素需要相对定位 
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

//补充：用简便的方法使一个img元素居中
#contaniner{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

7、px和em的区别是什么？

px和em都是长度单位，区别是：px的值是固定的，指定是多少是多少，计算比较容易，em的值是不固定的，并且em会继承父级元素的字体大小

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

8、描述一个“reset”的CSS文件，它的使用方法是什么？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。使用重置样式是因为不同的浏览器对一些元素有不同的默认样式，如果不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的情况发生。

例如：normalize.css可以代替重置样式文件，它没有重置所有的样式风格，但仅提供了一套合理的默认样式值，既能让众多浏览器达到一致和合理，但又不扰乱其他的东西

9、Sass、Less是什么？为什么要使用它们？

它们是CSS预处理器，它们是CSS上的一种抽象层，它们是一种特殊的语法/语言编译成CSS。例如：Less是一种动态样式语言，将CSS赋予了动态语言的特性，如变量，继承，运算，函数。Less既可以在客户端上运行（支持IE6+、Webkit、Firefox），也可以在服务器端运行（借助Node.js）
它们结构清晰，便于扩展，可以方便地屏蔽浏览器私有语法差异，这个不多说，封装对浏览器语法差异的反复处理，减少无意义的机械劳动，可以轻松的实现多重继承，完全兼容CSS代码，可以方便地应用到老项目中。Less只是在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译

10、display:none与visibility:hidden的区别是什么？

display：隐藏对应的元素但不挤占该元素原来的空间
visibility：隐藏对应的元素并且挤占该元素原来的空间
使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”；而使用visibility:hidden属性后，HTML元素仅仅是在视觉上看不见，而它所占据的空间位置仍然存在

11、CSS中link和@important的区别是什么？

link属于HTML标签，而@important是CSS中提供的，在页面加载的时候，link会同时被加载，而@important引用的CSS会在页面加载完成后才会加载引用的CSS。@important只有在IE5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题，link引入样式的权重大于@important的引用（@important是将引用的样式导入到当前的页面中）

12、盒子模型是什么？

CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型，盒模型包括：内容、内边距、外边距（一般不计入盒子实际宽度）、边框。IE盒子模型的宽度包括：内容、内边距、边框；标准的W3C盒子模型包括：内容

13、实现不使用 border 画出 1 px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>

14、title与h1的区别是什么？

title 属性没有明确意义只表示是个标题
h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响

15、<img>的 title 和 alt 有什么区别？

title通常当鼠标滑动到元素上的时候显示
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片的可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析

16、Canvas 和 SVG 有什么区别？

Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真

17、网页验证码是干嘛的？

区分用户是计算机还是人的公共全自动程序，可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户特定程序暴力破解方式进行不断的登录尝试

18、 attribute 和 property 的区别是什么？

attribute 是 dom 元素在文档中作为 html 标签拥有的属性
property 就是 dom 元素在 js 中作为对象拥有的属性
对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的

19、对web标准、可用性、可访问性是什么？

可用性：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力
可访问性：web内容对于残障用户的可阅读和可理解性
可维护性：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能

20、IE各版本和Chrome可以并行下载多少个资源？

IE6 2 个并发
iE7 升级之后的 6 个并发，之后版本也是 6 个
Firefox，chrome 也是6个

21、Flash、Ajax 各自的优缺点，在使用中如何取舍？

Flash：
- Flash 适合处理多媒体、矢量图形、访问机器
- 对 CSS、处理文本上不足，不容易被搜索
Ajax：
- Ajax 对 CSS、文本支持很好，支持搜索
- 多媒体、矢量图形、机器访问不足
共同点：
- 与服务器的无刷新传递消息
- 可以检测用户离线和在线状态
- 操作 DOM

22、怎么重构页面？

编写CSS；让页面结构更合理化，提升用户体验；实现良好的页面效果和提升性能

23、浏览器架构是什么样的？

*用户界面
    *主进程
    *内核
        *渲染引擎
        *JS引擎
            *执行栈
        *事件触发线程
            *消息队列
                *微任务
                *宏任务
        *网络异步线程
        *定时器线程

24、常用的 meta 标签

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词
标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对

 1、<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
 2、<head lang=”en”> 标准的 lang 属性写法
 3、<meta charset=’utf-8′>    声明文档使用的字符编码
 4、<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome
 5、<meta name=”description” content=”不超过150个字符”/>       页面描述
 6、 <meta name=”keywords” content=””/>      页面关键词者
 7、<meta name=”author” content=”name, [email protected]”/>    网页作
 8、<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
 9、<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
 10、<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
 11、<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）
 12、 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
 13、添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
 <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
 14、<meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色
 15、<meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit)
 16、<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
 17、<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码
 18、<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
 19、<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器
 20、<meta name=”screen-orientation” content=”portrait”>   uc强制竖屏
 21、<meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏
 22、<meta name=”full-screen” content=”yes”>              UC强制全屏
 23、<meta name=”x5-fullscreen” content=”true”>       QQ强制全屏
 24、<meta name=”browsermode” content=”application”>   UC应用模式
 25、<meta name=”x5-page-mode” content=”app”>    QQ应用模式
 26、<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光
 27、设置页面不缓存
 <meta http-equiv=”pragma” content=”no-cache”>
 <meta http-equiv=”cache-control” content=”no-cache”>
 <meta http-equiv=”expires” content=”0″>

25、css reset 和 normalize.css 有什么区别？

css reset 是最早的一种解决浏览器间样式不兼容问题的方案，它的基本思想是将浏览器的所有样式都重置掉，从而达到所有浏览器样式保持一致的效果。但是使用这种方法，可能会带来一些性能上的问题，并且对于一些元素的不必要的样式的重置，其实反而会造成画蛇添足的效果
normalize.css ，它的思想是尽量的保留浏览器自带的样式，通过在原有的样式的基础上进行调整，来保持各个浏览器间的样式表现一致。相对与 css reset，normalize.css 的方法保留了有价值的默认值，并且修复了一些浏览器的 bug，而且使用 normalize.css 不会造成元素复杂的继承链

26、用于预格式化文本的标签是？

预格式化就是保留文字在源码中的格式最后显示出来样式与源码中的样式一致所见即所得。

<pre> 定义预格式文本，保持文本原有的格式

27、DHTML 是什么？

DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。 DHTML 实现了网页从 Web 服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。

包括：

动态内容（Dynamic Content）：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等
动态排版样式（Dynamic Style Sheets）：W3C 的 CSS 样式表提供了设定 HTML 标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式

28、head 标签中必不少的是？

<head>>标签用于定义文档的头部，它是所有头部元素的容器。<head>> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供
元信息等等.文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>
<title>定义文档的标题，它是 head 部分中唯一必需的元素

29、HTML5 新增的表单元素有？

datalist 规定输入域的选项列表，通过 option 创建
keygen 提供一种验证用户的可靠方法，密钥对生成器，私钥存于客户端，公钥发到服务器，用于之后验证客户端证书
output 元素用于不同类型的输出

30、在 HTML5 中，哪个方法用于获得用户的当前位置？

getCurrentPosition()

参考：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Html/Html.md