CSS box-sizing | CSS プロパティ値| 意味使い方実例

CSS box-sizing| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-07-05 css-reference

ページコンテンツ

`box-sizing` CSS プロパティとは

トピック：デフォルトのCSSボックスモデルを変更するために使用されるこのモデルは、通常、ブラウザが要素の幅と高さを計算するために使用する

基本書式：

セレクタ

{

box-sizing

値;

}

 #webref {
    box-sizing: border-box;
}

デフォルト値・初期値 :	`content-box`
適用対象 :	width および height を受け付ける全ての要素
継承 :	不可
メディア :	visual
計算値 :	指定値
`CSS Version`	`CSS3`
アニメーションの種類 :	個別アニメーション可能なプロパティ一覧
JavaScript 構文	object.style.webrefSizing="funWebref"
正規順序 :	形式文法で定義される一意のあいまいでない順序
CSSの構文	`box-sizing: content-box \| border-box \| initial \| inherit;`

値	説明
`content-box`	指定された幅と高さのプロパティには、要素の内容のみが含まれます。パディング、境界線またはマージンは含まれません。
`padding-box`	指定されたwidthプロパティとheightプロパティにはパディングサイズが含まれ、境界またはマージンは含まれません。
`border-box`	指定されたwidthプロパティとheightプロパティには、パディングとボーダーが含まれますが、マージンは含まれません。
`inherit`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

：box-sizing 関連記事