cssボックスモデルとブロックレベル、行内要素の深い理解

一、CSSボックスモデル

 

ボックスモデルの概要

ボックスモデルはCSSの核心知識点の一つであり、要素がどのように表示され、どのように相互作用するかを指定します.ページ上の各要素は、要素の内容、内側の余白、枠線、外側の余白からなる矩形のボックスと見なされます.次の図に示します.
コンテンツ領域の周囲に内側の余白が表示されます.要素に背景を追加すると、背景は要素の内容と内側の余白からなる領域に適用されます.これにより、コンテンツの周囲に内側余白で分離テープを作成し、バックグラウンドと混合しないようにすることができます.枠線を追加すると、内側の余白領域の外側に線が追加されます.これらの線には、実線、破線、点線など、異なるスタイルと幅があります.枠線の外側は外側距離、外側距離は透明で、要素間の間隔を制御するのに一般的に使用されます.
 
内側の余白、枠線、外側の余白は、1つの要素のすべてのエッジに適用するか、次のように個別のエッジに適用できます.
1
2
3
4
5
6
7
8 padding-top : 20px ;    // padding : 15px ;    // 15px padding : 1px 2px 3px 4px ;    // ，
  /* margin padding*/
  border-top : 1px solid #ccc ;    // border : 2px dashed #000 ;        //
 
 

標準モードとハイブリッドモードでのボックスモデル

 

標準モードとハイブリッドモードとは

ブラウザベンダーが標準と互換性のあるブラウザを作成し始めると、後方互換性を確保したいと考えています.これを実現するために,標準モードとハイブリッドモードの2つのプレゼンテーションモードを作成した.標準モードでは、ブラウザが仕様に従ってページを表示します.ハイブリッドモードでは、ページは比較的緩やかな後方互換性で表示されます.ハイブリッドモードは、通常、古いブラウザの動作をシミュレートして、古いサイトが動作しないようにします.
 

標準モードとハイブリッドモードの区別方法

ブラウザは、DOCTYPE(ドキュメント宣言)が存在するかどうか、およびそのDTDを使用して使用するプレゼンテーションを選択します.XHTMLとHTMLドキュメントが完全なDOCTYPEである場合、通常は標準モードで表示されます.逆に、ドキュメントのDOCTYPEが存在しないか、形式が正しくない場合、HTMLとXHTMLは混在モードで表示されます.
 

2つのモードのボックスモデル

標準モードでのボックスの実際の幅は、width+padding-left+padding-right+border-left-width+border-right-widthです.
実際の高さ:
heigth + padding-top +padding-bottom + border-top-width + border-bottom-width
ハイブリッドモードでのボックスの実際の幅は、cssで設定したwidth値、高さは設定したheight値です.もちろんoverflowが設定されていない場合、箱の内容、内側の余白、または枠の値が大きいと、箱が開き、実際の幅と高さは設定値より大きくなります.
 
 

二、ブロックレベル要素と行内要素

私たちはページレイアウトをするとき、html要素をブロックレベル要素と行内要素の2つに分けます.
ブロックレベル要素:ブロックレベル要素は他の要素が同じ行にあることを排斥し、要素の幅(width)と高さ(height)を設定することができ、ブロックレベル要素は一般的に他の要素の容器であり、ブロックレベル要素と行内要素を収容することができる.よく見られるブロック級元素はdiv,p,h 1~h 6などである.
≪行内要素|Row Elements|emdw≫:行内要素は幅(width)と高さ(height)を設定できませんが、他の行内要素と同じ行に配置できます.行内要素には一般的にブロックレベル要素は含まれません.行内の要素の高さは一般的に要素内部のフォントサイズによって決定され、幅は内容の長さによって制御されます.よく見られる行内要素はa,em,strongなどである.
たとえば、divまたはpに次のスタイルを適用できますが、aラベルでは次のスタイルを適用できません.
1 .test{ width : 100px ; height : 100px ;}
もちろん、スタイルdisplayプロパティを使用して要素の表示方法を変更することもできます.displayの値がblockに設定されると、要素はブロックレベルで表示されます.display値をinlineに設定すると、要素は行内に表示されます.aラベルに次のスタイルを適用できます.
1 .test{ display : block ; width : 50px ; height : 50px ;}
また、エレメントに幅の高さを設定したり、行内で表示したりしたい場合は、displayの値をinline-blockに設定できます.次のようになります.
1 a{ display :inline- block ; width : 100px ; height : 100px ;}