1、简述<!doctype>的作用
<!doctype>是文档的声明，告诉浏览器当前的文档类型；<!doctype html>:告诉浏览器以当前html最新标准解析当前文档。
2、谈谈你对语义化的理解
简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的 爬 虫和机器很好地解析，有利于SEO，便于团队开发和维护。有利于拓展
3、如何合并表格单元格，需要注意什么？
跨行合并：rowspan，跨两行合并的表格； 跨列合并colspan，跨两列合并的表格。
4、thead、tbody、tfoot有什么作用？
thead 表格的头部 用来放标题之类的东西
tbody 表格的身体主题部分 放数据本体
tfoot 表格的脚 放表格的脚注之类
作用：优化表格加载， 增强用户体验，表格结构清晰，增强可读性
5、常见的表单元素有哪些？
表单元素：input-type：text，password，radio，checkbox，buttom，submit，reset，flie，image
select：option
textarea
文本域，下拉列表，单选框，复选框
6、CSS的方式有几种？
（1）内嵌式
通过<style></style>来书写CSS代码。
只能应用于当前网页，不能被其它网页共享。
注意：<style>标记一般放在<head>。
（2）外联式，外嵌式
通过<link>标记来引入外部的CSS文件(.css)。
可以被其它网页共享。
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>标记只能放在<head>中
（3）行内样式
通过style的属性来书写CSS代码。
举例：<p style=“font-size:24px;”></p>
7、单行文本水平垂直居中如何实现
（1）水平居中
text-align:center:控制单行文字水平居中
（2）垂直居中
设置行高，line-height：元素的高度，如果元素的高度是50px，则line-height:50px
8、常见的选择器有哪些？
基础选择器：通配符选择器(*),
标签（元素选择器，element）选择器
元素 1
类选择器 10
id选择器 100
进阶选择器: 群组选择器
后代
子代
交集
相邻选择器 +
9、选择器优先级如何计算
a.内联样式表的权值为1000
b.ID选择器的权值为100
c.class类选择器的权值为10
d.HTML标签选择器的权值为1
将权重相加得到总权重值
等级相同， 则看权重大小，大优先
权重相同，后写的优先
等级不同， 等级大优先
！important
我们可以把选择器中规则对应多加法，比较权值，如果权值相同那就后面的覆盖前面的。
!important可以使样式优先级最高
10、哪些CSS属性是可继承的？
（1）、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
（2）、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
text-decoration：文本修饰
text-index， text-color
11、简述CSS盒模型
盒模型又称框模型,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
盒模型是设计与布局的一种概念思想，把HTML中所有元素看作是一个盒子（盒模型）
12、margin外边距常见问题及处理方法
父子元素margin合并问题
在父元素里面有子元素时，则父元素的margin-top的值为子元素中的margin-top的值。
父子元素margin合并问题解决办法
方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;
兄弟元素margin合并问题
规避
1，塌陷 父子关系时，第一个元素的margin-top， 会影响父元素
a、border padding
b、overflow：hideen nauto scroll
2、两个元素上下垂直摆放时，上下外边距会重叠
13、块级标签与行级标签的区别
Html中常见行级标签：span、a、em、strong、b ......
特点：在一行内显示（在一行中可以并列多个行级标签），不能设置宽高属性，水平方向的padding和margin可以设置，垂直方向的无效。
Html中常见块级标签：div、p、ul、li、dl、td、dd、h1~h6 ......
特点：独占一行，能设置width，height，margin和padding等属性
14、浮动产生的问题？清除浮动的方案？
浮动元素引起的问题：
浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素
清楚浮动的方法：
1、给浮动标签的父标签固定高度
2、所有浮动元素的最后添加一个块级标签，并且给标签添加clear：both样式
3、在浮动标签的最后加一个空div（块标签），标签本身不浮动，且添加样式 clear：both；（代码沉余）
4、给父标签加 overflow属性，overflow为visible以外的其他值时可以帮助实现
5、推荐方法：给浮动标签的父标签添加 .clearflix（不会在结构上产生沉余代码，可多次重复使用）
.clearfix{
*zoom：1；
} /*处理ie7以下兼容*/
.clearfix：after{
content：“”；
clear：both；
display：block；
}
（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
（2）在结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个cl的类名，给cl类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）
（4）给父级div定义伪类：after（推荐使用）
/*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
然后父级元素添加clearfloat类名即可
（5）给父级元素添加浮动（缺点：会产生新的浮动问题）
15、如何使用border实现实心小三角
/**向下的三角**/
.trangle_down{
width:0;
height:0;
overflow:hidden;
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width:10px;
border-style:solid; /*ie6下会出现不透明的兼容问题*/
border-color:#f30 transparent transparent transparent;
}
16、引入css样式有几种
（1）内嵌式
通过<style></style>来书写CSS代码。
只能应用于当前网页，不能被其它网页共享。
注意：<style>标记可以放在网页的任何地方，但一般放在<head>。
（2）外联式
通过<link>标记来引入外部的CSS文件(.css)。
可以被其它网页共享。
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>标记只能放在<head>中
（3）行内样式
通过style的属性来书写CSS代码。
举例：<p style=“font-size:24px;”></p>
单行文本水平居中如何实现
添加text-align:center;
设置盒子的高度，line-height：盒子的高度;(垂直居中)
1、哪些CSS属性是可继承的？
1、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
文本;text-deronter、
text-style 、
text-size
行级标签和块级标签的区别？？？？？？？
一、块级标签
1.总是在新行上开始，占据一整行。
2.高度，行高以及外边距和内边距都可控制。
3.宽带始终是与浏览器宽度一样，与内容无关。
4.它可以容纳内联元素和其他块元素。
二、行级标签
1.和其他元素都在一行上。
2.高，行高及外边距和内边距部分可改变。
3.宽度只与内容有关。
4.行内元素只能容纳文本或者其他行内元素。
2、浮动产生的问题？清除浮动的方案？
答：标签浮动以后，脱离正常文本流，导致父元素无法被撑开，影响后续布局
给浮动标签的父标签固定高度。 在浮动标签的最后加一个空的div。
1、固定高度
2、给父元素加浮动
3、overflow：hidden/scroll/auto
4、最后给所有浮动元素添加块级元素，并给元素添加clear：both样式
5、.clearfix:after{content:"";display:bock;clear:both;}
6、display：inline-block
7、position：absoulte/fixed
html布局中图片之间有间隙的解决方案？？？？？？
*{margin: 0;padding: 0;font-size: 0;}
常见浏览器兼容性问题与解决方案
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
浏览器兼容问题五：图片默认有间距
浏览器兼容问题七：透明度的兼容CSS设置
3、等高布局、双飞翼布局的实现原理？
等高布局：
- 假等高:
原理：利用内外边距相抵消，注意父元素设置"overflow:hidden"，列变宽，其他列等高变化
优点：结构简单，兼容所有浏览器
缺点：伪等高，需要合理控制margin和padding值配合
/*三列，把外面设置一个大盒子，里面3个小盒子*/
父级：overflow:hidden;(溢出隐藏)
子级：padding-bottom:99999px;
margin-bottom:-99999px;
<body>
<div class="father">
<div class="left">ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd </div>
<div class="center">撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd </div>
<div class="right">撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定ga7a7dgadd </div>
</div>
</body>
.father {
overflow: hidden;
margin: 0 auto;
/* width: 900px; */
}
.left {
width: 100px;
background-color: blue;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center {
width: 150px;
background-color: green;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right {
width: 100px;
background-color: skyblue;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
-真等高：
原理：利用内容撑开父元素的特点，给每一列添加相对相应的容器，并进行相互嵌套，并在每个容器中设置背景色。（这里需要提醒大家你有多少列就需要多少个容器，比如说我们说的三列，那么你就需要使用三个容器）。
优点：兼容各种浏览器，方便扩展容易创建任意列数
缺点：结构嵌套复杂，理解会有一定难度
有几个盒子写几个盒子
把第二个父盒子bg2进行移动，移到最后一个盒子blue的宽度
移动最里面的父盒子bg3，移到倒数第二个子盒子green的大小
依次把原来倒数第一个盒子blue移到原来的移动剩下的两个子元素到原位置
最大盒子overflow::hidden去掉超出部分
<div class="bigbox">
<div class="bg1">
<div class="bg2">
<div class="bg3">
<div class="red">第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅</div>
<div class="green">第二列第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅</div>
<div class="blue">第三列第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第三列第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第三列第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad好贵呀噶 唉大概的噶大概空间大幅</div>
</div>
</div>
</div>
</div>
<style>
.bigbox{
margin: 0 auto;
width:1000px;
}
.bg1{
width: 100%;
background-color: orange;
overflow: hidden;
}
.bg2{
width: 100%;
background-color: pink;
position: relative;
right: 300px;
float: left;
}
.bg3{
width: 100%;
background-color: skyblue;
position: relative;
right: 400px;
float: left;
}
.red{
width: 300px;
/* background-color:red; */
float: left;
position: relative;
left: 700px;
}
.green{
width: 400px;
/* background-color: green; */
float: left;
position: relative;
left: 700px;
}
.blue{
width: 300px;
/* background-color: blue; */
float: left;
position: relative;
left: 700px;
}
</style>
基于此原理也通过百分比建立流式布局（即外框自适应，每列百分比）
圣杯布局
圣杯布局和双飞翼布局都是为了实现左右栏固定宽度，中间部分自适应的三栏布局，不过两者实现的原理有所不同。以下是圣杯布局的实现思路。
1）将三者都float：left，再加上一个position:relative(因为相对定位后面会用到)；
2）middle部分width：100%；
3）此时middle占满了，所以要把left拉到最左边，使用margin-left：-100%
4）这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上padding：0 220px 0 200px;
5) middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位left：-200px，同理，right也要相对定位还原right:-220px
6)到这里自适应就好了，若要想container高度保持一致可以给left middle right 都加上min-height：130px；
<body>
<div class="container">
<div class="middle">圣杯布局的中间自适应部分</div>
<div class="left">圣杯布局左边固定宽度部分</div>
<div class="right">圣杯布局右边固定宽度部分</div>
</div>
</body>
.container {
padding: 0 200px 0 200px;
overflow: hidden;
}
.middle,
.left,
.right {
float: left;
position: relative;
}
.middle {
width: 100%;
background-color: blue;
}
.left {
width: 200px;
background-color: red;
margin-left: -100%;
left: -200px;
}
.right{
width: 200px;
background-color: green;
margin-left: -200px;
right: -200px;
}
双飞翼布局
双飞翼布局始于淘宝UED。如果把三栏布局比作一只鸟，可以把main看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是：先把重要的身体部分放好，然后再将翅膀放到适当的位置。
1）左翼left设置200px，右翼right设置220px,身体自适应；
2）html代码中，main要放在最前边，然后是left right
3）将main left right都float：left
4）将main占满100%；
5）此时main占满100%，所以要把left拉到最左边，使用margin-left：-100%，同理right使用margin-left：-220px';
6)main内容被覆盖了，除了使用外围的的padding，还可以考虑使用margin：
给main加一个层div-- main-inner,然后margin：0 220px 0 200px
<body>
<div class="middle">
<div class="inner">双飞翼布局的中间自适应部分</div>
</div>
<div class="left">双飞翼布局左边固定宽度部分</div>
<div class="right">双飞翼布局右边固定宽度部分</div>
</body>
.middle,
.left,
.right {
float: left;
min-height: 130px;
}
.middle {
width: 100%;
}
.inner {
margin: 0 220px 0 200px;
background-color: orange;
min-height: 130px;
}
.left {
width: 200px;
background-color: red;
margin-left: -100%;
}
.right {
width: 220px;
background-color: green;
margin-left: -220px;
}
4、为什么要初始化CSS样式？那些样式需要初始化？
答： 默认样式会影响我们自定义样式
ul，ol{margin：0；padding：0；list-style：none}
a{text-decortion:none}
p{margin:0;}
input[{type="text"]{border：none；outline：none；}
5、如何让盒子水平垂直居中？
1、水平居中：
a：margin：0 auto
b:display:inline-block
给父元素添加text-align：center
2、垂直居中：
margin
内容垂直居中：line-height：===height
表格中： vertical-align：middle
3、水平垂直居中
父元素：position：relative
子元素：position：absolute
left：50%；top：50%
margin-left：-自身宽度的一半
margin-top：-自身高度的一半
单行文字内容：
text-align：center；
line-height：height；
表格文字居中：
text-align：center
line-height：height
6、简述BFC规则，及解决的问题？
答：BFC布局规则：
1、内部块级元素会垂直一个接一个的排列
2、同一个BFC内部，两个相邻垂直的boxmargin会发生重叠
3、BFC时一个独立的容器，里面的子元素不会影响到外面的元素
4、BFC区域不会与float区域重叠
5、BFC在计算高度时， 会自动计算浮动元素的高度
形成BFC：
a、根元素
b、overflow: 不为visible
c、display:inline-block
d、float: left/right
e、position:absolute/fixed
规则：
1、BFC中浮动子元素也会计算高度
2、BFC区域不会与float区域重叠
答： 解决常见问题
1、解决margin值塌陷问题
2、文字不会环绕浮动元素
3、实现两列，三列布局
4、清浮动
5、利用两个BFC解决margin会发生重叠的问题
7、简述精灵图的原理及优缺点？
a、将多张小图放在一张大图中，通过background-position； background-image去选择对应的小图使用
优：
1、减少HTTP请求次数， 提网页的性能
2、减少命名困扰
3、更换风格图标方便
缺： a、计算位置繁琐
b、限定宽高
8、CSS3新增了那些选择器？
属性选择器：
E:[attr]{}; E:[attr="val"]{};
E:[attr^="val"]{};E[attr$="val"]{};E: ['attr*="val"];
答：
行为状态选择器 伪类：
E:link
E:hover
E:visited
E:focus
E:active
E:checked 元素被选中
E:disabled 元素失效被选中
E:enabled 元素有效时被选中
E::placeholder 元素占位符被选中
伪元素
E:after
E:before
结构伪类选择器
E:first-child{}
E:last-child{}
E:nth-child(m){}
9、如何处理HTML5新标签的浏览器兼容问题？
hearder、footer、setion、nav、article、aside、figure、figcaption、time、mark、hgrounp
一、利用JS脚本创建对应的新元素、设置新元素的样式
document.createElement("Header"); header{display:blolock}
二、引入插件： html5shiv.js
<!--[if li IE 9]>
<script src="html5shiv.js">
<![endif]-->
答：兼容问题解决方法
1、通过js脚本创建对应的标签/元素
2、将对应的元素修改对应的类型
<script>
document.createElement("header")
</script>
<style>
header {
color: red;
display: block;
}
</style>
10、简述网页中常见图片格式及特点？
gif：动图，透明，小图片
png：透明，细腻，文件较大
jpg：色彩丰富，有损压缩，文件相对较小
11、你能想出几种方法让元素在页面中消失？
a、display：none
b、visibility：hidden；
c、opacity
d、overflow：hideen 宽高：0
e、overflow：positipn：移除区域
f、position： z-index：
12、常见的浏览器及其内核？对应的兼容性前缀是什么？？
chrome webit -webkit
firfox Gecko -moz
IE Trident -ms-
Opera Presto -o-
Safari Webkit
QQ\360：极速模式--webkit-- 兼容模式----Trident
13、常见的移动端布局解决方案有哪些？原理如何？
1、固定布局
在<head>里把viewport加好，跟pc端一样，设想整个网页的宽度为320px居中即可，超出部分留白
优点：思路沿用pc端，上手简单 缺点：大屏幕手机及手机横屏时，两边留白较大，且大屏幕手机看起来页面会特别小，操作的按钮也很小，用户体验较差。
2、流式布局
流动式布局重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，优点是流动布局可以很好的解决自适应需求，缺点是通过大量的百分比布局，会出现兼容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性
3、响应式布局
@media 根据用户的访问设备的主要类型做三种或四种布局。每种布局有一个区间即可利用媒体查询@media，可以为不同分辨率的设备加载不同的样式。这种方法的优点是可以相对准确的控制显示效果，但可能需要对同一个类书写不同的样式。这种方法的优点是可以相对精确的控制显示效果，但可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难
4、rem布局
rem是指相对于根元素字体大小的单位，即根据html元素的font-size来计算大小。比如说html的font-size大小为100px，一个div的width为 1rem，则div的width大小为100px
（1）设置页面的viewport （2）动态计算并设置html的fontsize值 （3）按照pc端布局方式正常布局，px单位换算成rem
14、简述rem布局原理
a、js：html的font-size： 100/设计高宽度 *屏幕宽度
b、量元素的px尺寸下的宽高， 换算成rem单位， n/100
15、在项目中你是如何做图片优化的？
1、css sprite雪碧图
2、压缩图标质量
3、svg
4、字体图标
5、将图片拆分
HTML5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
（2）CSS3新特性：
实现圆角（border-radius），阴影（box-shadow），边框图片（border-image）；
对文字加特效（text-shadow），强制文本换行（word-wrap），线性渐变（linear-gradient）；
实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
增加了更多的CSS选择器、多背景、rgba()；
唯一引入的伪元素是::selection ；
实现媒体查询(@media)，多栏布局（flex）。
（3）移除的元素
纯表现的元素：basefont，big，center，font，s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
（4）区分HTML和HTML5：
DOCTYPE声明
新增的元素
CSS3有哪些新特性？
新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。
背景介绍：
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便
2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
（2）知识剖析：
1. 什么是flex
flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。 .3容器属性 4.项目属性
什么是less？less有什莫好处？
less是动态的样式表语言，通过简单，明了的语法定义，使编写css 的工作变得非常简单，在实际项目开发中，大大提高了前端工程师的工作效率
css需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，造成这些困难的很大原因源于css是一门非程序性语言，没有变量，函数，scope等概念
less在css基础上引入了变量，混入，运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，less可以让我们用更少的代码做更多的事。
如何显示小于12px的字体？单行文本和多行文本溢出显示省略号，如何实现？？？？
使用transform:scale()进行缩放
单行文本溢出显示省略号
p{
width:200px;//限定盒子的宽度
overflow:hidden;溢出的文本隐藏
text-overflow:ellipsis;溢出的显示省略号
white-space:nowrap;文本不换行
}
多行文本溢出
p {
width:200px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;//限制块元素显示的文本行数
-webkit-box-orient:vertical;//设置伸缩盒对象的子元素的排列方式
}
CSS3中过渡和动画的区别和各自适用场景？
过渡动画：当元素状态发生改变，不想直接变化，而是逐渐变化，就使用过渡。
动画：可自动触发，支持多个状态，循环播放
不同点：
1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
4. 与JavaScript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时爽太多。
说出你知道的2D或3D变形函数？
（一）2D转换
1.位移 transform:translate(x,y);
2.缩放 transform:scale(x,y);
3.旋转 transform:rotate(deg) //deg 度数
旋转中心 transform-origin：right top； //例子(初始值为50%，50%)
4.倾斜 transform:skew()
（二）3D变形
①位移（z轴）
translateZ(）正值靠近，负值后退（远小近大）
②视距
3d变形必须设置，让3d变形的元素具有3d效果（远小近大，作用父元素上）
perspective:600px;
translated(x,y,z)在x，y，z轴分别位移
什么是响应式设计？响应式设计的基本原理是什么？
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
响应式布局是根据设备屏幕宽度不同适当调整标签显示布局，在每种设备屏幕宽度的设备下呈现的界面是不同的。利用媒体查询，rem单位，响应式图片，百分比布局，弹性布局等技术实现
响应式网站的优点：
减少工作量 网站、设计、代码、内容都 只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变
节省时间
每个设备都能得到正确的设计
响应式网站的缺点：
会加载更多的样式和脚本资源
设计比较难精确定位和控制
老版本浏览器兼容不好
Boostrap框架的核心是什么，简述其规则？
bootstrap的核心是栅格系统.
简述规则：
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
通过一系列的行（row）与列（column）的组合来创建页面布局，栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
四种类前缀：col-xs-* , col-ms-* , col-md-*, col-lg-*.
一、将容器的font-size设成0
*{margin: 0;padding: 0;font-size: 0;}
