長度單位、calc() 表達式

時間 2019-11-08

標籤長度單位 calc 表達式简体版

原文原文鏈接

長度單位

絕對長度單位

絕對長度單位表明一個物理測量

// 像素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>