基础单位的汇总与简介

首先我们要知道在前端中有许多单位，每个单位都有着不同的特点，今天我们就来迈入前端的基础知识，了解这些基础单位都有什么用法吧！

PX

这是css中最基础的像素单位，也是我们日常中所最长用到的单位，每1px所代表的就是1像素的距离，总结来说就是像素单位，是绝对单位，不能继承，写多少就是多少，我们在代码中这样运用：

/* 浏览器默认字体大小就是16px */
div{
    // px无法继承  继承得是font-size属性
    font-size: 30px;
    color: red;
}

%

这个在css中可不是除号哦！这个代表的是当前元素在父级元素中的百分比占比，width：1%；就是在父元素中占到1%的宽度距离，百分比是一个计量单位，总结来说就是有继承属性，是父元素得占比，我们在代码中这样运用：

/* 浏览器默认字体大小就是16px */
div{
    font-size: 30px;
    color: red;
    width: 500px;
    height: 500px;
    border: 1px solid blue;
}
p{
    /* 80%需要和父元素得宽度作乘法运算  80% * 500 = 400 */
    width: 80%;
    border: 1px solid red;
}

em

是针对父元素得大小，有继承特点，比如父元素得字体大小20px ，那么，针对于子元素来说，就是1em, 也就是1em = 20px(换算)，在代码中这样运用：

.box{
    // 跟这个没关系
    font-size: 40px;
}
/* 浏览器默认字体大小就是16px 跟直接得父元素有关系 */
.div {
    font-size: 30px;
}

p {
    font-size: 0.5em;
}

// 结构
<div class="box">
    <div class="div">
        文本大小
        <p>
            段落p标签
        </p>
    </div>
</div>

rem

rem也是一个响应式得单位，但是，是针对根元素html得大小

比如html标签得字体大小是10px，那么 1rem = 10px，在代码中这样运用：

html{
    font-size:10px;
   }

   .div{
    /* 如果字体是30px  那么  30px / html中得 10px  = 3 rem */
    font-size: 3rem;
    width: 30rem;
    height: 50rem;
    border: 1px solid red;
    float: left;
   }
   .div1{
    width: 300px;
    height: 500px;
    border: 1px solid red;
    float: left;
   }

vw vh

vw vh 其实就是百分比，针对得不是父元素，针对得是可视窗口宽度和高度得1%, 也就是1vw/1vh = 1%可视窗口得宽度和高度，在代码中这样运用：

.box{
width: 10vw;
height: 10vh;
border: 1px solid red;
}
.div{
width: 10vw;
height: 10vh;
border: 1px solid red;
}

// 结构
<div class="box">
<div class="div">
    文本大小
    <p>
        段落p标签
    </p>
</div>
<div class="div1"></div>
</div>

vmin vmax

针对可视窗口，vmin是可视窗口中得最小值 vmax 是可视窗口中得最大值 ，在代码中这样运用：

.div{
    /* 520 */
    width: 10vmax; 
    /* 761 */
    height: 10vmin;
    border: 1px solid red;
}

以上便是所有熟知的基础单位的简单介绍，当你看到这个地方的时候，便证明你已经看完了这篇文章，那么，给兄弟我在评论区发两张坤图支持一下作者，感谢感谢！