最近在刷面试题，刷了有一阵子了，现在把它们写出来，一方面考验巩固一下，一方面测试一次自己能不能答出来。
1.两栏布局(左侧定宽，右侧自适应)如何实现？（三栏布局类似）
（1）定位
.container{
padding-left:200px;
position:relative;
}
.left{
width:200px;
position:absolute;
left:0px;
}
.right{
width:100%;
}（2）float+BFC
.left{
width:200px;
float:left;
}
.right{
overflow：hidden;
}（3）
.left{
width:200px;
float:left;
}
.right{
margin-left:200px;
}（4）flexbox
.container{
display:flex;/*设定为flexbox*/
}
.left{
width:200px;
}
.right{
flex:1;/*该属性表示剩余的都属于right*/
}（5）calc
.left{
width:200px;
float:left;
}
.right{
width:calc(100%-200px);
float:left;
}2.浮动元素产生的问题？解决方法？
问题：（1）脱离文档流而存在，无法将父元素撑开
（2）与浮动元素同级的元素会跟随其后，影响布局
（3）如果该元素不是同级第一个浮动元素，则该元素之前的元素会发生移动，影响页面结构
解决方法：（1）添加额外标签法 clear：both
（2）FBC，overflow：hidden
（3）父级元素也浮动（不推荐）
（4）使用after伪类
3.什么是FBC？触发FBC的条件，FBC有什么作用
可以把FBC看成一个独立的容器，容器内部的元素无论如何翻江倒海，对外界的元素、布局都不会产生影响。
条件：（1）浮动元素，none除外
（2）overflow：hidden、auto、scroll
（3）display：inline-block
（4）body根元素
（5）position：relative、absolute、fixed
作用：（1）清除浮动
（2）双margin变成单margin的问题，即margin重合的问题可以用FBC解决
（3）阻止元素被浮动元素覆盖
4.盒模型
概念：在每个页面上的元素都是以矩形形式存在的，没个矩形都是由margin（外补丁）、border（边框）、padding（内补丁）、content（内容）所组成的。
标准盒模型：width=content
IE盒模型：width=content+padding+margin
5.标准模式与怪异模式的区别
（1）标准模式是标准盒模型，怪异模式是IE盒模型
（2）标准模式下不能给行内元素设置宽高
（3）标准模式下margin：0 auto;会使元素水平居中
（4）标准模式下若父元素没有设置宽高，则子元素的百分比失效
（5）怪异模式下为图片设置padding会失效
（6）标准模式下overflow：hidden默认隐藏元素，而怪异模式下会自动调整元素大小使之完全显示在父元素内
（7）怪异模式下table的字体属性不能继承上一层的属性
6.浏览器如何渲染？（怪异模式还是标准模式）
html标签之前声明文档类型，使用 Doctype，若浏览器解析html文档时，遇到正确的文档声明则进行标准模式渲染，若没有声明，则用怪异模式声明
7.css选择器、权重
id选择器：#id{ } 100
类选择器：.class{} 10
属性选择器：input[type=radio]{} 10
伪类选择器：：hover{} 10
元素选择器:a{} 1
伪元素选择器：：：after{} 1
通配选择器：*{}0
优先级最高（1）！important（ie6不支持）
（2）style内联元素（不推荐）
ps:浏览器从右往左解析 div p .hello:先找到类为hello的元素，再逐级向上验证，好处是提高浏览器对CSS解析速度
8.position
static：静态布局，浏览器默认布局
relative：相对于元素本身进行偏移，不会改变其占据空间
absolute：相对于最近一级的不是static的元素进行定位，脱离文档流
fixed：相对于浏览器可视区进行定位，生成粘性定位的元素
ps：块元素在position：static/relative下宽度是100%，而设置absolute后变成了auto
9.display
block：块级元素，宽度默认为100%。常见的有div、p、ul、li、h1-h6、form
inline：行内元素，宽度为它的文字或图片的宽度且不可变。常见的有a、input、span、lable
inline-block：对象呈现inline对象，对象内容为block
10.隐藏元素的方法？
1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute
5、.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}