1、html+css经典布局
①左列定宽，右列自适应
.left{width:100px;float:left;}
.right{overflow:hidden;}
②两列顶宽，中栏自适应
.left{width:100px;float:left;}
.right{width:100px;float:right;}
.center{width:100%;margin:0 100px;}
2、px、em、rem、pt的区别
①px是像素，用px设置字体大小时，比较稳定和准确，但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的web页面时，如果进行了缩放，这是会使我们的web页面布局被打破。因此这时就出现了“em”来定义web的字体。
②em就是根据基准来缩放字体的大小，em是相对于父元素来设置字体大小的，这样会存在一个问题，进行任何元素设置，都有可能要知道其父元素的大小
③rem是相对于根元素的字体大小来显示的，只需要在跟元素上确定一个参考值
④pt的大小等于1英寸的1/72，磅：也是文字的一种计量单位，这种方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器
浏览器的兼容性：除了IE6-IE8，其他的浏览器都支持em和rem，px所有浏览器都支持
3、BFC
什么是BFC：
BFC（Block Formatting Context）块级格式化上下文。它是一个独立的渲染区域，就是一个独立的容器，并且这个容器里box的布局与容器外的布局没有关系。
BFC的渲染规则：
a、内部的box会在垂直方向一个接一个的放置
b、box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
c、每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此
d、BFC的区域不会与float box重叠
e、BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
f、计算BFC的高度时，浮动元素也参与计算
如何产生BFC：
a、根元素
b、float不会none
c、position为absolute或fixed
d、display为inline-block、table-cell、table-caption、flex、inline-flex
e、overflow不为visible
BFC的作用：
a、自适应两栏布局
b、清除内部浮动
c、防止垂直margin重叠（放在两个BFC里）
4、实现文本三个点
a、容器宽度 width:100px;
b、强制文本在一行内显示 white-space:nowrap;
c、溢出内容为隐藏 overflow:hidden;
d、溢出文本显示省略号 text-overflow:ellipsis;
（注意：必须是单行文本才能设置文本溢出显示省略号）
5、什么是置换元素与非置换元素
置换元素：具有内联元素特征，但是可以直接设置宽度和高度。常见的置换元素有：img input select textarea
非置换元素：除置换元素外的其他元素都是非置换元素
6、如何给一个元素设置透明度，如何让这个元素的内容不发生透明度变化
a、rgba()
b、定位脱离文档流
7、什么是精灵图，它的原理是什么，优点是什么
a、将导航背景图片、按钮背景图片等有规则的图片合成一张背景图，然后用background-position来实现背景图片的定位技术。
b、减少对服务器的请求次数，提高页面的加载速度；减小图片体积
8、清除浮动的几种方式
a、给父元素添加overflow:hidden
优点：简单代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸会被隐藏
b、给父元素添加height
优点：简单代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样，会产生问题
c、在浮动元素下方添加空的div标签，并设置样式： div{clear:both}
优点：代码少，容易掌握
缺点：增加了空标签，会导致代码冗余
d、万能清除法： p:after{content:"."'clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
优点：支持性好，各大网站都在用万能清除浮动
缺点：代码多，不适合初学者
9、visibility:hidden和display:none的区别：
visibility:hidden 仍然占着位置 子元素可以继承 c3的transition属性支持visibility:hidden
display:none 不占位 子元素不能继承 c3的transition属性不支持display:none
10、什么是css样式表？优先级算法如何计算？
层叠样式表
重要性和来源的优先级从低到高是：
a、浏览器默认样式
b、class/id……选择器的权重
c、内部或外部（书写顺序）
d、行内样式
e、!iimportant
11、IE过滤器有哪些，兼容性如何？
a、_下划线属性过滤器 IE6及更低版本浏览器中会继续解析这个规则
b、!important关键字过滤器，他表示所附加的声明具有最高优先级的意思，浏览器会优先显示（IE6不识别此语法）
c、*属性过滤器 可以被IE7及以下浏览器识别
d、\9 IE版本识别，其他浏览器都不识别
e、\0 IE8及以上版本识别，其他浏览器都不识别
12、五大浏览器内核代表作品
Trident IE、Maxthon（遨游）、腾讯、Theworld世界之窗、360浏览器
Gecko Mozilla、Firefox
Webkit Safari、Chrome
Presto Opera
Blink 由Google和Opera Software开发的浏览器排版引擎，2013.04发布
13、哪些属性可以继承
文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
列表相关：list-style-image、list-style-position、list-style-type、list-style-type、list-style
颜色相关：color
透明度：子元素会继承祖元素的opacity，但是不能修改
注：font-size是继承父元素的大小，而不是比例。line-height当父元素是百分比或px值的时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是父元素的字体大小乘以数字。
14、简述对html语义化的理解
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
即使在没有css样式的情况下也以一种文档格式显示，并且是容易阅读的
搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO
是阅读源代码的人更容易将网站分块，便于理解和维护
15、渐进增强和优雅降级
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
16、主流浏览器的前缀有哪些
-ms- IE
-moz- 火狐
-webkit- 谷歌
-o- Opera
17、px、em、rem、pt、ppi的意思
a、px是像素，用px设置字体大小时，比较稳定和精确，但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的web页面时，如果对浏览器进行了缩放，这时会使我们的web页面布局被打破。因此，这时就提出了使用“em”来定义web页面的字体。
b、em是根据基准来缩放字体的大小，em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小
c、rem是相对于根元素字体大小来显示的，rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值
d、pt的大小等于1英寸的1/72，磅：他是作为文字的一种计量单位这种度量方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器
e、ppi是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多
18、标准盒模型和怪异盒模型的区别，他们的组成部分
标准盒模型：content+border+padding 实现：box-sizing:border-box
怪异盒模型：content 实现：box-sizing:content-box
19、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
width=device-width 宽度等于当前设备的宽度
initial-scale=1.0 初始的缩放比例
minimum-scale=1.0 允许用户缩放到的最小比例
maximum-scale=1.0 允许用户缩放到的最大比例
user-scalable=no 用户是否可以手动缩放
20、rem布局的缺点
a、做出来的效果与效果图有些许偏差
b、雪碧图定位问题
c、rem单位最好不要用在PC端
