布局：静态布局、响应式布局、HTML实体、hasLayout、web安全色

1.什么是静态布局

即 Static Layout。传统的 web 设计，网页中所有元素的尺寸一律使用 px 作为单位。

布局特点在于：无论浏览器尺寸为多少，布局始终按照最初的设计稿布局来显示。常规的 PC 网站都是使用的静态(定宽高)布局，如果浏览器小于这个宽度则出现滚动条，如果浏览器大于这个宽度则内容居中或添加背景。这些设计方式是最常见的。

在 PC 中，居中布局，所有样式使用一个绝对宽度(定宽)适配当今主流屏幕宽度。在移动设备中，另外建立移动网站，单独设计一个布局，使用不同的域名。

这种布局方案对于 UI 设计和前端开发人员来说都是最简单、没有兼容性问题的。但缺点显而易见，需要做两次开发。当前大部分门户网站、企业宣传站点都采用了这种布局方式。

2.什么是自适应布局？什么是响应式布局

自适应布局即 Adaptive Layout，可以把自适应布局看作是静态布局的一个系列。其特点就是分别为不同屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，改变分辨率可以切换不同的静态布局，页面元素位置发生改变，元素不随窗口大小的调整而变化。

布局特点在于：屏幕分辨率变化时元素位置发生变化，尺寸不变。

响应式布局：
即 Responsive Layout，其目标是确保一个页面在所有终端(各种尺寸的 PC、手机、电视等)都能完美展现，对于开发人员来说通常是结合了流式布局+弹性布局+媒介查询。分别为不同屏幕分辨率定义布局。

其特点在于：每个屏幕分辨率都会有一个布局样式，元素位置、尺寸都会随之发生改变。使用多种布局方式配合。但缺点在于：媒介查询有限，只能适应主流宽高，需要匹配足够多的屏幕大小工作量巨大，设计和开发都需要多个版本。

3.对比各种布局方式的特点

原理其实类似，都是检测设备，根据不同的设备采用不同的 CSS，而且 CSS 都是采用百分比的方式。
不同点在于：

• 响应式的模板在不同的设备上看上去不同，会随着设备的改变而改变表现样式，常用于解决不同设备间分辨率的兼容。
• 自适应则是所有设备看起来都是一个模板，不过就是元素长度、图片尺寸变化。
• 流式则是采用了一些设置，当宽度大于多少时怎样展示，小于多少时怎样展示，并且，展示方向像水流一样一部分一部分的加载。常用于解决分辨率差异较小的情况。
• 静态即采用固定宽度。

4.文字超出了元素的宽度如何使用 CSS 处理

可以使用 word-wrap 配合 word-break 属性进行处理

5.内外边距取值 1 个、2 个、3 个、4 个参数分别代表什么意思

• 1 个值：表示上右下左
• 2 个值：表示上下 左右
• 3 个值：表示上 左右 下
• 4 个值：表示上 右 下 左

6.处理长度不固定的元素居中方案

1.使用 flex-box
2.ele{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

7.在工作中如何使用伪类的？列举一些常用的伪类以及用途

1.快速选择到父元素中某一个子级元素
2.制作小图标 icon
3.清除浮动
4.使用:not()排除一些不想选择的元素
5.使用:nth-child(3n)可以快速实现"每 N 个元素 XX 效果"

8.列举 flex 布局在实际项目里的使用，它能很方便的帮你做一些什么事情

flex 是根据主轴和交叉轴的方向来对元素进行排列，在固定宽高的情况下可以很方便的帮助我们进行布局、居中、控制对齐方式

9.如何将大量可变化的图片显示到页面并不影响浏览器性能

使用图片懒加载。将页面中未出现在可视区域的图片先不做加载，等滚动到可视区域后，再加载

10.什么是 HTML 实体

即：对当前文档的编码方式不能包含的字符提供一种转义展示。例如对于">“符号，它是 HTML 元素的一部分，如果要在文档中显示就需要进行转义为”&gt"

11.什么是全局属性，列举两个全局属性

全局属性 Global Attribute 指全部元素都能使用的通用属性，与之对应的是局部属性 Local Attribute。
class、contenteditable、onclick、data-*都是全局属性。

12.什么是 hasLayout？触发 hasLayout 会有什么后果

hasLayout 是微软的一个私有概念，类似于 BFC，能够运行在早期 IE6、7 中，但在 IE8+已被抛弃。在早期 IE 浏览器中，元素会被分为:拥有布局(hasLayout)和没有布局，拥有布局的元素就可以控制自己内容的尺寸和位置，没有布局的元素需要由最近的拥有布局的祖先元素代劳。

IE6 中很多 bug 都是由于元素没有布局所引起的，例如浮动元素会拥有双倍外边距。可以通过定义特定的属性来触发 hasLayout：
1.float 为 left 或 right
2.position 为 absolute
3.width height 不为 auto
4.zoom 不为 normal

13.什么叫 web 安全色

在过去，显示器性能比较落后最多支持 256 种颜色，其中 40 种被操作系统作为了保留色，剩下 216 种就是安全色。
安全色就是指在各种平台下显示效果与预期一致，如果不是安全色，那么操作系统可能在处理颜色时产生抖动(混合几种颜色，模拟出系统设置没有的颜色)，这样就会造成颜色在不同平台中显示出色差。