CSS 3ボックスモデル

CSSにはボックスモデルという基礎設計モデルがあり、Webページの要素の怒りをどのようにボックスと見なして解析したのかを定義しており、ボックスには異なるインタフェースがありません.本文は主にCSS 3ボックスモデルを紹介します.1.CSSボックスモデルの紹介CSSには主に以下のいくつかのボックスモデルがある:inline、inline-block、block、table、absolute position、float.ブラウザは各要素を1つのボックスモデルと見なし、各ボックスモデルは以下のいくつかの属性の組み合わせによって決定される.display、position、float、width、margin、padding、height、borderなど.ボックスモデルによってレイアウトが異なります.
1.1ボックスモデルとは
CSSの各要素は、HTML、bodyラベル要素を含むボックスモデルです.
1.2リセットボックスモデル解析1)W 3 Cの標準ボックスモデルheight:コンテンツ高さwidth:コンテンツ幅

      （      ）
element     =      +    +    +   
element     =      +    +    +   

      （    ）
element    =      +    +   
element    =       +    +   

2）IE     （IE6  ,   IE6  ）

      （    ）
element     =      +   
element     =      +   

      （    ）
element    =     
element    =     

2.CSS 3ボックスモデル属性2.1 box-sizing

box-sizing: content-box | border-box | inherit

content-box:標準ボックスモデル

border-box:IE従来のボックスモデル(padding,border破壊レイアウトを防止するためによく使用される)

inherit:要素継承親要素ボックスモデルモード

3.コンテンツオーバーフローCSSの各要素はすべて1つの箱と見なして、箱は容器で、スタイルの中で箱の幅と高さを指定すると、一部のコンテンツは箱の中で収容できないかもしれません.この場合、over-flowプロパティを使用して、ボックスに収容できないコンテンツを表示する方法を指定できます.
over-flowはCSS 2である.1仕様の内容、CSS 3にoverflow-x、overflow-yを追加

overflow-x: visible | hidden | scroll | auto |no-display | no-content

overflow-y: visible | hidden | scroll | auto |no-display | no-content

visible:デフォルト.コンテナの内容を切り取る、スクロールバーを追加しない、clip属性が失効し、コンテナの高さを超えるとコンテナ

がオーバーフローすることを示す.

auto:コンテンツがコンテナにあふれたときにスクロールバーを切り取り、追加します.

hidden:コンテンツがコンテナからあふれ出ると、すべてのコンテンツが非表示になり、スクロールバーは表示されません.隠した内容はまだ知識が表示されず、他の要素のレイアウトには機能しません.

no-displayは一般的ではありません.グーグル火狐の最新版ブラウザでは

はサポートされていません.

no-contentはよく使われません.グーグル火狐の最新版ブラウザでは

はサポートされていません.
4.CSS 3フリースケーリング属性

resize: none | both | horizontal | vertical | inherit

textarea要素はデフォルトでresize機能があり、noneに設定するとテキストボックスのサイズを変更できません.
5.CSS 3外郭属性

outline:[outline-color]|[outline-style] | 
[outline-width] | [outline-offset] | inherit