CSS 知识点汇总

叁歲伎倆 2022-12-18 03:54 185阅读 0赞

## 一、简介 ##

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' ]` [中括号，内含属性匹配公式][Link 1]
9.  **伪类:** `:<pseudo-class>`
10. **伪元素:** `: <pseudo-element>` 或 `::<pseudo-element>`

## 三、盒子模型（Box Model） ##

1.  **标准盒子模型：** 盒子宽/高 = width/height + padding + border + margin  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70_pic_center]
2.  **怪异盒子模型（IE）：** 盒子宽/高 = width/height + margin  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70_pic_center 1]
3.  CSS3的`box-sizing`

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

## 四、显示 ##

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

## 五、定位（[positon, float][positon_ float]） ##

## 六、[flex][]布局（弹性布局） ##

## 七、[grid][]布局（网格布局） ##

## 八、[居中][Link 3] ##

## 九、变换（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  
    …

## 十三、[优先级][Link 4] ##

### 十四、补充 ###

##### 1. 元素设置不可点击 #####

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

[Link 1]: https://blog.csdn.net/weixin_42257329/article/details/90246021?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/0688a78adf734a9abdf14b5ca86ece99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/564f162b282c409b808664d63b8d33eb.png
[inline_ block_ inline-block]: https://blog.csdn.net/SJ1551/article/details/109389540
[Link 2]: https://blog.csdn.net/SJ1551/article/details/109391965
[positon_ float]: https://blog.csdn.net/SJ1551/article/details/109392321
[flex]: https://blog.csdn.net/SJ1551/article/details/109396304
[grid]: https://blog.csdn.net/SJ1551/article/details/109405174
[Link 3]: https://blog.csdn.net/SJ1551/article/details/109392777
[Link 4]: https://blog.csdn.net/SJ1551/article/details/109403424