CSSプロパティの概要

- ブロックレベルの要素でのみ機能する属性

width、height (これら 2 つは要素の置換に使用できます)

text—align、text—indent、vertical—align (表のセルやセルにも使用できます) input /img などの要素を置き換えます)

background-position (パーセンテージと絶対値の違いに注意してください。このプロパティはタイリング効果に影響します)

---

[基本的な視覚的書式設定]

ボックス モデル:
1. - 背景にはコンテンツ ボックス、内側のマージンと境界線が含まれます。外側のマージンは通常、親要素の背景を表示します。

2. 水平属性 : 左 (右) マージン、左 (右) パディング、左。子要素の (右) ) border とコンテンツ ボックスの幅の値の合計は、親要素のコンテンツ ボックスの幅と等しくなければなりません

- margin—left、margin-right、width (これら 3 つの値のみ auto に設定できます)、そのうちの 2 つは特定の値、残りの 1 つは auto です。auto に設定された属性値は、親要素の幅を満たすように自動的に計算されます:

 ＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto；
 ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0；
 ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！

- 親要素のパディングは子要素のマージンと重なります。

- 置換されていない要素のデフォルト 幅は、置換された要素の幅が auto に設定されている場合はその内容によって決まります。 img) の場合、その値は元の幅になります。幅のみが設定されている場合、高さは比例して変更され、その逆も同様です。

3. 垂直属性

:

は水平属性と似ていますが、相違点と注意事項:

- margin-top または margin-bottom が auto に設定されている場合、デフォルトで 0 になるため、設定が特定の値で表示されない限り、垂直方向の中央に配置されます。

- 子要素の高さを設定するためにパーセンテージを使用する場合、親要素の高さの値が明示的に設定されていない場合、子要素の高さがデフォルトになります。 to auto;

- 親要素に子ブロックレベル要素のみが含まれる場合、親要素にボーダーまたはパディングがない限り、親要素の高さには子要素のマージンは含まれません。 ！なぜかというと、縦方向の余白が重なっているからです。この観点から、重なりを避けるために、ボーダーとパディングを使用して隣接するマージンを区切る必要があります。

インライン要素

:

- 置換された要素の line-height (行ボックスの高さ) は、そのコンテンツの高さです。したがって、置換された要素には行間隔 (line-height - font-size) はありません。置換されていない要素の場合は、コンテンツ ボックスの高さに行間隔を加えたものになります。 - テキストのみを含む行の場合は、行のみが可能です。行間の距離を変更します - 高さ、フォントサイズ、垂直方向の配置。

非置換要素:

- line-height の値が font-size より小さい場合、テキストの重なりが発生する可能性があります。この現象を回避するには、line-height を 1 em に設定します (font-size を設定する必要があります)。 ) または 1 (フォント サイズの倍率に応じて)、さらに明示的に定義されていない限り、リテラル値ではなく親要素の計算値を継承します

- インライン要素のパディング、マージン、境界線は影響しません。行の高さ。外側のマージンは、上下ではなく左右にのみ有効ですが、正のパディングと背景がある場合は、隣接する行を覆う可能性があります（行の高さとレイアウト、つまり行には影響しません）。パディングが設定されている場合、高さは変わりません) height);

置換要素:

- インライン要素の内側のマージン、外側のマージン、境界線は行の高さに影響し、上下のマージンは有効です。 - img の高さの値を設定すると行の高さに影響しますが、vertical-align などの一部の属性は引き続き line-height の有効な値を計算に使用します。 element は、ブロック レベルの要素またはテーブル セルの唯一の子孫であり、p の img など、ベースラインに配置されます。解決策: 負のマージンを使用してプルダウンするか、表示をブロックに設定して、ライン ボックスの生成を回避します。

4. その他

- 表示属性:

   * 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余；
   * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。
   * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。

[border、margin、padding]

---

margin

- パーセンテージを使用する場合、計算された値は親要素の幅の値を基準とします (そうではありません)身長）という点で。たとえそれがマージントップであっても！

1. 
   border

   - 未指定の値にはデフォルト値が使用されます。例:

{ border: solid 1px dotted;
  border: 1px;
}

2. ここでの 2 番目の境界設定は最初の境界設定を上書きします。2 番目の境界スタイルは設定されていないため、デフォルトは none です。したがって、境界線はありません

   
   

   [フローティングと配置]

---

フローティング:

フローティング要素のマージンはマージされません

1. 置換要素はフロートです。幅を指定します。そうでない場合は、ブラウザによって指定された最小幅に従ってフローティングになります

2. フローティング要素は、要素自体が何であるかに関係なく、ブロックレベルのボックスを生成します。

3. フローティング要素の上部を親要素より高くすることはできません。または、以前のすべてのフローティング要素の上部を高くすることはできません

4. フローティング要素がドキュメント フロー内の要素と重なる場合:

   (1)ブロックレベル要素の場合、そのコンテンツはフローティング要素の上にあり、境界線と背景はその下にあります

   (2) インライン要素の場合、そのコンテンツ、境界線、および背景はすべてフローティング要素の上にあります。それはカバーされません。
これは、ドキュメント フロー内で要素が表示される順序とは関係ありません。

5. 
   
   浮動要素には、その浮動子要素がすべて含まれている必要があります;
   

6. 使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。

   定位：

7. 绝对定位

   *如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
     *通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
     *除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
     *水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
     *假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；

8. 固定定位
     *right的值总是等于－left，bottom的值总是等于－top。

持续更新中。。。。。

