1. 简述<!DOCTYPE html>的作用
这句话必须放在html文件的第一行，用来声明当前文档的类型，如果没写此属性，浏览器会使用自己的怪异模式来解析渲染，写了浏览器会使用W3C标准解析
2. 常见的浏览器及其内核
Chrome: webkit blink
firefox: Gecko
IE: trident
Opera: presto
Safari: webkit
3. 常见的块级和行内
块：div,p,h1~h6,ul,ol,dl,li,dt,dd
行: span,b,i,u,label
行内块: img input button
4. b和strong标签的区别
都是默认字体加粗，区别是strong是语义化标签
5. 谈谈对语义化的理解
去掉css样式也能展示出响应的效果，有利于SEO优化，和搜索引擎更好的沟通,利于爬虫。便于团队开发维护。方便其他设备(屏幕阅读器等)渲染页面
6. 如何合并表格单元格
<table cellspacing="0"></table>
7. thead,tbody,tfoot的作用
thead将表格的第一行统一管理，tbody将表格主体统一管理，tfoot将表格最后一行进行统一管理，结构清晰
8. 常见的表单元素
form，input，textarea，select
9. 引入css的方式有几种
3种，行内样式，内部样式，外部样式
优先级：行内>内部>外部
10. 单行文本水平垂直如何居中
text-align:center;(给块级父元素)
line-height: 高度
11. 选择器优先级如何计算
在属性后面使用!important，会覆盖页面任何位置定义的样式，优先级最高
元素：1
class: 10
伪类: 10
id: 100
行内：1000
12. 哪些css属性可以继承
text-,line-,font-,color
13. 简述css模型
标准盒模型：内容(宽高)+padding+border+margin
一个元素的实际高度=高+上下padding+上下border
14. 使用border实现小三角
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: red;
15. margin外边距常见问题和解决方法
外边距传递：当两个块级元素，一个设置下外边距，一个设置上外边距，两个元素的实际间距为较大的那个
外边距塌陷：一个块级元素的第一个块级子元素，设置上外边距的时候，会带着父元素一起向下。
加上边框或上内边距，记得减掉相应高度
父元素：overflow:hidden/float/position
16. 块级标签和行内标签的区别
块：可以设置宽高，独占一行，默认纵向排列，可以设置4个方向的margin
行：不可以设置宽高，默认一行排列，超出自动换行，只能设置水平方向的margin
17. 浮动产生的问题
对自身的问题：脱离文档流，导致普通流定位元素自动补位，解决：clear：both，清除前面元素的浮动
对父元素：对父元素高度由影响
解决：
父元素overflow：hidden
父元素float:left
父元素定高
父元素的最后一个子标签添加一个空的块级标签，设置样式clear：both
.clearfix:after {
content: "";
display: block;
clear:both;
height:0;
line-height:0;
visibility:hidden;
overflow:hidden;
font-size:0;
}
18. 如何让盒子水平垂直居中
+ 定宽高
margin:0 auto;
margin-top:
position:absolute;
top: 50%;
left:50%;
margin-left: -自身宽度
margin-top:-自身高度
+ 不定宽高
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
display:flex;
justify-content: center;
align-items:center;
19. 简述BFC规则
BFC直译为“块级格式上下文”，是一个独立的渲染区域，规定了其内部的盒子如何布局，与外部不相干
规则：
1.内部的盒子会在垂直方向排列
2.盒子的垂直方向距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠
3.BFC就是页面上的一个独立的容器，容器内的子元素不会影响外层元素
4.浮动的盒子不叠加在BFC上
20. 图片间隙问题如何解决
display:block;
21. 常见浏览器兼容问题
a标签包着图片在ie7，自带边框
解决：
img {
_border:none;
*border:none;
border:none\0;
}
子元素定位会影响父元素的隐藏属性
解决：给父元素添加position:relative;
22. 登高布局，双飞翼布局，圣杯布局的实现原理
等高：
1. 假等高，内外边距相消法，给父元素overflow：hidden
2. 真等高：弹性盒
3. 真等高：父元素display：table;子元素display:table-cell
双飞翼布局和圣杯
区别：布局的区别，双飞翼center部分有盒子嵌套，真正的内容放在子元素
原理:浮动让左中右一行显示，通过margin-left取负值移动到相应位置
23. 简述精灵图的原理和优缺点
原理：将多个小图标放到一个大图片内，使用background-position去控制显示的图标
优点：减少http请求，提高性能
缺点：需要限定容器大小，需要计算
24. 常见图片格式和特点
jpg: 文件大小小一点，放大会模糊
png: 背景可以透明
gif:动图，背景也可以透明
svg:矢量
25. 为什么要初始化css样式，哪些样式需要初始化
共用样式提取封装，有利于代码复用，所有html都可以通过link引入，减少代码量
* {
margin:0;
padding: 0;
list-style:none;
box-sizing:border-box
}
a {
text-decoration:none;
color: #333;
}
input {
outlint:none;
}
img {
display:block;//解决间隙
width: 100%;
}
.clearfix:after {
content:"";
display:block;
clear:both;
}
26. 几种方法可以让元素消失
opacity：0；占位
display：none；不占位
visibility:hidden;占位
height:0;overflow:hidden;
transform:scale(0,0)
27. 标签应该如何合理嵌套
行不能套块，除了a，img外套层盒子
28. h5有哪些新特性，如何处理浏览器兼容
canvas,结构标签，video，audio，websocket，localstorage
结构标签尽量写类名，详见百度
29. c3 有哪些新特性
transform，transition，animation，border-radius，box-shadow...详见百度
30. c3新增选择器
E[^="value"]
E[$="value"]
E[*="value"]
31. 请你解释一下cs3弹性盒布局，以及适用场景
百度
32. 什么是less，less有什么好处
css预编辑器，是方便css开发的工具。
提供了变量，混入，嵌套，继承，函数等语法，提高开发效率
33. 常见的移动端布局解决方案
百分比布局
rem布局
响应式布局
自适应原理：都是通过相对单位来设置元素
34. 简述rem布局原理
rem是一个相对单位，永远相对于html标签的font-size属性，1rem=16px
rem布局就是利用rem此特性，通过动态的监听视口的宽度，动态修改html的font-size
35. 单行和多行文本溢出省略号
overflow:hidden;
text-overflow: ellipsis;
white-space:nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
36. 过渡动画和帧动画的区别和使用场景
过度动画：最多两个状态，且需要事件触发
帧动画：可以多个状态，利用动画时长内某一时间具体的状态形成帧动画，无需事件触发
37. 2d和3d变形
2d：transform:translate/rotate/scale/skew
3d：transform:translate/rotate/scale
38. 什么是响应式，响应式设计的原理是什么，响应式有哪些优缺点
用一套代码，在不同的屏幕分辨率的终端上浏览网页的不同展示方式
原理：
通过媒体查询不同尺寸屏幕的分辨率，动态更改html的font-size，以达到内容适配屏幕，做到不同分辨率的屏幕展示不一样的效果
优点：
减少工作量，设计，代码，内容都只需要一份，节省时间，每个设备可以得到正确的设计
缺点：
加载更多的样式和资源，设计比较难控制，老版本浏览器兼容不好，出现一些隐藏无用的元素，加载时间长
3397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
