1 Doctype 作用？ 严格模式与混杂模式如何区分？它们有何意义？
（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
2 五大浏览器以及内核？
Chrome 内核 Blink
Safari 内核 Webkit
Opera 内核 Blink
Firefox 内核 Gecko
IE 内核 Trident
3 对语义化如何理解？
用正确的标签做正确的事情！（根据元素的内容选择合适的标签）
HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
4 css样式引入方式
行内引入：css样式写在标签上。
内嵌引入： css样式写在style标签中，css样式是嵌入在当前页面中。
外链引入： 通过link引入外边的css文件。
5 css基本选择器？那权重呢？
类型选择器 ： div{css样式}
类选择器 ： .类名{css样式}
ID选择器： #id名{css样式}
通配符选择器 ： *{css样式}
以下是权重的规则：标签的权重为 1，class 的权重为 10，id 的权重为 100，以下例子是演示各种定义的权重值：/_ 权重为 1_ /div{}/_ 权重为 10_/.class1{}/_ 权重为 100_/#id1{}/_ 权重为 100+1=101_/#id1 div{}/_ 权重为 10+1=11_ /.class1 div{}/_ 权重为 10+10+1=21_/.class1 .class2 div{} 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
6 css复合选择器有哪些？
后代选择器 选择器1 选择器2{css样式}
子代选择器 选择器1 > 选择器2{css样式}
交集选择器 选择器1选择器2{css样式}
群组选择器 选择器1,选择器2...,选择器n{css样式}
伪类选择器 选择器:伪类{css样式}
7 XHTML 和 HTML 有什么区别？
（1）、HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言最主要的不同：
（2）、XHTML 元素必须被正确地嵌套。
（3）、XHTML 元素必须被关闭。标签名必须用小写字母。
（4）、XHTML 文档必须拥有根元素。
8 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 不会 sessionStorage 和 localStorage 的存储空间更大；sessionStorage 和 localStorage 有更多丰富易用的接口；sessionStorage 和 localStorage 各自独立的存储空间；
9 为什么要初始化 CSS 样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
10 块元素以及行内元素有什么区别？
块元素 ： div,p,h1~h6,ul,li,ol,dt,dd,header,footer,nav。。。
特点 ：
独占一行，可以设置宽高
如果不设置宽，它的宽等同于父元素内容的宽
如果不设置宽，高是由内容撑开
完全支持盒模型属性
行内元素 ： a,b,span,del,em,i,label,sup,sup,time,mark,select...
特点 ：
不独占一行，并排排列
不能设置宽高，宽高是由内容撑开
不支持上下外边距
作为其他的行内元素或者文本的父盒子
行内块元素：img，input（表单元素，出去form）
在一行排列
宽高生效
11 link 和@import 的区别是？
（1）link 属于 XHTML 标签，而@import 是 CSS 提供的。
（2）页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载。
（3）import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题。
（4）link 方式的样式的权重 高于@import 的权重。
12 写出几种 IE6 BUG 的解决方法？
（1）双边距 BUG float 引起的 使用 display
（2）3 像素问题 使用 float 引起的 使用 dislpay:inline -3px
（3）超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active
（4）Ie z-index 问题 给父级添加 position:relative
（5）Png 透明 使用 js 代码 改
（6）Min-height 最小高度 !Important 解决’
（7）select 在 ie6 下遮盖 使用 iframe 嵌套
（8）为什么没有办法定义 1px 左右的宽度容器(IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px)
（9）ie 6 不支持!important
13 浮动产生的问题？你是怎么解决的？
浮动产生的问题 ：
父元素高度塌陷，子元素浮动，脱离了文档流，不占位置，不能把没有设置高度的父元素的高 度撑开，导致父元素的高度塌陷。
解决方案：
（1）直接给父元素设置高 ，代码简单，通俗易懂， 不灵活。
（2）额外标签：是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签，通俗易懂，书写方便，添加许多无意义的标签，结构化较差。
（3）父元素设置overflow：hidden|auto|scroll。可以通过触发BFC的方式，可以实现清除浮动效果，代码简洁，内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示。
（4）after伪元素进行清除浮动，：after方式为空元素的升级版，好处是不用单独添加标签 。
符合闭合浮动思想 结构语义化正确，由于IE6-7不支持:after，使用 zoom:1 。
14 浅谈一下BFC？
BFC ： 块级格式化上下文,它是指一个独立的块级渲染区域，只有 Block-level BOX 参与， 该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
特点：
（1）内部的标签会在垂直方向上一个接一个的放置
（2）垂直方向上的距离由 margin 决定，属于同一个 BFC 的两个相邻标签的 margin 会发生重叠
（3）每个标签的左外边距与包含块的左边界相接触（从左 向右），即使浮动标签也是 如此。
（4）BFC 的区域不会与 float 的标签区域重叠
（5）计算 BFC 的高度时，浮动子标签也参与计算
（6）BFC 就是页面上的一个隔离的独立容器，容器里面的子 标签不会影响到外面标 签。
解决的问题：
清除浮动 两栏三栏自适应 防止图文环绕 外边距折叠
15 如何制作一个三角形？
#Three {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
或者利用旋转将正方形进行旋转在把多余的部分进行隐藏。
16 你能想出那些方法让元素在页面中消失？
（1）display : none
（2）visibility ：hidden
（3） opacity : 0;
（4）定位到浏览器窗口外边 不显示在页面
（5）定位，z-index为负值
（6）transform:scale(0,0)
17 哪些css属性可以继承？
（1）字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
（2）文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
text-decoration：文本装饰
18 html5 有哪些新特性？
新增结构标签 header nav footer hgroup figure section article aside mark time等
新增多媒体标签
新增智能表单
canvas绘图
SVG绘图等
19 CSS3 新增选择器有哪些？
结构伪类选择器
目标伪类选择器
状态伪类选择器
属性伪类选择器
20 让块级元素水平垂直居中？
方法一 ： position: fixed； left: 50%； top: 50%； margin-left: -盒子宽度一半； margin-top: -盒子高度的一半；
方式二： margin:auto 实现绝对定位元素的居中 弊端：兼容ie8以上浏览器 position: fixed? left: 0； right: 0； top: 0； bottom: 0； margin: auto
方式三：弹性盒子。
21 了解定位吗？
（1）static： （静态）默认值。
（2）relative :相对定位 ，不脱离文档流，是以自身原来位置来定位的
（3）absolute:绝对定位，脱离文档流，以最近已定位的“父元素”来定位的，如果“父元素”没有定位，则以html为参照物定位。
（4）fixed :固定定位：脱离文档流，以浏览器窗口为参照物定位的。
22 说出你知道的布局优缺点？
（1）float 布局
优点： 比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的缺点：浮动元素是脱离文档
流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。
（2） 绝对布局
优点：很快捷，设置很方便，而且也不容易出问题缺点：绝对定位是脱离文档流的，意味着下面的所有子
元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。
（3）flex 布局
优点：简单快捷缺点：不支持 IE8 及以下
（4）table布局
优点：实现简单，代码少缺点：当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高
的，而有时候这种效果不是我们想要的。
（5）grid布局
跟 flex 相似
23 解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？
（1） 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，宽度 = 边框 + padding + 内容宽度； chrom、
IE9+、(添加doctype) 使用标准盒模型， 宽度 = 内容宽度。
（2）box-sizing : 为了解决标准黑子和IE盒子的不同，CSS3增添了盒模型属性box-sizing，content
box(默认)，border-box 让元素维持IE传统盒子模型， inherit 继承 父盒子模型；
（3）边界塌陷：块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边
距），这样的现象称之为 外边距塌陷。
（4）负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示
在最前面。
24 介绍一下 CSS 的盒子模型？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 pading。
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)。
