前端知识点系列二：CSS

持续更新......

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

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

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

2. 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）

• 可继承的样式： 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属性值

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

7. CSS3有哪些新特性？

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （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. 块元素水平垂直居中

    

        元素水平居中
    

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*/}

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

11. 如何清除浮动

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

    
a float box

微信公众号：