ホームページ > 記事 > ウェブフロントエンド > CSS レイアウトボックスモデルのプロパティ

CSS レイアウトボックスモデルのプロパティ

php中世界最好的语言オリジナル: 2018-02-28 09:54:362584ブラウズ

今回は、CSSレイアウトのボックスモデルプロパティについて説明します。CSSレイアウトのボックスモデルプロパティの注意事項は何ですか。以下は実際的なケースです。見てみましょう。

width/height

CSSでは、任意のブロックレベル要素に明示的な高さを設定できます。

指定された高さがコンテンツの表示に必要な高さよりも大きい場合、余分な高さによって余分なパディングがあるかのような視覚効果が生じます。

指定された高さがコンテンツの表示に必要な高さよりも小さい場合、オーバーフロー属性に応じてスクロールが必要です。バーは overflow:auto に設定する必要があります。

auto

幅、高さ、余白を自動に設定できます。ブロックレベル要素の場合、幅が auto に設定されている場合は、可能な限り幅が広くなります。具体的には、要素の幅 = 含むブロックの幅 - 要素の水平マージン - 要素の水平マージン幅 - 要素の水平パディング

高さを auto に設定すると、可能な限り狭くなります。詳細には、要素の高さ = インラインコンテンツを含むのに十分な高さです

[注意] 含まれるブロックの高さが明示的に宣言されていない場合、要素の高さのパーセンテージは自動にリセットされます

[幅と高さの最大値と最小値]

min-width | min-height

初期値: 0

適用対象: ブロックレベルの要素と置換要素

パーセンテージ: 含まれるブロックの幅(高さ)に対する相対値

max-width max -heightt

初期値: none

適用対象: ブロックレベル要素と置換要素

パーセンテージ: 包含ブロックの幅(高さ)に対する相対値

[注意] 最小幅(高さ)がより大きい場合最大幅 (高さ)、最小幅が使用されます最高値が優先されます

内部マージンパディング

ボックスモデルの他の属性 (位置決めによく使用される負の値のマージンなど) と比較すると、パディングは問題点

インライン要素の場合、左のパディングは要素の先頭に適用され、右のパディングは要素の末尾に適用されます。垂直方向のパディングは影響しません。行の高さですが、それ自体のサイズに影響します

[注意] パディングは負の値にすることはできません

padding

初期値：未定義

パーセンテージ：幅に対する相対値。包含ブロック

【50%】

ブロックレベルの要素はパディングによって実現できます: 50% 正方形効果、水平および垂直パディングのパーセンテージ値は包含ブロックの幅に対して相対的に決定されるため、多くの場合、ヘッダー画像の移動に使用します

マージン

マージンを設定すると、要素の外側に追加のマージンが作成されます空白スペースは通常、他の要素を配置できない領域を指し、親要素の背景が表示されますこの領域

margin

初期値:未定義

適用対象:すべての要素

パーセンテージ:包含ブロックを基準とした幅

[注]通常の要素の場合、包含ブロックはブロックレベルの親要素となります。配置された要素の場合、それを含むブロックが配置の親になります。したがって、通常の要素のマージンの割合はブロックレベルの親要素の幅に相対し、位置決めされた要素のマージンの割合は位置決めされた親の幅に相対します

margin は負の値、margin と width に設定できます。高さは自動でサポートされており、マージンには非常に奇妙なオーバーラップ特性があります。

オーバーラップ、自動、無効な状況を含むマージンのいくつかの重要な部分を紹介します

1. オーバーラップ

【前提条件】

マージンのオーバーラップはマージン結合とも呼ばれます。この状況が発生するには 2 つの前提条件があります

1. のみ。ブロック要素（float、absolute、inline-block要素を除く）で発生

2. 縦方向のみ発生（

writing-modeに関係なく）

【分類】

マージンが重なった状況

1. 隣接する兄弟要素

<style>
p{
    line-height: 2em;
    margin: 2px 0;
    
background-color
: lightblue;
    display:inline-block;
    width: 100%;}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

2. 親要素と最初または最後の子要素、親レベルと子レベルのマージンの重なりは、マージン転送とも呼ばれます

<style>
.box{
    background-color: pink;
    height:30px;}
.inner{
    margin-top: 1em;
    background-color: lightblue;}
</style>
<div class="box">
    <div class="inner">子级</div>
</div>

Web ページのレイアウトでは、マージンの重なりのため、マージンをマージンとして扱うことがよくあります。「質問形式」を使用し、できるだけ使用しないでください。しかし、実際には、これが大きな役割を果たしています。

そのため、オーバーラップをうまく利用する必要があり、リスト項目で margin-top と

margin-bottom を同時に使用できます。この方法では、ページ構造がより堅牢になり、最後の要素の削除や配置によって元のレイアウトが破壊されることはありません

2.auto

auto に設定できるのは幅/高さおよびマージンのみです。

【margin:auto が垂直方向のセンタリングを実現できない理由】

水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间

垂直方向不可以居中是因为块级元素的高度默认是内容高度，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0

margin: 0 auto;

【为什么图片使用margin:auto不能水平居中】

图片无法水平居中，类似于块级元素无法垂直居中。因为图片的宽度width默认是自身宽度，与父元素的宽度没有直接关系。左右margin设置为auto，会被重置为0

所以，图片要水平居中，需要设置为display:block元素

3.无效情形

1、行内元素垂直margin无效

因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的，垂直margin并不会影响它们，所以不会影响垂直布局。而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。[注意]不包括inline-block

　　2、某些表格类元素margin无效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>　　不可设置margin。

　　3、BFC造成的margin看似无效

左侧元素使用浮动，右侧元素使用overflow-hidden实现两栏自适应的布局时，右侧元素的margin-left值只有足够大，才能看到效果。这是因为margin-left是相对于父元素左侧，而不是图片右侧

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

CSS レイアウト ボックス モデルのプロパティ

関連記事

CSS レイアウトボックスモデルのプロパティ