长度单位、calc() 表达式

2017-07-11 本文已影响103人 _空空

长度单位

绝对长度单位

绝对长度单位代表一个物理测量

// 像素px（pixels）：在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。最终，它们被按照像素处理   
// 像素其实也算相对单位 

// 英寸in（inches）
1in = 2.54cm = 96px　

// 厘米cm（centimeters）
1cm = 10mm = 96px/2.54 = 37.8px

// 毫米mm（millimeters）
1mm = 0.1cm = 3.78px
　
// 1/4毫米q（quarter-millimeters）
1q = 1/4mm = 0.945px

// 点pt（points）
1pt = 1/72in = 0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px

// 派卡pc（picas）
1pc = 12pt = 1/6in = 1/6*96px = 16px

字体相关相对长度单位

长度值目前比较常用的是：px（像素）、em、%（百分比），要注意其实这三种单位都是相对单位
像素 px
- 像素为什么是相对单位呢？因为像素指的是显示器上的小点。实际情况是与浏览器使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位
em
- em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size
- 具有继承的特点
- 当没有设置font-size时，浏览器会有一个默认的 em 设置：1em = 16px
- 缺点：容易混乱

    <style type="text/css">
    .box{
        font-size: 20px;
    }
    
    .in{
        /* 相对于父元素，所以2*20px=40px */
        font-size: 2em;
        /* 相对于本身元素，所以5*40px=200px */
        height: 5em;
        /* 10*40px=400px */
        width: 10em;
        background-color: lightblue;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="in">测试文字</div>    
</div>
</body>

rem
- rem 是相对于根元素html的font-size属性的计算值，比较好计算
- 当没有设置 font-size 时，浏览器会有一个默认的 rem 设置：1rem = 16px，这点与 em 是一致的
- 兼容性：IE8-不支持

    <style type="text/css">
    /* 浏览器默认字体大小为16px，则2*16=32px，所以根元素字体大小为32px */
    html{font-size: 2rem;}

    /* 2*32=64px */
    .box{font-size: 2rem;}

    .in{
        /* 1*32=32px */
        font-size: 1rem;
        /* 1*32=32px */
        border-left: 1rem solid black;
        /* 4*32=128px */
        height: 4rem;
        /* 6*32=192px */
        width: 6rem;
        background-color: lightblue;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="in">测试文字</div>    
</div>

<script type="text/javascript">
var inDiv = document.getElementsByClassName('in')[0];

console.log(getComputedStyle(inDiv, false)['font-size']);   // 32px
console.log(getComputedStyle(inDiv, false)['width']);   // 192px
</script>
</body>

百分比 %（percentage）
- p {font-size:12px; line-height:130%;}设置行高（行间距）为字体的130％12*1.3=15.6px
ex
- ex是指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值
- ex在实际中常用于微调

    <style type="text/css">
    .box{font-size: 20px;}
    
    .in{
        font-size: 1ex;
        border-left: 1ex solid black;
        height: 10ex;
        width: 20ex;
        background-color: lightblue;
    } 
    </style>
</head>
<body>
<button>宋体</button><button>微软雅黑</button><button>arial</button><button>serif</button>
<div class="box">
    <div class="in" id="test">测试文字</div>    
</div>

<script type="text/javascript">
var aBtns = document.getElementsByTagName('button');
for(var i = 0; i < aBtns.length; i++ ){
    aBtns[i].onclick = function(){
        test.style.fontFamily = this.innerHTML;
    }
}    
</script>
</body>

ch
- ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值
- 兼容性：IE8-不支持
- ch在实际中主要用于盲文排版

视口相关相对长度单位

视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，它们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在
兼容性：IE8-不支持，IOS7.1-不支持，android4.3-不支持（对于vmax，所有IE浏览器都不支持）
vh
- 布局视口高度的 1/100
vw
- 布局视口宽度的 1/100
vmin
- 布局视口高度和宽度之间的最小值的 1/100
vmax
- 布局视口高度和宽度之间的最大值的 1/100

calc() 数学表达式（calculation）

数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路
数学表达式calc()是calculate计算的缩写，它允许使用+、-、*、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算
兼容性：IE8-、safari5.1-、ios5.1-、android4.3-不支持，android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position
注意：+ 和 - 运算符两边一定要有空白符

    <style type="text/css">
    .test1{
        border: calc( 1px + 1px ) solid black;
        /* calc里面的运算遵循 *、/ 优先于 +、- 的顺序 */
        width: calc(100%/3 - 2*1em - 2*1px);
        background-color: pink;
        font-style: toggle(italic, normal); 
    }

    .test2{
        /* 由于运算符 + 的左右两侧没有空白符，所以失效 */
        border: calc(1px+1px) solid black;
        /* 对于不能小于0的属性值，当运算结果小于0时，按0处理 */
        width: calc(10px - 20px);
        padding-left: 10px;
        background-color: lightblue;
    }
    </style>
</head>
<body>
<div class="test1">测试文字一</div>    
<div class="test2">测试文字二</div>
</body>

应用：数学表达式calc()常用于布局中的不同单位的数字运算

    <style type="text/css">
    p{margin: 0;}
    .parent{overflow: hidden; zoom: 1;}
    .left{float: left; width: 100px; margin-right: 20px;}    
    .right{float: left; width: calc(100% - 120px);}
    </style>
</head>
<body>
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>

长度单位、calc() 表达式

长度单位

绝对长度单位

字体相关相对长度单位

视口相关相对长度单位

calc() 数学表达式（calculation）

猜你喜欢

热点阅读