CSSレイアウト(上)

CSSレイアウト(上)
1、CSSレイアウトのdisplay
1.1、dispaly
dispalyはCSSで最も重要なレイアウトを制御するための属性であり、各要素にはデフォルトのdisplayがあり、ほとんどの要素のデフォルト値は通常block(ブロックレベル要素)またはinline(ライン内要素)である.
もう一つのよく使われるdisplayはnoneです.いくつかの特殊な要素のデフォルト値はscript、linkなどです.
1.2 display:noneとvisibility:hidden
displayはnoneに設定されており、要素が表示されるスペースは保存されませんが、visibility:hiddenは保持されます.

<div style="width: 100px; height: 100px; border: 1px solid red;float:left;">
  <span style="display:none;">ABCD</span>EFG
</div>
<div style="width: 100px; height: 100px; border: 1px solid red;float:left;">
  <span style="visibility:hidden;">ABCD</span>EFG
</div>

ABCDEFG
ABCDEFG
 
1.3、より多くのdisplay値
比較的よく使われるのはlist-item,inline-block,table,table-cell,flexなどです.
すべてのリストは次のとおりです.

none inline block contents list-item inline-block inline-table 

table table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group 

flex inline-flex grid inline-grid 

ruby ruby-base ruby-text ruby-base-container ruby-text-container

run-in

/* Global values */
display: inherit;
display: initial;
display: unset;

1.4書き換え可能なdisplay属性
各要素にはデフォルトのdisplayがありますが、li要素をinline-blockに変更したり、水平メニューを作成したりするなど、いつでもどこでも書き換えることができます.
2、要素が中央にある
2.1、水平中央
marginをautoに設定することで、要素に幅が必要であることを前提として水平中心を実現できます.

<div style="width:400px;margin:0 auto;height:10px;border:1px solid red;"></div>

 
2.2、垂直中央
tableのcellは垂直中央に設定できるので、このような効果をシミュレートすることができますか?

<div style="width: 400px;height: 200px;border: 1px solid red;display: table-cell; vertical-align: middle;">
    <div style="width:100px; height:100px;background: blue;"></div>
</div>

 
2.3、絶対中央
水平中心と垂直中心が分かれば,絶対中心が実現しやすい.組み合わせ:

<div style="width: 200px;height: 200px;border: 1px solid red;display: table-cell; vertical-align: middle;">
  <div style="width:100px; height:100px;background: blue;margin:0 auto;"></div>
</div>

 
もっと良い方法はありませんか?次のようになります.
position:absoluteを設定し、top、bottom、left、right値を0にし、margin:auto;絶対中央を実現します.コンテナを中心にする場合は、コンテナのpositionをrelativeに設定します.

<div style="width: 200px;height: 200px;border: 1px solid red; position:relative;">
  <div style="width:100px; height:100px;background: blue;margin:auto;position:absolute;top:0;left:0;bottom:0; right: 0;"></div>
</div>

 
3、ケースモデル
ボックスモデル(box-sizing)にはcontent-box,border-boxの2つの典型的な値がある.
3.1、content-box
この場合、要素に設定された幅はコンテンツ幅であり、要素が占める幅はwidth+border*2+padding*2+margin*2である.幅同理
3.2、border-box
このとき、要素に設定された幅がborderを含む幅である場合、占有総幅はwidth+margin*2である.コンテンツ幅はwidth-padding*2-border*2です.
3.3例

<div style="width:100px; margin: 10px; padding: 15px; border: 5px solid blue; box-sizing:content-box"></div>
<div style="width:100px; margin: 10px; padding: 15px; border: 5px solid blue; box-sizing:border-box"></div>

 
 
3.4、ブラウザの互換性
ブラウザの互換性を保証するには、特定のブラウザ接頭辞を付ける必要があります.
4、元素の位置付け
より複雑なレイアウトを実現するには、positionを理解する必要があります.
4.1、position:static
staticはpositionプロパティのデフォルト値であり、position:staticの要素は特別に配置されません.
4.2、position:relative
相対位置決め(relative)の要素にtop、right、bottom、leftを設定すると正常な位置からずれ、他の要素はずれた後の残りの隙間を補うために位置を調整しません.

<div style="border:1px solid red; width: 400px; height: 200px;">
  <div style="background: blue; width:100px; height: 100px;"></div>
  ABCDE
</div>
<div style="border:1px solid red; width: 400px; height: 200px;">
  <div style="background: blue; width:100px; height: 100px;position:relative; left: 100px;top:50px;"></div>
  ABCDE
</div>

 
ABCDE
 
ABCDE
4.3、position:fixed
固定位置決め(fixed)要素はウィンドウに対して位置決めされるので、ページがスクロールしても同じ位置に残ります.例は左下をご覧ください.

<div style="width: 100px;height:100px; position:fixed; bottom: 0; right: 0;
border: 1px solid red;">    </div>

固定位置
4.4、position:absolute
絶対位置決め要素(absolute)はfixedと似ていますが、相対窓ではなく、相対的に最近のpositioned(position値はstaticの要素ではなくpositioned要素)の祖先要素であり、このような祖先要素がなければ、ドキュメントのbody要素に対してページがスクロールするにつれてスクロールします.

<div style="border:1px solid red; width: 400px; height: 200px;position:relative;">
    <div style="background: blue; width:100px; height: 100px;position:absolute;top: 25px;right:25px;"></div>
</div>