1.标准的CSS盒子模型及其和低版本的IE盒子模型的区别？
标准（W3C）盒子模型：width = 内容宽度（content） + border + padding + margin
低版本IE盒子模型： width = 内容宽度（content + border + padding）+ margin
区别： 标准盒子模型盒子的height和width是content（内容）的宽高，而IE盒子模型盒子的宽高则包括content+padding+border部分。
2.几种解决IE6存在的bug的方法
- 由
float引起的双边距的问题，使用display解决； - 由
float引起的3像素问题，使用display: inline -3px; - 使用正确的书写顺序
link visited hover active，解决超链接hover点击失效问题； - 对于
IE的z-index问题，通过给父元素增加position: relative解决； - 使用
!important解决Min-height最小高度问题； - 使用
iframe解决select在IE6下的覆盖问题； - 使用
over: hidden,zoom: 0.08,line-height: 1px解决定义1px左右的容器宽度问题；
注意：有关IE6支不支持!important的问题，对于单个类是支持的。例如：
.content { color: pink !importent };
.content { color: orange };
// 这里IE6及以上，FF，google等都将显示粉红色
但是，当一个样式内部有多个相同属性的时候。例如：
.content { color: pink !importent; color: orange };
// IE7及以上，显示粉红色，而IE6将显示橙色（原因是一个样式内重复设置了属性，后面的就会覆盖掉之前的）
3.CSS选择符有哪些？哪些属性可以继承？
常见的选择符有一下：
id选择器（#content），类选择器（.content）, 标签选择器（div, p, span等）, 相邻选择器（h1+p）, 子选择器（ul>li）, 后代选择器（li a）， 通配符选择器（*）, 属性选择器（a[rel = "external"]）， 伪类选择器（a:hover, li:nth-child）
可继承的样式属性： font-size, font-family, color, ul, li, dl, dd, dt;
不可继承的样式属性： border, padding, margin, width, height；
4.CSS优先级算法如何计算？
- 考虑到就近原则，同权重情况下样式定义以最近者为准
- 载入的样式按照最后的定位为准
优先级排序：
同权重情况下： 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
!important > # > . > tag
注意： !important 比 内联优先级高
5.CSS3新增伪类有那些？
-
:root选择文档的根元素，等同于html元素 -
:empty选择没有子元素的元素 -
:target选取当前活动的目标元素 -
:not(selector)选择除selector元素意外的元素 -
:enabled选择可用的表单元素 -
:disabled选择禁用的表单元素 -
:checked选择被选中的表单元素 -
:nth-child(n)匹配父元素下指定子元素，在所有子元素中排序第n -
nth-last-child(n)匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数 -
:nth-child(odd) -
:nth-child(even) -
:nth-child(3n+1) -
:first-child -
:last-child -
:only-child -
:nth-of-type(n)匹配父元素下指定子元素，在同类子元素中排序第n -
:nth-last-of-type(n)匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数 -
:nth-of-type(odd) -
:nth-of-type(even) -
:nth-of-type(3n+1) -
:first-of-type -
:last-of-type -
:only-of-type -
::selection选择被用户选取的元素部分（伪元素） -
:first-line选择元素中的第一行（伪元素） -
:first-letter选择元素中的第一个字符（伪元素） -
:after在元素在该元素之后添加内容（伪元素） -
:before在元素在该元素之前添加内容（伪元素）
6.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
水平居中
// 方式1： 使用margin： 0 auto居中
css:
* {margin: 0; padding: 0;}
.content {
margin: 0 auto;
width: 100px;
height: 100px;
background: pink;
}
// 方式2： 使用 定位 + left 居中
css:
* {margin: 0; padding: 0;}
.content {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
html:
<div class="content"></div>
垂直居中
1.已知父元素高度情况下
方法1：
css:
* {margin: 0; padding: 0;}
.content {
width: 600px;
height: 600px;
border: 1px solid #ccc;
}
.content-one {
width: 100px;
height: 100px;
background: pink;
position: relative; // 父元素无定位，子元素直接用相对定位
top: 50%;
transform: translateY(-50%);
}
html:
<div class="content">
<div class="content-one"></div>
</div>
方法2：
css:
* {margin: 0; padding: 0;}
.content {
width: 600px;
height: 600px;
border: 1px solid #ccc;
position: relative; // 给父元素定位，子绝父相
}
.content-one {
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
html:
<div class="content">
<div class="content-one"></div>
</div>
如何让绝对定位的div居中
css:
* {margin: 0; padding: 0;}
.content {
margin: 0 auto;
position: absolute;
width: 1500px;
background: pink;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
html:
<div class="content"></div>
7.display有哪些值？他们的作用是什么？
| 值 | 作用 |
|---|---|
| none | 使用后元素将不会显示 |
| grid | 定义一个容器属性为网格布局 |
| flex | 定义一个弹性布局 |
| block | 使用后元素将变为块级元素显示，元素前后带有换行符 |
| inline | display默认值。使用后原色变为行内元素显示，前后无换行符 |
| list-item | 使用后元素作为列表显示 |
| run-in | 使用后元素会根据上下文作为块级元素或行内元素显示 |
| table | 使用后将作为块级表格来显示（类似<table>），前后带有换行符 |
| inline-table | 使用后元素将作为内联表格显示（类似<table>），前后没有换行符 |
| table-row-group | 元素将作为一个或多个行的分组来显示（类似<tbody>） |
| table-hewder-group | 元素将作为一个或多个行的分组来表示（类似<thead>） |
| table-footer-group | 元素将作为一个或多个行分组显示（类似<tfoot>） |
| table-row | 元素将作为一个表格行显示（类似<tr>） |
| table-column-group | 元素将作为一个或多个列的分组显示（类似<colgroup>） |
| table-column | 元素将作为一个单元格列显示（类似<col>） |
| table-cell | 元素将作为一个表格单元格显示（类似<td>和<th>） |
| table-caption | 元素将作为一个表格标题显示（类似<caption>） |
| inherit | 规定应该从父元素集成display属性的值 |
其中，常用的有：block， inline-block， none， table， line。
8.position的值relative和absolute定位原点？
首先，使用position的时候，应该记住一个规律是‘子绝父相’。
relative（相对定位）： 生成相对定位的元素，定位原点是元素本身所在的位置；
absolute（绝对定位）：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的。
fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right、z-index 声明）。
inherit：规定从父元素继承 position 属性的值。
更新一个属性
sticky: (新增元素，目前兼容性可能不是那么的好)，可以设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可。
注意：
- 使用
sticky时，必须指定top、bottom、left、right4个值之一，不然只会处于相对定位； sticky只在其父元素内其效果，且保证父元素的高度要高于sticky的高度；- 父元素不能
overflow:hidden或者overflow:auto等属性。
9.CSS3有哪些新特性？
关于CSS新增的特性，有以下：
- 选择器;
- 圆角
（border-raduis）; - 多列布局
（multi-column layout）; - 阴影
（shadow）和反射（reflect）; - 文字特效
（text-shadow）; - 文字渲染
（text-decoration）; - 线性渐变
（gradient）; - 旋转
（rotate）/缩放（scale）/倾斜（skew）/移动（translate）; - 媒体查询
（@media）; RGBA和透明度 ;@font-face属性;- 多背景图 ;
- 盒子大小;
- 语音;
10.用纯CSS创建一个三角形的原理是什么？
方法一：隐藏上，左，右三条边，颜色设定为（transparent）
css:
* {margin: 0; padding: 0;}
.content {
width: 0;
height: 0;
margin: 0 auto;
border-width: 20px;
border-style: solid;
border-color: transparent transparent pink transparent; // 对应上右下左，此处为 下 粉色
}
html:
<div class="content"></div>
方法二： 采用的是均分原理
实现步骤： 1.首先保证元素是块级元素；2.设置元素的边框；3.不需要显示的边框使用透明色。
css:
* {margin: 0; padding: 0;}
.content {
width:0;
height:0;
margin:0 auto;
border:50px solid transparent;
border-top: 50px solid pink;
}
html:
<div class="content"></div>