ホームページ > 記事 > ウェブフロントエンド > CSS3 で clac() を使用して、画面解像度に応じた適応幅を実装する_html/css_WEB-ITnose
CSS3 で clac() を使用して、画面解像度に応じた適応幅を実装する_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:331371ブラウズ
1. はじめに
Calc() は関数のように見えます。通常、ページを作成するときは、必ず幅 100% の要素 (body 要素など) がいくつか出現します。要素幅が 100% の場合は、他のボックス モデル属性の設定がなければ問題ありません。それ以外の場合、ボックスが破裂します。たとえば、境界線、マージン、パディングがある場合、ボックスが破裂する原因になります。言い換えれば、要素の幅が 100% の場合、要素に border、padding、margin の値を追加する限り、要素ボックスはバーストされます (IE の奇妙なモードを除く標準モードで)。このような現象に遭遇した場合、通常は構造を変えるしか解決できず、場合によっては解決すらできないこともあります。たとえ面倒な方法でそれを実現したとしても、ブラウザの互換性により最終的な効果に一貫性はありません。前回のエッセイで紹介した CSS3 属性の box-sizing はこの問題をある程度解決しますが、calc() 関数を使用すると上記の効果をより簡単に実現できます。
2. 文法
calc() の構文は非常に単純で、私たちが子供の頃に足し算 (+)、引き算 (-)、掛け算 (*)、割り算 (/) を習ったときと同じです。表現する式:
calc() = calc (四則演算);
説明:
長さの値を動的に計算するために使用されます。
(-moz-, -webkit-)
4. 例
例えば、次の設計図を実装するには (注: 画像は、Baidu フロントエンド テクノロジーの 2016 年春のクラスの第 1 段階のタスク 3 のものです)研究所、リンク: http://7xrp04 .com1.z0.glb.clouddn.com/task_1_3_1.png)。
コードは次のとおりです:HTML: (中央の列のレイアウトの一部のみ)
<!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: (中央のレイアウトの一部のみ)
りー