CSS3 で clac() を使用して、画面解像度に応じた適応幅を実装する_html/css

1. はじめに

2. 文法

(-moz-, -webkit-)

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3 で clac() を使用して、画面解像度に応じた適応幅を実装する_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:20 AM

1. はじめに

Calc() は関数のように見えます。通常、ページを作成するときは、必ず幅 100% の要素 (body 要素など) がいくつか出現します。要素幅が 100% の場合は、他のボックスモデル属性の設定がなければ問題ありません。それ以外の場合、ボックスが破裂します。たとえば、境界線、マージン、パディングがある場合、ボックスが破裂する原因になります。言い換えれば、要素の幅が 100% の場合、要素に border、padding、margin の値を追加する限り、要素ボックスはバーストされます (IE の奇妙なモードを除く標準モードで)。このような現象に遭遇した場合、通常は構造を変えるしか解決できず、場合によっては解決すらできないこともあります。たとえ面倒な方法でそれを実現したとしても、ブラウザの互換性により最終的な効果に一貫性はありません。前回のエッセイで紹介した CSS3 属性の box-sizing はこの問題をある程度解決しますが、calc() 関数を使用すると上記の効果をより簡単に実現できます。

2. 文法

calc() の構文は非常に単純で、私たちが子供の頃に足し算 (+)、引き算 (-)、掛け算 (*)、割り算 (/) を習ったときと同じです。表現する式:

calc() = calc (四則演算);

説明:

長さの値を動的に計算するために使用されます。

演算子の前後にスペースを確保する必要があることに注意してください。式に「*」と「/」がある場合、その前後にスペースを入れることはできませんが、スペースを残すことをお勧めします。 ; 例: width: calc(100% - 10px);

パーセント、px、em、rem などの単位を使用できます

calc() 関数を使用して、任意の長さの値を計算できます。関数は "+"、"-"、"*" 、"/" 演算をサポートします。

calc() 関数は標準の数学演算の優先順位ルールを使用します

ブラウザと calc() の互換性は非常に優れています。 IE9以降、FF4.0以降、Chrome19以降、Safari6以降はすべて十分にサポートされており、各ブラウザメーカーの識別子をそれらの前に追加することも必要です。

(-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: (中央のレイアウトの一部のみ)

りー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。