CSS 知识点汇总

一、简介

1. CSS：Cascading Style Sheets

二、CSS选择器

1. 元素: div { ... }
2. id: #id { ... }
3. class: .className { ... }
4. 子孙: div p { ... } div的所有p子孙
5. 子: div>p { ... } div的所有p子结点（不包含孙结点）
6. 兄弟: div~p { ... } div的所有p兄弟结点
7. 相邻兄弟: div+p div的所有p相邻兄弟结点，只匹配下相邻兄弟
8. 属性: [ src$='.pdf' ] 中括号，内含属性匹配公式
9. 伪类: :<pseudo-class>
10. 伪元素: : <pseudo-element> 或 ::<pseudo-element>

三、盒子模型（Box Model）

1. 标准盒子模型： 盒子宽/高 = width/height + padding + border + margin
   

2. 怪异盒子模型（IE）： 盒子宽/高 = width/height + margin
   

3. CSS3的box-sizing

• box-sizing: content-box : 标准盒子模型 (默认)
• box-sizing: border-box : 怪异盒子模型

四、显示

1. display：inline, block, inline-block
2. 设置元素不可见的几种方法

五、定位（positon, float）

六、flex布局（弹性布局）

七、grid布局（网格布局）

八、居中

九、变换（transform）

1. translate 平移
2. rotate 选择
3. scale 放缩

十、渐变（gradient）

1. linear-gradient(45deg, orange 0, yellow 50%, green 100%)
2. radial-gradient(ellipse 100px 80px at left 200px bottom 100px, orange 0, yellow 50%, green 100%)

十一、过渡、动画

1. transition(属性，持续时间，过渡时间方法，延迟时间)

2. animation(动画简写属性，持续时间方法，延迟时间，重复次数，是否逆向播放...)

   时间方法：[linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)]

   /* 动画简写属性 */
   @keyframes animationName1
   {
       from { background-color:red; }
       to { background-color:blue;}
   }
   @keyframes animationName2
   {
       0% { background-color:red; }
       50% { background-color: green; }
       100% { background-color:blue;}
   }
   

十二、CSS3

1. 伪元素选择器
2. 伪类选择器
3. 属性选择器
4. 渐变、过渡、动画
5. 盒模型
6. flex
   …

十三、优先级

十四、补充

1. 元素设置不可点击

1. <button> 设置 disabled 属性即可。需要取消时删除该属性（注意不是设置为false）
2. css 设置 pointer-event 为 none