1、为什么要初始化样式？
由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同
浏览器之间的显示差异 ，但是初始化 CSS 会对搜索引擎优化造成小影响。
2、 BFC 是什么?
BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布
局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin
重叠的问题
创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
3、HTML 与 XHTML——二者有什么区别？
1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 "" 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 "--"
8. 图片必须有说明文字
4、html 常见兼容性问题？
浏览器默认的margin和padding不同
解决方案：加一个全局的 *{margin:0;padding:0;} 来统一
5、对 WEB 标准以及 W3C 的理解与认识。
(1).标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、
(2):使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、
(3):更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
6、常见行内元素有哪些?块级元素有哪些?CSS 的盒模型?
CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认
的 display 值
块级元素(默认值是‘block’) ： div p h1-h6 form ul hr table
行内元素(默认值是‘inline’) : a b br i span input img link select small strong
Css 盒模型:内容，border ,margin，padding
7、前端页面的基本构成，分别是?作用是?
结构层 Html
表示层 CSS
行为层 js
8、列出 display 的值，并说明他们的作用。
display：
none：取消样式
block：块级元素
inline：行内元素
inline-block：行内块元素
normal：默认样式
flex：弹性布局
9、列出position的值，注意他们的定位参照原点。
*absolute
生成绝对定位的元素，相对于离最近的包含块元素进行定位。
*fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
* relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
* inherit 规定从父元素继承 position 属性的值。
10、i标签与em标签和b标签与strong标签的区别
(1):b标签和strong标签都可以对文本进行加粗
(2):i标签和em标签同样也可以对文本进行倾斜
但是strong和em有强调的作用，有利于SEO（搜索引擎优化
所以日常工作中建议用strong和em标签。
11、浏览器标准模式和怪异模式?
定义
标准模式页面按照HTML,CSS的定义渲染，
怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式。
区别：
两者盒子模型 渲染模式等的不同
相同点：都存储在客户端
不同点：
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie s 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会
话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
12、从浏览器地址栏输入url到显示页面的步骤
浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；
浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。
13、写出常用的css传统布局
表格布局
浮动布局，
浮动布局主要采用float和clear两个属性来构建。
定位布局
position属性来实现元素的绝对定位和相对定位。
流体布局的方式
14、简单描述一下什么是flex布局及常用属性说明
1、 flex-direction：排列方向
flex-direction: row | row-reverse | column | column-reverse
2、flex-wrap如果一条轴线排不下，如何换行
flex-wrap: nowrap | wrap | wrap-reverse
3、flex-flow属性（上述两个组合）
flex-flow: flex-direction, flex-wrap
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4、justify-content属性（在主轴上的对齐方式）横向
justify-content: flex-start | flex-end | center | space-between | space-around
5、align-items属性（在交叉轴上如何对齐）纵向
align-items: flex-start | flex-end | center | baseline | stretch
6、flex-grow属性（放大比例，默认为0，即如果存在剩余空间，也不放大）
flex-grow: 默认为0
7、flex-shrink属性（缩小比例，默认为1，即如果空间不足，则缩小）
flex-shrink: 默认为1
8、flex-basis属性（在分配多余空间之前，项目占据的主轴空间）
flex-basis: | auto
9、flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex: auto; （1 1 auto）
flex: none; （0 0 auto）