【无标题】

   1.   简述一下你对HTML语义化的理解？

1.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

2.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

3.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

  2. 移动端和PC端有什么区别？

1. 界面布局: 移动端屏幕相对窄小，一般是单列显示，最多也只能是双列+响应式，但是PC端的屏幕大，布局可以更加灵活。

2. 使用习惯:移动端的操作尺度比较大，单击误差大，所以按钮、链接等元素比较设计的大一些。而PC端的操作尺度比较小，用鼠标单击是一件比较准确的事情，所以在设计按钮或者链接等样式时可以稍微小一些。

3. 网络速度:手机的网络一般是2G\3G\4G\WIFI等，网页的加载速度会影响用户的体验，需要消耗用户的流量，而PC的网络一般是连接宽带或者WIFI，PC端的用户一般不会考虑页面消耗的流量。

4. 技术层面:PC应用更关注的是后台、大数据、算法类的，而移动端更关注的是如何更好地交互和体验。

 3. 移动端 1px 的常见解决方案

1、使用border-image实现

2、使用background-image实现

3、使用box-shadow模拟边框

4、伪元素+transform

5、用JS计算rem基准值和viewport缩放值

 4.   px、em、rem分别是什么？有什么区别？

px表示“绝对尺寸”，实际上就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。

em表示相对尺寸，其相对于当前对象内文本的字体大小，使用em可以较好的响应设备屏幕尺寸的变化。

rem也表示相对尺寸，其参考对象为根元素的字体大小，因此只需要确定一个字体大小就行。

5 .设置 p 的 font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？

不会。rem 是以 html 根元素中 font-size 的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。

6.  谈谈你是如何做移动端适配的

1.视口标签设置<meta name="viewport" content="initial-scale=1.0,         minimum-scale=1.0,maximum-sacle=1.0,user-scalable=no,width=device-width />

2.图片采用2倍图和三倍图加媒体查询

3.媒体查询

4.动态rem+vw方案

7. 说出移动端的几种布局方案，至少说出3种

流式布局（百分比布局）

flex弹性布局

rem适配布局

响应式布局

8. 什么是响应式设计？响应式设计的基本原理是什么？

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。 页面头部必须有meta声明的viewport：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

9. 响应式布局有哪些实现方式？【考核知识点：响应式布局】

1.百分比布局

2.flex布局

3.rem+media(媒体查询)

4.vw+vh

5.使用一些框架（bootstrap）

10. 为什么使用bootstrap?它包含的哪些内容？

优势：

1.移动设备优先

2.容易上手

3.响应式设计

内容：

1.基本结构

2.CSS

3.组件

4.Js 插件

11. 请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

(1) 一个用于页面布局的全新 CSS3 功能，Flexbox 可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

(2) 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。

(3) 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。

(4) 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

(5) 常规布局是基于块和内联流方向，而 Flex 布局是基于 flex-flow 流可以很方便的用来做局中，能对不同屏幕大小自适应。

(6) 在布局上有了比以前更加灵活的空间。

12. 传统盒模型与弹性盒模型的优缺点？

区别：

        1. 普通盒模型中的子元素分配其父元素的空间，而弹性盒模型中的子元素分配其父元素的可用空间。

        2. 普通盒模型主要针对块级元素和行级元素的布局，而弹性盒是建立在弹性流上，也就是元素可以随着可视区域的变化而呈现流式布局。

弹性盒的优点：

能为盒模型提供最大的灵活性，即使是不定宽高的元素依然好用，可以简便、完整、响应式地实现各种页面布局。

13. 盒子模型的解析模式是什么？如何改变？

用来控制元素的盒子模型的解析模式，默认为content-box。

context-box：设置元素的 height/width 属性指的是content部分的高/宽；

border-box：设置元素的height/width属性指的是border + padding + content部分的高/宽；

14. CSS选择器有哪些？优先级从大到小排序

选择器：

  id选择器（ # myid）: id选择器只能选择页面中的唯一一个ID

  类选择器（.myclassname）: 类选择器会选择页面中class名为指定名的所有标签，组成一个类数组

  标签选择器（div, h1, p）: 常见，最基本的选择器

  相邻选择器（h1+p）: 选择一个指定元素的兄弟元素

  子选择器（ul>li）: 使用大于号 “>”指定

  后代选择器（li a）: li为父元素，a为子元素

  通配符选择器（*）: 用来选择所有元素，或者某个元素的所有子元素

  属性选择器（input[type = "text"]）: 选择input type属性为text的元素

  伪类选择器（a:hover, li:nth-child）

优先级：

  !important > 内联 > ID选择器 > class选择器 > 标签选择器

15. 页面导入样式，使用link和@import有什么区别？

从属关系:link是html标签，@import是css提供的.

加载差异:页面加载时，link会同时加载；而@import引入的css会在页面加载完成后加载.

兼容性:link没有兼容问题，@import不兼容ie5以下的浏览器.

可操作性:link可以通过js操作dom插入link标签改变样式，而@import不能

16. 什么是外边距重叠？重叠的结果是什么

(1) 外边距重叠就是 margin-collapse。 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一 个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠 外边距。

(2) 折叠结果遵循下列计算规则： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。

17. 浮动会带来哪些问题？清除浮动的方式有哪些？

浮动带来的问题：

  1. 父元素的高度无法被撑开，影响与父元素同级的元素

  2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后

  3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构.
清除浮动的方式:

  1. 父级div定义height（记住）

  2. 结尾处加空div标签clear：both(记住)

  3. 父级div定义伪类：after、before（记住）

  4. 父级div定义overflow：hidden（记住）

  5. 父级div定义overflow：auto。

  6. 父级div也浮动，需要定义宽度。

  7. 父级div定义display：table。

  8. 结尾处加br标签clear:both（记住）

18. 什么叫优雅降级和渐进增强

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

19. 什么是CSS预处理？

CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题

20. SASS是什么？为什么要使用SASS?

sass都是 CSS 预处理器，最终编译成 CSS；

使用sass的好处：

结构清晰，便于扩展

可以方便地屏蔽浏览器私有语法差异

可以轻松实现多重继承

完全兼容 CSS 代码，可以方便地应用到老项目中