前端知识点系列二：CSS

1. 标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
IE的content部分把 border 和 padding计算了进去;

无论是哪种盒子模型，子元素相对于父元素content定位。改变盒子模型的属性为 box-sizing: border-box/content-box;。

2. CSS选择符有哪些？哪些属性可以继承？

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（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

3. CSS选择器优先级算法如何计算？

!important > id > class > tag

important 比内联优先级高

4. CSS选择器的权重

/*权重为1*/ div{ }
/*权重为10*/ .class1{ }
/*权重为100*/ #id1{ }
/*权重为100+1=101*/ #id1 div{ }
/*权重为10+1=11*/ .class1 div{ }
/*权重为10+10+1=21*/ .class1 .class2 div{ }

5.display有哪些值

属性	说明
block	像块类型元素一样显示
none	隐藏元素，并且不占位
inline-block	像行内元素一样显示，但其内容象块类型元素一样显示
list-item	像块类型元素一样显示，并添加样式列表标记
table	此元素会作为块级表格来显示
inherit	从父元素继承 display 属性的值

6. position属性值

absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继承 position 属性的值

7. CSS3有哪些新特性？

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （ShadowReflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画，多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation

8. 如何用CSS创建一个三角形？

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent; 
}

9. 块元素水平垂直居中

<div id="container">
    <div id="box">
        元素水平居中
    </div>
</div>

<style>
/* 利用transform */
#container {
  position: relative;
  width: 500px;
  height: 500px;
  background: #0099cc;
}

#box {
  width: 100px;
  height: 200px;
  border: 2px solid blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 或者利用flex*/
#container {
  position: relative;
  width: 500px;
  height: 500px;
  background: #0099cc;

  display: flex;
  justify-content: center;
  align-items: center;
}

#box {
  width: 100px;
  height: 200px;
  border: 2px solid blue;
}
</style>

10. px，em和rem的区别

px像素是相对于屏幕分辨率的相对长度单位。比较精准
em是相对文本字体尺寸的相对单位（1em = 16px）。当改变浏览器设置里的字体大小时，em值也会相应改变。 em会继承父级元素的大小，类似百分比。所以，它的值并不固定。
rem（font size of the root element）是相对HTML根元素的相对单位，和px之间的转换规则和rem一样。它的优势在于不会继承父级元素，所以值固定。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。从上面的计算结果，使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

11. 如何清除浮动

最常用的两种方法如下（应用在父元素上面）：

<div id="box" class="clear">
    <div id="child">a float box</div>
</div>

<style>
body {
    padding: 100px;
}

#box {
    border: 2px solid red;
}

#child {
    float: left;
    width: 100px;
    height: 100px;
    border: 2px solid green;
}
/*方法一*/
.clear {
    overflow: hidden;
}
/*方法二*/
.clear:after {
    display: block;
    content: '';
    clear: both;
}
</style>