目录
1. 介绍一下盒子模型
2. box-sizing属性
3. CSS选择器的权重的概念
4. 介绍一下BFC
5. 介绍一下块级元素和内联元素的区别
5. 常见兼容问题
6.为什么要初始化css样式
7. 如何清除浮动（方法，优缺点，清除方法的原理）
8.如何水平垂直居中
9． 两列布局
10． 三列布局
11.栅格布局如何实现
12. css选择器有哪些？
13. Css哪些属性可以继承
14. Css新增伪类有哪些
15. px,em,rem区别
16. position的属性值
17. position:absolute与fixed的共同点和不同点
18. display的属性值（常用）
19.图片的alt和title属性有什么区别
20.超链接在新窗口打开应该添加什么属性
21. display:none, visibility: hidden的区别
22. 让一个元素隐藏，有哪些css属性可以做到
23. margin和padding的使用场景
24. link和@import区别
25.css3新特性
1.介绍一下盒子模型
CSS盒模型：网页设计中css技术所使用的一种思维模型。
CSS盒模型组成：外边距（margin），边框（border），内边距（paddimg），内容（content）
CSS盒模型分类：标准W3C盒子模型，IE盒子模型
区别：二者的区别在于height和width的计算。
标准W3C盒子模型：height=content ， width=content
IE盒子模型：height=content+padding+border， width=content+padding+border
2.box-sizing属性
属性主要用来控制元素盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
3.CSS选择器的权重的概念
权重是指某一因素相对于某件事物的重要程度
首先可以
从css代码存放位置看权重优先级：即 内嵌样式>内部样式表>外联样式表>用户设置>浏览器默认
从样式选择器看权重优先级：
即!important>内联样式>ID选择器>类，伪类和属性选择器>标签选择器
4.介绍一下BFC
在css渲染中，bfc是按照块级盒子布局的，容器里面的子元素不会影响到外部元素。
当float的值不是none，
position的值不是relative和static，
display的值不是table-cell，table-caption，inline-block中的任何一个，
overflow的值不为visiable时可触发bfc。
主要解决的问题：解决父元素高度塌陷，解决垂直方向上兄弟元素的margin重叠。
5. 介绍一下块级元素和内联元素的区别
块级元素：
总是在新的一行上开始
高度、行高以及内外边距都可以控制
宽度默认是它容器的100%，除非设置一个值
它可以容纳内联元素和其他块级元素
内联元素：
和其他元素都在一行
高度，宽度以及顶部和底部外边距都不可控制
宽度就是它的文字或图片的高度，不可改变
内联元素只能容纳文本或其他内联元素
常见的块级元素：divh1~h6,dl,ul,ol,p,table
常见的内联元素：a,span ,select,strong,textarea, img,input
替换元素：浏览器根据元素的标签和属性，来决定元素显示的具体内容，且替换元素一般都有内在尺寸input，img，select，textarea，
非替换元素：直接将内容告诉浏览器，并将其显示出来。
5. 常见兼容问题
（1）png24位的图片在ie6浏览器上出现背景
解决方案：做成PNG8
（2）浏览器默认的margin和padding不同
解决方案：全局margin：0；padding：0
（3）IE6双边距问题，如果设置浮动，又设置了左或右边距，margin值会加倍
解决方案：在float的标签样式控制中加入_display:inline，将其转换为行内元素
（4）chrome中文界面下会默认将小于12px的文本强制按照12px显示
解决方案：可通过加入css属性-webkit-text-size-adjust:none解决
（5）超链接访问过后hover样式不出现，被点击访问过的超链接样式不在具有hover和active了
解决方案：改变css属性的排列顺序即L-V-H-A
（6）上下margin重合
解决方案：同时采用margin-top或margin-bottom
（7）html5，css3的新增标签和属性，低版本ie不兼容
6.为什么要初始化css样式
因为不同浏览器的默认样式不同，没有统一的规定，但是要兼容各个浏览器，必须要初始化css样式，如果不初始化css样式，就会造成页面展示效果出现差异
当然，初始化样式会对SEO（搜索引擎优化）有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
7.如何清除浮动（方法，优缺点，清除方法的原理）
（1） 添加额外标签
通俗易懂，但是添加很多无意义的标签，后期维护难
（2）父元素设置overflow：hidden
实质触发BFC，溢出的内容会被隐藏
（3）父元素设置浮动
与父元素相邻的元素布局会收到影响
（4）父元素设置display：table
结构语义化正确，代码少，但是盒模型属性改变
（5）使用伪元素
.removefloat:before,.removefloat:after {
content:"";
display:table;
}
.removefloat:after { clear:both; }For IE 6/7 (trigger hasLayout)
.removefloat { zoom:1; }
8. 如何水平垂直居中
水平居中：margin：0 auto；
水平垂直居中：
（1）子元素通过设置position：absolute；top：50%；left：50%；
transform: translate(-50%,-50%);或者减去高度和宽度的一半
（2）flex布局 display：flex；justify-content：center；align-items：center；
9．两列布局
（1）浮动float+margin-left /浮动float+bfc（overflow：hidden）
左侧定宽
.content{width: 100%; height: 500px; border: 1px solid #000; }
.left{ background:#fcc; width: 200px; float: left; }
.right{ background: #f66; margin-left: 210px;}或者overflow：hidden
（2）绝对定位
左侧定宽，右侧设置left：左侧宽度，right：0；可自适应
.content{ position: relative; width: 100%; height: 500px; border: 1px solid #000; }
.left{ background:#fcc; width: 200px; position: absolute; }
.right{ background: #f66; position: absolute; left: 210px; }
（3）flex布局（左/右侧定宽）
.content{ width: 100%; height: 500px; border: 1px solid #000; display:flex; }
.left{ background:#fcc; width: 200px; margin-right:10px; }
.right{ background: #f66; flex:1; }
10．三列布局
（1）绝对定位法-左右两侧绝对定位，中间margin指定左右外边距
三个div顺序可以随意改变，但是当浏览器缩小，中间部分会压缩
（2）自身浮动法-左右分别使用float，中间margin指定左右外边距
中间的div必须位于最后
（3）圣杯布局-两边定宽，中间自适应
.bd{ padding-left:150px; padding-right:190px; overflow: hidden; }
.left{ position: relative; background: #E79F6D; width:150px; float:left; margin-left:-100%; left:-150px; }
.main{ background: #D6D6D6; width:100%; float:left; }
.right{ position: relative; background: #77BBDD; width:190px; float:left; margin-left:-190px; right:-190px; }
（4）flex布局 父元素flex，左右两侧定宽，中间flex
11. 栅格布局如何实现
12. css选择器有哪些？
（1）id选择器(# myid)
（2）类选择器(.myclassname)
（3）标签选择器(div, h1, p)
（4）相邻选择器(h1 + p)
（5）子选择器(ul > li)
（6）后代选择器(li a)
（7）通配符选择器( * )
（8）属性选择器(a[rel = "external"])
（9）伪类选择器(a: hover, li:nth-child)
从样式选择器看权重优先级：
即!important>内联样式>ID选择器>类，伪类和属性选择器>标签选择器
13. Css哪些属性可以继承
font-size，font-family，color，text-indent（首行缩进）
14. Css新增伪类有哪些
p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
15. px,em,rem区别
相同点：rem，px和em都是长度单位；
异同点：px的值是固定的，指定是多少就是多少，计算比较容易。
rem，em的值不是固定的，并且em会继承父级元素的字体大小，rem会继承根元素的字体大小，如果将根元素直接设置为10px，则可以方便计算。
16. position的属性值
（1）absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。
（2）fixed 生成固定定位的元素，相对于浏览器窗口进行定位（老IE不支持）。
（3）relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
（4）static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
（5）inherit 规定从父元素继承 position 属性的值。
17. position:absolute与fixed的共同点和不同点
A：共同点：
（1）改变行内元素的呈现方式，display被置为inline-block；
（2）让元素脱离普通流，不占据空间；
（3）默认会覆盖到非定位元素上
B不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
18. display的属性值（常用）
（1）block 块状元素
（2）inline 行内元素
（3）inline-block行内元素，但内容像块状元素一样显示
（4）list-item 块状元素，并添加样式列表标记（像ul一样，前面添加黑点）
19. 图片的alt和title属性有什么区别
title无论是文字链接还是图片上，鼠标放上去的时候，会弹出一段说明，这就是title
alt 则是当图片不存在或载入出错时，该文字则出现，代替该图片
20. 超链接在新窗口打开应该添加什么属性
target="_blank“ _self表示“相同窗口”。点击链接后，地址栏不变；_top表示整页窗口； _parent表示父窗口。
21. display:none, visibility: hidden的区别
display:none，元素会变得不可见，并且不会再占用文档的空间。
visibility:hidden元素会变得不可见，依旧会占用文档的空间。
22. 让一个元素隐藏，有哪些css属性可以做到
1.display:none
2.visibility:hidden
3.opacity:0效果和visibility:hidden一样，但是可以被transition和animate。
23. margin和padding的使用场景
何时应当使用margin：
（1）需要在border外侧添加空白时，
（2）空白处不需要有背景（色）时，
（3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白（注意地方见第三点）。
何时应当使用padding
（1）需要在border内侧添加空白时（往往是文字与边框距离的设置），
（2）空白处需要背景（色）时，
（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。
margin使用时应该注意的地方
margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加。
24. link和@import区别
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
25.css3 新特性
（1）圆角（border-radius），阴影（box-shadow）
（2）文字加特效（text-shadow），线性渐变（gradient），变换（transform）
旋转rotate 缩放 scale 定位 translate 倾斜 skew
（3）新增伪类：：selection
（4）媒体查询
当前html字符编码
浏览器兼容模式
设置视口
