CSS の決定版ガイド - 基本的な視覚的書式設定 (水平および垂直)_html/css_WEB-ITnose

1. 基本的な概念

(1) 通常の流れ: 欧文テキストが左から右、上から下に表示されることを意味します。要素が正常に流れるのを防ぐ唯一の方法は

using using using - 通常のフローから外れて、フローティング要素または配置要素にすることです。

(2) 非置換要素: 要素の内容が文書内に含まれる場合、それを非置換要素と呼びます。

(3) 置換要素: 他のコンテンツのプレースホルダーとして使用される要素を指します。例: 画像

(4) IMG 内の要素のブロック: 通常のストリームでは、フレームの前後に「変更」が生成されるため、通常のストリームのブロックレベルの要素は垂直に配置されます。

(5) インライン要素: 行区切り文字はその前後に生成されません。これらはブロックレベル要素の背景です。

(6) ルート要素: ドキュメント ツリーの最上位に位置する要素。 HTML では、HTML 要素です。

2. 水平方向の書式設定

通常、要素の幅を指します。これは、内側のパディング、外側のパディング、およびエッジを除いた、そのコンテンツの幅を指します。

ポータル: JavaScript 権威デザイン - CSS (簡単な学習ノート 16)

水平書式設定の 7 つの属性

: margin-left、border-left、padding-left、width、padding-right、border-right、margin- left これら 7 つの水平属性の合計は、親要素の幅と等しくなければなりません。

width、margin-left、margin-left のみを自動に設定できます。

その他は特定の値に設定する必要があります。そうでない場合、デフォルトの幅は 0 です。

以下はこれら 3 つの組み合わせですauto を変更して問題を表示します: auto は自動的に幅を埋めます (画面の合計幅 1366)

margin-left を auto に設定します:

<p style="margin-left:auto;width:100px;margin-right: 100px">水平格式化</p>

margin-right を auto に設定します:

<p style="margin-left:100px;width:100px;margin-right: auto">水平格式化</p>

幅を自動に設定します:

<p style="margin-left:100px;width:auto;margin-right: 100px">水平格式化</p>

margin-left と margin-right を自動に設定します:

りー

りー

margin-left、margin-right、幅を auto に設定します:

<p style="margin-left:auto;width:100px;margin-right: auto">水平格式化</p>

margin-left、margin-right と width を auto に設定します:

あなたはそうします以下の複雑で特別で奇妙な現象に遭遇します: つまり、マージンは負の値になる可能性があります

<p style="margin-left:auto;width:auto;margin-right: auto">水平格式化</p>

幅が 440 であることがわかります (width;auto ここで 440 は で計算されています)指定された値が表示されるのではなく、リアルタイム値が表示されます

実際、ここには問題が含まれています。一部の値はリアルタイムで計算され、一部の DOM はリアルタイムで計算された値を取得できます。 ）、親の400より広い！親要素よりも幅を広くすることはできないと言ったでしょうか?

しかし、この計算には何も問題はありません:

10+0+0+440+0+0-50=400

最終的にはまだ 400 に等しくなります。

前のものでは、置換された要素の水平方向の書式設定について説明しました。次に、置換された要素の水平方向の書式設定について説明します。 (

典型的な置換要素は img

) 画像の例: w:200px、h:300px

。

当我们改变她的宽度的时候，高度也同比例改变。

200x300

300x450

 

 

3.垂直格式化

一个元素的默认高度由其内容决定。

高度还会受到内容宽度的影响。

段落越窄，相应的就会越高，以便容纳其中所有的内联内容。

对应于水平格式化，它也有7个属性：

margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom.

同样这七个值必须等于包含元素块的高。

这七个值中只有三个值可以设为auto:height,margin-top,margin-bottom,其他四个必须设为特定的值或默认为0.

 

当高度小于显示内容的高度：浏览器会处理为有个滚动条(overflow)，以容纳下内联元素。

 

垂直格式化的另一个重要的是合并垂直外边距（重叠垂直外边距）

<ul>    <li>大师兄</li>    <li>师傅</li>    <li>被妖怪</li>    <li>抓走啦</li>    <li>俺老孙来也</li></ul>li{ margin-top: 10px; margin-bottom: 15px; 

 

相邻列表之间的距离是15px,不是25px。

因为相邻的外边距沿着垂直方向合并了，大边距覆盖小边距。