ホームページ > ウェブフロントエンド > htmlチュートリアル > css3 ボックス サイズ設定プロパティ_html/css_WEB-ITnose

css3 ボックス サイズ設定プロパティ_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:49:29
オリジナル
1448 人が閲覧しました

定義と使用法

box-sizing プロパティを使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。

たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing を「border-box」に設定することでこれを行うことができます。これにより、ブラウザーは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置します。

デフォルト: 継承: バージョン: JavaScript 構文:
content-box
no
CSS3
object.style.boxSizing="border-box"

ボックスのサイズ: content-box | border-box

デフォルト値: content-box

content-box:

パディングとボーダーは、定義された幅と高さに含まれません。オブジェクトの実際の幅は、設定された幅の値とボーダー、パディング、マージンの合計に等しくなります。つまり、(要素の幅 = 幅 + ボーダー + パディング + マージン)

この属性は、標準モードのボックス モデルのように動作します。

border-box:

パディングとボーダーは、定義された幅と高さ内に含まれます。オブジェクトの実際の幅は、設定された幅の値と等しくなります。ボーダーとパディングが定義されている場合でも、オブジェクトの実際の幅は変更されません。つまり、(要素の幅 = 幅)

この属性はボックス モデルのように動作します。変なモードで。

例:

rree

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート