css五个常用单位

前言:

       想当年在学校一个px单位走天下. 至于为什么是什么原理也不知道. 老师说就这么用就行了(好想打她一顿). 然后终于混完大学, 准备出来找工作. 面试时被问到 css 中常用的单位有哪些. 我心想不就一个px么. 怎么还有其他的单位? 然后再想想老师都没说肯定是面试官虎我的. 然后我自信的说就px. 然后你懂的, 我就被out了.  其实想想也是, 常用的单位都不懂还敢出来想当年我的心也是大. 然后赶忙回来复习复习这个知识点.其实东西不多也不难,接下来我一一介绍.

一. 作用

       首先我们要知道这个单位是用来干嘛的,通常我们都是用来调容器的大小,线框大小,文字大小,段落大小 ,margin/padding的距离等等.没有它我们再网页上绘制不出大小,就像我们日常生活中 量度长度时有厘米,英寸,英尺,等不同的单位.

二. 单位

    1. px

        这个是我们最常接触到的单位,它是一个绝对的单位,一个px 是一个光点的意思,假如你正在使用 1920 * 1080 这个16:9的像素度那么就代表屏幕的横向是1920个点,纵向是1080个点组成 ,一个px就是一个光点的大小.   

    2. em

        它是一个相对单位,是基于目前的容器的大小,再根据em的值去乘出最终的大小.可以理解为就是所在容器的值得倍数. 例如这里一个空的容器里面有一个p标签设置的字体大小是3em,然后body的字体大小设置是10px,这样的话3个em就相当于 3*10px 也就是30px.注意,它是基于父容器的值来翻倍的 ,如果嵌套得越多就越难计算越难计算里面的大小.

例如:

        <div> A <div> B <div> C </div></div></div>

        如果将body的font-size设置为10px 所有div的font-size都设置为2em 那么:

         A 的大小是20px,

         B 的大小是40px,

         C 的大小是80px, 

 

    3. rem 

         rem 也就是root em,如果理解em也就不难理解rem. 刚刚说到em是基于父容器的.如果嵌套得很多的话就很难计算嵌套里面的值了,那么rem就是解决这个问题的.它的参考像素都是基于root元素,也就是html这个元素 所以无论你嵌套多少个 都是rem * html所设置的px. rem的优势就是更加容易去计算.

例:

 

    4. vw & vh

       他们是 viewport width 与 viewport height的缩写,它的设定值只有1~100  如果在一个div里面设置 width:100vw; height:100vh; 那么将占整屏 如果出现滚动就将body的margin和padding设为0, 如果设置width:50vw; height:50vh; 将占半屏.其实也就是将整个屏幕分为100份了 就看你怎么分咯. 我们通常的用到的是 100vh 将容器占满后要做水平垂直居中都会非常容易.

    5.vmin & vmax

       vmin代表屏幕较短的一边而vmax就是屏幕较长的一边, 这个单位通常用来配合media query做响应式网站.  

       例: 如果我们放入一张图片 图片大小是大于你的屏幕的像素的, 这样我们将img这个标签的width:100vmin; 这样网页就会以屏幕较短的边长做为宽度,如果将width:100vmax 就会与屏幕较长的一边作为宽度. 这个是一个简答的应用当然真正要用到他来设计响应式网页就要考虑很多的东西了需要用到一章来介绍啦.等有时间了再来完善完善.

后记:

哈哈看完这个以后面试官再问到肯定是可以答得上的了, 不过其实一般这些都是很基础的问题啦 一般面试都是会看你做过什么项目 用过什么框架的.当然啦我现在已经是工作了的.前几天在b站重新看到了介绍这个单位的视频想记录一下 之前找工作时的尴尬.