長度單位、calc() 表示式
阿新 • • 發佈：2019-07-13
長度單位
絕對長度單位
- 絕對長度單位代表一個物理測量
// 畫素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 - 缺點：容易混亂
- em表示元素的
<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-不支援
- rem 是相對於根元素
<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在實際中常用於微調
- 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在實際中主要用於盲文排版
- ch與ex類似，被定義為數字
視口相關相對長度單位
- 視口相關的長度值相對於初始包含塊的大小。當初始包含塊的寬高變化時，它們都會相應地縮放。然而，當根元素的
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>