本文参考 《css权威指南》

- ブロックレベルの要素でのみ機能する属性

width、height (これら 2 つは要素の置換に使用できます)

text—align、text—indent、vertical—align (表のセルやセルにも使用できます) input /img などの要素を置き換えます)

background-position (パーセンテージと絶対値の違いに注意してください。このプロパティはタイリング効果に影響します)

---

[基本的な視覚的書式設定]

ボックス モデル:
1. - 背景にはコンテンツ ボックス、内側のマージンと境界線が含まれます。外側のマージンは通常、親要素の背景を表示します。

2. 水平属性 : 左 (右) マージン、左 (右) パディング、左。子要素の (右) ) border とコンテンツ ボックスの幅の値の合計は、親要素のコンテンツ ボックスの幅と等しくなければなりません

- margin—left、margin-right、width (これら 3 つの値のみ auto に設定できます)、そのうちの 2 つは特定の値、残りの 1 つは auto です。auto に設定された属性値は、親要素の幅を満たすように自動的に計算されます:

 ＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto；
 ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0；
 ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！

- 親要素のパディングは子要素のマージンと重なります。

- 置換されていない要素のデフォルト 幅は、置換された要素の幅が auto に設定されている場合はその内容によって決まります。 img) の場合、その値は元の幅になります。幅のみが設定されている場合、高さは比例して変更され、その逆も同様です。

3. 垂直属性

:

は水平属性と似ていますが、相違点と注意事項:

- margin-top または margin-bottom が auto に設定されている場合、デフォルトで 0 になるため、設定が特定の値で表示されない限り、垂直方向の中央に配置されます。

- 子要素の高さを設定するためにパーセンテージを使用する場合、親要素の高さの値が明示的に設定されていない場合、子要素の高さがデフォルトになります。 to auto;

- 親要素に子ブロックレベル要素のみが含まれる場合、親要素にボーダーまたはパディングがない限り、親要素の高さには子要素のマージンは含まれません。 ！なぜかというと、縦方向の余白が重なっているからです。この観点から、重なりを避けるために、ボーダーとパディングを使用して隣接するマージンを区切る必要があります。

インライン要素

:

- 置換された要素の line-height (行ボックスの高さ) は、そのコンテンツの高さです。したがって、置換された要素には行間隔 (line-height - font-size) はありません。置換されていない要素の場合は、コンテンツ ボックスの高さに行間隔を加えたものになります。 - テキストのみを含む行の場合は、行のみが可能です。行間の距離を変更します - 高さ、フォントサイズ、垂直方向の配置。

非置換要素:

- line-height の値が font-size より小さい場合、テキストの重なりが発生する可能性があります。この現象を回避するには、line-height を 1 em に設定します (font-size を設定する必要があります)。 ) または 1 (フォント サイズの倍率に応じて)、さらに明示的に定義されていない限り、リテラル値ではなく親要素の計算値を継承します

- インライン要素のパディング、マージン、境界線は影響しません。行の高さ。外側のマージンは、上下ではなく左右にのみ有効ですが、正のパディングと背景がある場合は、隣接する行を覆う可能性があります（行の高さとレイアウト、つまり行には影響しません）。パディングが設定されている場合、高さは変わりません) height);

置換要素:

- インライン要素の内側のマージン、外側のマージン、境界線は行の高さに影響し、上下のマージンは有効です。 - img の高さの値を設定すると行の高さに影響しますが、vertical-align などの一部の属性は引き続き line-height の有効な値を計算に使用します。 element は、ブロック レベルの要素またはテーブル セルの唯一の子孫であり、p の img など、ベースラインに配置されます。解決策: 負のマージンを使用してプルダウンするか、表示をブロックに設定して、ライン ボックスの生成を回避します。

4. その他

- 表示属性:

   * 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余；
   * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。
   * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。

[border、margin、padding]

---

margin

- パーセンテージを使用する場合、計算された値は親要素の幅の値を基準とします (そうではありません)身長）という点で。たとえそれがマージントップであっても！

1. 
   border

   - 未指定の値にはデフォルト値が使用されます。例:

{ border: solid 1px dotted;
  border: 1px;
}

2. ここでの 2 番目の境界設定は最初の境界設定を上書きします。2 番目の境界スタイルは設定されていないため、デフォルトは none です。したがって、境界線はありません

   
   

   [フローティングと配置]

---

フローティング:

フローティング要素のマージンはマージされません

1. 置換要素はフロートです。幅を指定します。そうでない場合は、ブラウザによって指定された最小幅に従ってフローティングになります

2. フローティング要素は、要素自体が何であるかに関係なく、ブロックレベルのボックスを生成します。

3. フローティング要素の上部を親要素より高くすることはできません。または、以前のすべてのフローティング要素の上部を高くすることはできません

4. フローティング要素がドキュメント フロー内の要素と重なる場合:

   (1)ブロックレベル要素の場合、そのコンテンツはフローティング要素の上にあり、境界線と背景はその下にあります

   (2) インライン要素の場合、そのコンテンツ、境界線、および背景はすべてフローティング要素の上にあります。それはカバーされません。
これは、ドキュメント フロー内で要素が表示される順序とは関係ありません。

5. 
   
   浮動要素には、その浮動子要素がすべて含まれている必要があります;
   

6. 使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。

   定位：

7. 绝对定位

   *如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
     *通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
     *除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
     *水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
     *假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；

8. 固定定位
     *right的值总是等于－left，bottom的值总是等于－top。

更多css属性总结 相关文章请关注PHP中文网！