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;}
优点：支持性好，各大网站都在用万能清除浮动
缺点：代码多，不适合初学者