zoukankan      html  css  js  c++  java
  • 理解css中的长度单位

    很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~

    css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。

    • %——百分比
    • in——寸
    • cm——厘米
    • mm——毫米
    • pt——point,大约1/72寸;
    • pc——pica,大约6pt,1/6寸;
    • px——屏幕的一个像素点;
    • em——元素的font-size;
    • ex——font-size的x-height值,为小写字母x的高度,通常相当于font-size的一半。

    我们常用的有px、%、em,px就不多说了,em和%多说点儿:

    1 2 3 
    .box{ line-height:1.3em; }

    元素的行高是当前元素继承的font-size的1.3倍,

    1 2 3 
    .box{ font-size:1.3em; }

    当前元素的字体大小是其继承的font-size的1.3倍。

    1 2 3 
    .box{ line-height:130%; }

    元素的行高是当前元素继承的font-size的130%倍,等同于1.3em。

    1 2 3 
    .box{ font-size:130%; }

    当前元素的字体大小是其继承的font-size的130%倍,等同于1.3em。

    恩,迷惑了吗?

    em就是基于当前元素的(如果没设置就是继承其父元素的)font-size。

    而%对于font-size、line-height等,是基于其父元素的font-size的,而对于text-indent、margin、padding、width等属性,则是基于父元素的宽度的。

    CSS3中的单位:

    css3中引入了一些新的单位:

    • ch——字符0(零)的宽度;
    • rem——根元素(html元素)的font-size;
    • vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;
    • vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;
    • vmin——vw和vh中较小的那个。

    显然vw、vh、vmin是针对移动设备的,如果视窗大小变化了,这三个值也会跟着相应的变化。

    rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活——或者说,比px灵活,比em更精确~~。。。XD。。。

    如果没有定义font-size怎么办?

    其实不用担心,传说,各个浏览器史无前例的默认font-size:16px;,所以,即便你在样式文件中忘了定义font-size初始值,也可以放心的使用em、rem。

    浏览器支持:

    rem,各浏览器基本都支持了, IE9+、FF3.6+、Chrome、Safari 5+、以及 Opera 11.6+

    vw、vh、vmin,浏览器支持并不乐观,IE9支持了,Chrome目前不支持,Chrome 20将会重新支持(貌似之前支持过?)、Safari也即将支持了吧,Opera和Firefox也还都不支持。

  • 相关阅读:
    jvm gc 线程
    高分辨率图像建筑物提取数据集制作
    Ubuntu 更改软件源
    后台程序员简单应用前端的bootstrap(小白)
    php--常见算法3
    php--常见算法2
    php--常见算法1
    php三种排序算法
    Django学习之十二:Cache 缓存组件
    Restframe_work 回顾记忆集
  • 原文地址:https://www.cnblogs.com/shihao/p/2454321.html
Copyright © 2011-2022 走看看