利用CSS3中的clac()實現按照屏幕分辨率自適應寬度

時間 2019-12-05

標籤利用 css3 css clac 實現按照屏幕分辨率自適應寬度欄目 CSS 简体版

原文原文鏈接

一、簡介

　　calc()看其外表像個函數。平時在製做頁面的時候，總會碰到有的元素是100%的寬度（例如body元素）。若是元素寬度爲100%時，其自身不帶其餘盒模型屬性設置還好，要是有別的，那將致使盒子撐破。好比說，有一個邊框，或者說有margin和padding，這些都會讓你的盒子撐破。咱們換句話來講，若是你的元素寬度是100%時，只要你在元素中添加了border,padding,margin任何一值，都將會把元素盒子撐破（標準模式下，除IE怪異模式）。平時咱們碰到這樣的現象時，只能經過改變結構來實現，有時甚至沒法解決。就算你經過繁瑣的方法實現了，但因爲瀏覽器的兼容性而致使最終效果不一致。雖然上一篇隨筆介紹的CSS3屬性中的box-sizing在必定程度上解決這樣的問題，但calc()函數功能實現上面的效果來得更簡單。html

二、語法

　　calc()語法很是簡單，就像咱們小時候學加（+）、減（-）、乘（*）、除（/）同樣，使用數學表達式來表示：前端

　　calc() = calc(四則運算)；web

　　說明：瀏覽器

　　用於動態計算長度值。

須要注意的是，運算符先後都須要保留一個空格，表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格；例如：width: calc(100% - 10px)；
可使用百分比、px、em、rem等單位；
任何長度值均可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；

三、瀏覽器兼容性

　　瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都獲得較好支持，一樣須要在其前面加上各瀏覽器廠商的識別符。函數

　　（-moz-、-webkit-）佈局

四、實例

　　好比要實現如下的設計圖（注：圖片來自百度前端技術學院2016春季班第一階段任務三，連接：http://7xrp04.com1.z0.glb.clouddn.com/task_1_3_1.png）中的中間一欄的佈局。spa

　代碼以下：設計

　　HTML：（只有中間一欄的部分佈局）code

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>Third</title>
</head>
<body>
<div class="middle">
            <h3>團隊介紹</h3>
            <p><strong>黃藥師</strong>，「天下五絕」之一「東邪」。桃花島島主，黃蓉之父。黃藥師形相清癯，身材高瘦，風姿雋爽，蕭疏軒舉，湛然若神。身穿青衣直綴，頭戴同色方巾，文士模樣。個性離經叛道，狂傲不羈。性情孤僻，行動怪異，身形飄忽，有如鬼魅。「桃花影落飛神劍，碧海潮生按玉簫」是他一輩子武功的寫照，武功造詣非凡，已臻化境，為金庸小說中武功最絕頂的高手之一。</p>
            <p><strong>歐陽鋒</strong>，「天下五絕」之一「西毒」。歐陽鋒身材高大，身穿白衣，高鼻深目，臉鬚棕黃，英氣勃勃，目光如電，眼神如刀似劍，甚是鋒鋭，語聲鏗鏗似金屬之音。應為歐洲白人血統。此人兇狠毒辣，為求奪得「武功天下第一」的名號不擇手段，是金庸武俠小說中的著名反派角色和武功最絕頂的高手之一。</p>
            <p><strong>段智興</strong>，「天下五絕」之一「南帝」，後改稱「南僧」。法號「一燈」，一燈身穿粗布僧袍，兩道長長的白眉從眼角垂了下來，面目慈祥，眉間雖隱含愁苦，但一番雍容高華的神色。身兼「先天功」及「一陽指」兩大神功武學，功力深厚非凡。</p>
            <p><strong>洪七公</strong>，「天下五絕」之一「北丐」，是郭靖、黃蓉的師父，為金庸小說中武功最絕頂的高手之一。洪七公一張長方臉，頦下微須，粗手大腳，身上衣服東一塊西一塊的打滿了補釘，卻洗得乾乾淨淨，手裡拿著一根打狗棒，背上負著個朱紅漆的大葫蘆，身法迅雷不可目，「神龍見首不見尾」是他一輩子的寫照。</p>
            <p><strong>王重陽</strong>，「天下五絕」之一「中神通」。中國道教全真派創始人，被尊為全真五祖之一，原名中孚，字允卿，本金朝諸生，後為武官，更名德威，字世雄。入道後更名嚞，一名喆，字知明，道號重陽子，故稱王重陽，綽號王害瘋，京兆鹹陽（今陝西省鹹陽市）大魏村人。七個主要門人稱七真。</p>
        </div>
</body>
</html>

　　CSS：（只包含中間佈局部分）htm

.middle {
    width: calc(100% - (80px + 120px + 200px));/*用100%的屏幕寬度減去已經知道固定的寬度，就是自適應的部分*/
    overflow: auto;
    background-color: #FFF;
    border: 1px #999 solid;
    margin: 20px;
}
.middle h3,p {
    margin: 20px;
}