Css总结 --笔记

一、Css单位

一、前言

Css单位分为相对单位与绝对单位两大类

相对单位：元素大小参照另一个对象的大小来决定
绝对单位：元素大小是所设定的固定的绝对值

二、相对单位

相对单位主要分字体相对单位 和 浏览器窗口相对单位 两大类

字体相对单位：与font-size属性有关的单位，常见的字体相对单位有em和rem
浏览器窗口相对单位：与浏览器窗口大小有关的单位，常见的浏览器窗口相对单位有vw、vh、vmax和vmin

2.1 em单位

定义：em（Element meter），特点如下：

em自身元素没有font-size，则参照的对象是其父元素的font-size，1em等于其父元素的font-size一倍；如果自身设置了font-size，则相对于自身字体大小进行计算
em的具体值会出现嵌套计算的现象，如下面例子：

<div class="grandparent">
  grandparent
  <div class="parent">
    parent
    <div class="child">
      child
    </div>
  </div>
</div>

.grandparent {
  width: 200px;
  background-color: pink;
}

.parent {
  background-color: cornflowerblue;
  font-size: 2em;
}

.child {
  background-color: goldenrod;
  font-size: 2em;
}

因为grandparent没有设font-size属性，所以继承了html属性，即16px，后续因为是2em，所以是32px，又因有层级嵌套关系，所以是64px

2.2 rem单位

定义：rem（Root element meter），特点如下：

rem参照的对象是根元素html的font-size，1rem = 16px；
rem的具体值不会出现嵌套计算的现象，因为无论在哪个层级使用rem单位，都是参照根元素html的font-size，如下面例子：

<div class="grandparent">
  grandparent
  <div class="parent">
    parent
    <div class="child">
      child
    </div>
  </div>
</div>

.grandparent {
  width: 200px;
  background-color: pink;
}

.parent {
  background-color: cornflowerblue;
  font-size: 2rem;
}

.child {
  background-color: goldenrod;
  font-size: 4rem;
}

这次因为parent 是 2rem 、 child 是 4rem，所以效果同上。只是没有了嵌套关系

2.3 vw 和 wh单位

vw

定义：（viewpoint width），浏览器窗口宽度的百分比，特点如下：

vw参照的对象是浏览器窗口，假设浏览器宽度1000px，则1vw = 浏览器窗口宽度的1% = 10px。
vw是动态的，会随着浏览器窗口大小的变化而动态计算宽度值。

vh

定义：（viewpoint height），浏览器窗口高度的百分比，特点如下：

vh参照的对象是浏览器窗口，假设浏览器高度1000px，则1vh = 浏览器窗口高度的1% = 10px。
vw是动态的，会随着浏览器窗口大小的变化而动态计算高度值。

2.4 vmax 和 vmin单位

定义：（viewpoint max width）和（viewpoint min width），特点如下：

（viewpoint max width），浏览器窗口宽度和高度相比的较大值
（viewpoint min width），浏览器窗口宽度和高度相比的较小值

假设浏览器窗口高度为800px、宽度为1200px，那么1vmax = 12px，1vmin = 8px。

三、绝对单位

绝对单位主要分 单位像素px 和 与印刷字体有关的绝对单位pt

定义：（pixel），像素是使用频率最高，补充知识如下：

屏幕分辨率：在显示器领域，我们常说1080p、2K、4K，这其实都是描述的是屏幕分辨率，屏幕分辨率指的是屏幕中像素点的个数，如1080p的分辨率共有1920*1080个像素，2K的分辨率共有2560*1440个像素，4K的分辨率共有3840*2160个像素。
逻辑像素：指的是一个CSS像素，如在CSS样式中的1px就表示一个逻辑像素。

其他单位补充：

1in = 25.4mm = 2.54cm = 6pc = 72pt =96px

四、CSS3 media检查终端设备类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕、平板或者智能手机
speech	用于屏幕阅读器

Demo 用于检查客户端是移动端、iPad还是PC端

![mediaType](CSS单位.assets/mediaType.gif)<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*PC端*/
    /* 当浏览器最小宽度是960px，盒子的背景色为当前颜色 */
    @media screen and (min-width: 960px){
        .box{
        width: 100%;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(255, 166, 0);
    	}
    }
    
    /*平板*/
    /* 当浏览器宽度是500px - 800px  之间的时候，盒子的背景色为当前颜色 */
    @media screen and (max-width: 960px) and (min-width: 600px) {
        .box{
            width: 100%;
            height: 500px;
            background: rgb(102, 255, 0);
        }
    }
    
    /*手机*/
     /* 当浏览器宽度是0 - 500px  之间的时候，盒子的背景色为当前颜色 */
    @media screen and (max-width:600px) and (min-width: 0){
        .box{
            width: 100%;
            height: 500px;
            background: rgb(0, 217, 255);
        }
    }
</style>
<body>
    <div class="box">
        我是测试盒子
    </div>
</body>
</html>

二、陌生Css

滚轮scrollBar

//我可控制scrollbar 的样式
::-webkit-scrollbar {  z-index: 50;  width: 5px;  height: 3px;}::-webkit-scrollbar-thumb {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  background-color: rgba(102, 102, 102, 1);  transition: all .2s;  height: 5px;  border: 1px solid rgba(0, 0, 0, 0.2);}:hover::-webkit-scrollbar-thumb {  transition: all .2s;}

加粗

font-weight