CSS篇随笔（持续更新）

雨青瓷

已于 2022-08-24 09:10:48 修改

阅读量179

点赞数

文章标签： css

于 2020-08-18 10:12:22 首次发布

本文链接：https://blog.csdn.net/weixin_44122903/article/details/108070992

版权

1.CSS对大小写敏感！

2.<p>标签自带上下16px的外边距，<body>标签自带四周8px的外边距。

3.<pre>标签内输入的内容会保留输入格式：是个展示多行空格的方法（文本中有多少个空格页面都会显示出来，别的标签无论输入多少个空格页面效果都是只显示一个）

4.“initial”属性值意为不继承父元素的值。“inherit”属性值意为继承父元素属性。

5.设置颜色的方式

（1）输入颜色的英文名称
（2）rgb（r，g，b）括号里分别填r，g，b的范围，均在0~255之间取值（该方式意为选择颜色中三原色red，green，blue的成分量）
（3）rgba（r，g，b，a）r，g，b的范围均在0~255之间取值，a代表透明度在0—1之间取值（1：完全不透明，0与之相反）。
（4）用16进制表示。例子：#ccc灰色，#fff白色（对于一些网页中的颜色可以使用取色器）

6.渐变色语法

	background:linear-gradient（角度/方向，rgb语法，rgb语法）
	//0edg：从下往上；180edg：从上往下

7.元素透明度

- 使用opacity属性来设置元素的透明度
- 属性值的范围是0~1
- 0是完全透明，1是完全不透明

8.css新单位：

 vh(视窗单位)：相对于浏览器窗口高度的单位 1vh = 1/100浏览器窗口高度
 vw(视窗单位)：相对于浏览器窗口宽度的单位 1vw = 1/100浏览器窗口宽度
      		- vh、vw是不包含页面滚动条的视窗宽度(innerwidth)，%包含了滚动条的宽度在里面了(outerwidth)
 rem(相对单位)：相对于根元素<html>标签的字体的大小

 vh使用技巧：
            - 当盒子的宽高设置了vh和vw后, 并把盒子设置overflow: auto，会发现随着浏览器窗口大小的变化,盒子也会随着变化。
            - 隐藏滚动条技巧::-webkit-scrollbar {display: none;}
            - height:100vh == height:100%;
                 - 当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
                 - 如果设置height:100vh，该元素会被撑开屏幕高度一致。

  rem操作范例：
            （1）作用于非根元素的字体单位时，表示相对于根元素字体的大小
                    html{
                        font-size：50px
                    }
                    body{
                        font-size:1rem
                        //相对于根元素的，则1rem=50px
                    }

            （2）作用于根元素的字体单位时
                    html {
                        font-size: 1rem;//浏览器默认字体是16px，1rem = 16px;
                    }
            （3）作为其它属性的单位时
                    <style>
                    html{
                        font-size: 50px;
                    }
                    #wrapper-1{
                        font-size: 40px;
                        background-color:red;
                        width:2rem;   //2rem = 100px
                        height: 2rem; //2rem = 100px
                    }
                    #outter-1{
                        font-size: 20px;
                        background-color: yellow;
                        width: 2rem;    //2rem = 100px
                        height: 2rem;   //2rem = 100px
                    }
                    #inner-1{
                        font-size: 10px;
                        background: blue;
                        width: 2rem;   //2rem = 100px
                        height: 2rem;  //2rem = 100px
                    }
                </style>
                <body>
                    <div id = 'wrapper-1'>
                        <div id = 'outter-1'>
                            <div id = 'inner-1'>1</div>
                        </div>
                    </div>
                </body>
                    
    em操作范例：
            （1）作为font-size字体大小的单位时，代表父元素的字体大小
                    例子：//作为font-size的单位
                            body {
                                font-size: 16px;
                            }

                            body>#box {
                                font-size: 2em;//em代表父元素字体大小，2em = 32px;
                            }
            （2）作为其它单位时，以父元素字体的大小当做单位长度
                    例子：//em就是字体大小，根据元素自身的字体大小来定，
                         //如果自身没有定义字体大小，则继承父元素的字体大小
                           html{
                                font-size: 50px;
                            }
                                #wrapper{
                                    font-size: 40px;
                                    background-color:red;
                                    width:2em; //自身定义了字体大小则2em = 80px
                                    height: 2em;
                                }
                                #outter{
                                    font-size: 20px;
                                    background-color: yellow;
                                    width: 2em;//自身定义了字体大小则2em = 40px
                                    height: 2em;
                                }
                                #inner{
                                    font-size: 10px;
                                    background: blue;
                                    width: 2em;//自身定义了字体大小则2em = 20px
                                    height: 2em;
                                }