******* 共通 CSS プロパティ *********
[margin]
margin オブジェクトの 4 辺の拡張マージンを取得または設定します
margin- top オブジェクトの上端の拡張マージンを取得または設定します
margin-right オブジェクトの右側の拡張マージンを取得または設定します
margin-bottom オブジェクトの下端の拡張マージンを取得または設定します
margin-left オブジェクトの左側の拡張マージンを取得または設定します
argin: オブジェクトの 4 つの辺の拡張マージンを取得または設定します。
4 つのパラメータ値をすべて指定すると、上、右、下、左の順に 4 つの辺に適用されます。
1枚のみご用意の場合は4面全てに使用します。
2つある場合、1つ目は上下用、2つ目は左右用となります。
3つある場合、1つ目は上用、2つ目は左右用、3つ目は下用となります。
インライン オブジェクトは、この属性を使用して左側と右側の外側パッチを設定できます。外側のパッチを上下に設定したい場合は、まずオブジェクトをブロック レベルまたはインライン ブロック レベルとして表示する必要があります。
拡張された余白は常に透明です。
一部の隣接するマージンはマージされます。これをマージン折りたたみと呼びます:
マージンフォールディングの一般的な理解:
マージンフォールディングはブロックレベルの要素でのみ発生します
フローティング要素のマージンはどの要素にも一致しません。折りたたまれた;
オーバーフロー属性が設定され、値が表示されないブロックレベルの要素は、その子要素とともにマージンが折りたたまれません。
絶対位置の要素のマージンはマージンで折りたたまれません。ルート要素のマージンは他のマージンと一緒に折りたたまれません
auto: 値は反対側の値に設定されます
: 長さの値を使用して外側のパディングを定義します。 。負の値も可能です
: 外部パディングを定義するにはパーセンテージを使用します。ネガティブなこともあります
------------------------------------------ ----- -------------------------------------- ---
**** ************************************** ************ ************************************* ************* *****
【パディング】
パディング右側の内側のマージン
padding-bottom 下部の内側のマージンを取得または設定しますオブジェクトの端
padding-left オブジェクトの左側の内側のマージンを取得または設定します
padding: オブジェクトの 4 つの側面の内側のマージンを取得または設定します。
4 つのパラメータ値をすべて指定すると、上、右、下、左の順に 4 つの辺に適用されます。
1枚のみご用意の場合は4面全てに使用します。
2つある場合、1つ目は上下用、2つ目は左右用となります。
3つある場合、1つ目は上用、2つ目は左右用、3つ目は下用となります。
インライン オブジェクトは、この属性を使用して、左側と右側の内側のパッチを設定できます。内側のパッチを上部と下部に設定したい場合は、まずオブジェクトをブロック レベルまたはインライン ブロック レベルとして表示する必要があります。
: 長さの値を使用して内部パディングを定義します。負の値は許可されません
: 内側のパディングを定義するにはパーセンテージを使用します。負の値は許可されません
-------------------------------------- --------- ------------------
******************* *********** ************************************** ************ ****************************
[本文]
text-transform オブジェクト内のテキストのサイズを取得または設定
white-SPACE設定を記述するか、オブジェクト内のスペースの処理方法を取得します
タブサイズの取得またはオブジェクトの表面の長さを設定します
設定または検索コンテンツが指定されたコンテナの境界が切断されているかどうかを超えていますテキスト、最初と最後の行の両方です)
。
word-spacing オブジェクト内の単語間の最小、最大、最適な間隔を取得または設定します
letter-spacing オブジェクト内の文字間の最小、最大、および最適な間隔を取得または設定します
text-indent のテキストを取得または設定しますテキストのテキスト内のテキストのテキスト オブジェクトのコンテンツを設定または取得する垂直方向の方法。
Line-Height オブジェクトの高さを取得または設定します。つまり、フォントの底部とフォント内部の上部の間の距離
------------------------------------- ------- ----------------
letter-spacing: オブジェクト内の文字間の最小、最大、最適な間隔を取得または設定します。
この属性は、各文字の後に指定された間隔を追加します (単語内の各文字を含む)。
letter-spacing は行の先頭と末尾には適用できません。間隔を長さの値で指定します。マイナスになることもあります。
: 間隔をパーセンテージで指定します。マイナスになることもあります。
---------------------------------------------- --- ------------------
line-height: オブジェクトの行の高さを取得または設定します。つまり、フォントの底部とフォントの内側の上部の間の距離です。
デフォルト値:normal
normal:コンテンツが指定されたコンテナ境界をプッシュまたはオーバーフローできるようにします。
: 行の高さを長さの値で指定します。マイナスになることもあります。
: 行の高さを指定するにはパーセンテージを使用します。パーセンテージの値はフォントの高さのサイズに基づきます。マイナスになることもあります。
: 乗算係数を使用して行の高さを指定します。マイナスになることもあります。
---------------------------------------------- --- ---------------
text-align: オブジェクト内のコンテンツの水平方向の配置を設定または取得します。
ブロックレベル要素のテキストは、いくつかの積み重ねられたワイヤーフレームです
text-align の両端揃えを有効にするには、漢字の間にスペースなどの空白を挿入する必要があります
テキストの最後の行ブロック (ブロック内にテキストが 1 行のみで、最初と最後の行の両方である場合を含む) と強制的に中断された行の両端を揃えるには、 text-align-last を使用する必要があります。 IE ブラウザの場合、 text-align -last を有効にするには、まず text-align を justify として定義する必要があります。
単一行の両端の位置合わせ効果は、次のように比較的単純になります。
li{overflow:hidden;width :200px;height:21px;text-align:justify; text-align-last:justify;}
li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:' ';}
left: コンテンツは左揃えです。
center: コンテンツが中央に配置されます。
right: コンテンツは右揃えです。
justify: コンテンツの両端を両端揃えにします。
start: コンテンツの配置の開始境界。 (CSS3)
end: コンテンツの配置終了境界。 (CSS3)
: 文字列は 1 文字である必要があります。そうでない場合、宣言は無効になります。 (CSS3)
match-parent: この値によって継承される開始または終了キーワードが親の方向の値に基づいて計算される点を除き、この値は継承と同じように動作します。計算された値は左右になります。 (CSS3)
start end: start を指定すると、最初の行と強制中断行が配置されます。end は残りのすべての行を配置し、text-align-last の影響を受けません。
++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++ +
いくつか注意すべき点:
すべての主要なブラウザは text-align の justify 属性値をサポートしています
text-align は強制中断行を処理しません。また、ブロック内の最後の行も処理しません。言い換えれば、ブロック内にテキストが 1 行しかない場合 (この行は最初の行と最後の行の両方です)、text-align:justify を設定するだけでは行の両端を揃えることはできません。 align-last は、ブロック内の最後の行と強制的に中断された行を処理するために使用されるため、テキストの両端の単一行の配置を設定したい場合は、 text-align-last を使用する必要があります。 Firefox 以外のブラウザでは両端を揃える必要があります。有効にするには、テキストの間にスペースなどのスペースを挿入する必要があります (行に漢字が 2 文字だけの場合、Firefox ではそれらの間にスペースも挿入する必要があります)。 Chrome23、Safari5.1.7、Opera12.5 はまだ text-align-last をサポートしていません
上記の点に基づいて、単一行の両端の位置合わせを実現するには、次の 2 つの方向に進むことができます:
すべてのブラウザは text-align の justify 属性値をサポートしていますが、すべてが text-align-last をサポートしているわけではありません。擬似オブジェクトを使用して、非 IE および IE7 以上のブラウザ用の追加コンテンツを生成できます (IE7 以下のブラウザは擬似をサポートしていません)。オブジェクトの場合は、text-align-last 処理を使用します)、それを 2 行目に配置して非表示にします。その後、テキストの最初の行 (つまり、整列する 1 行のテキスト) を text-align:justify を使用して整列させることができます
IE や Firefox などの text-align-last をサポートするブラウザーは text-align-last 処理を使用し、それをサポートしないブラウザーは上記の方法を使用します
したがって、現在の状況に基づくと、最初の解決策を使用することになります。シンプルで、IE5.5-10、Firefox、Chrome、Safari、Opera と簡単に互換性があります
++++++++++++++++++++++++++++ + ++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++
text-align-last: ブロックの設定または取得 最後の行ブロック（ブロックにテキストの1行しかない場合を含む、その場合、それは最初の行と最後の行の両方です）または強制的に中断された線のアライメントが
である場合もブロック A 行の最初の行、または強制改行が続く最初の行 text-align の最初の行の配置が明示的に指定されていない限り (値 'start end')、text-align-last は text-align をオーバーライドします。
auto 値が指定され、text-align が justify に設定されていない限り、コンテンツの配置は text-align の設定に基づきます。
IE のプライベート プロパティの 1 つとして、IE5.5 は最初に text-align-last を実装し、その後 w3c が標準属性として採用しました
IE7 以下のブラウザはブロック内の最後の行の配置のみを実装し、強制的に中断された行の配置は処理しません。 IE8 以降、両方の形式の行配置がサポートされます。
IE ブラウザーでは、text-align-last を有効にする場合、最初に text-align を justify として定義する必要があります。
: 特別な配置はありません。
left: コンテンツは左揃えです。
center: コンテンツが中央に配置されます。
right: コンテンツは右揃えです。
justify: コンテンツの両端を両端揃えにします。
start: コンテンツの配置の開始境界。
end: コンテンツの配置終了境界。
---------------------------------------------- --- -
text-indent: オブジェクト内のテキストのインデントを取得または設定します。
インライン オブジェクトでこの属性を使用するには、まずオブジェクトをブロック レベルまたはインライン ブロック レベルとして表示する必要があります。
hanging キーワードと each-line キーワードはインデント値の後に続きます
div{text-indent:2em each-line;}
: 長さの値を使用してテキストのインデントを指定します。マイナスになることもあります。
: テキストのインデントをパーセントで指定します。マイナスになることもあります。
each-line: ブロック コンテナーの最初の行、または内部の各強制改行の最初の行に適用されるインデントを定義します。ソフト改行は影響を受けません。 (CSS3)
hanging: すべてのインデントされた行を反転します。
---------------------------------------------- --- --------------------------------------------------- --- ---
text-transform: オブジェクト内のテキストの大文字と小文字を取得または設定します。
none: 変換なし
capitalize: 各単語の最初の文字を大文字に変換
uppercase: 各単語を大文字に変換
小文字: 各単語を小文字に変換
全幅: すべての文字を全角に変換形状。文字に対応する全角形式がない場合は、そのまま残されます。この値は、ラテン文字や数字などの表意文字を植字するためによく使用されます。
---------------------------------------------- --- --------------------------------------------------- --- --------
vertical-align: ラインボックス内のインライン要素の垂直方向の配置を設定または取得します。
baseline: valign 機能をサポートするオブジェクトのコンテンツをベースラインに揃えます
sub: 垂直方向に揃えられたテキストの下付き文字
super: 垂直方向に揃えられたテキストの上付き文字
top: の内容を揃えますvalign 機能をサポートするオブジェクトとベースライン オブジェクトの上部を位置合わせします
text-top: valign 機能をサポートするオブジェクトのテキストをオブジェクトの上部に位置合わせします
middle: オブジェクトのコンテンツを位置合わせしますvalign 機能をサポートし、オブジェクトの中央に配置します
bottom: valign 機能をサポートするオブジェクトのテキストをオブジェクトの中央に配置します オブジェクトの下部を配置します
text-bottom: オブジェクトのテキストを配置しますオブジェクトの上部への valign 機能をサポートします
: ベースラインからのオフセットを指定するにはパーセンテージを使用します。マイナスになることもあります。パーセンテージのベースラインは 0% です。
: 長さの値を使用して、ベースラインからのオフセットを指定します。マイナスになることもあります。数値のベースラインは 0 です。
---------------------------------------------- --- --------------------------------------------------- --- ----
単語区切り: オブジェクト内のテキストの単語区切り動作を設定または取得します。
ページ内で意味のない長い文字が連続してレイアウトを壊すのを防ぐには、ブレークオールを使用する必要があります
IE のプライベート属性の 1 つとして、IE5.5 が最初に実装しました。
normal: アジア言語と非アジア言語のテキスト ルールに従って、単語内の改行を許可します。
keep-all: アジア以外の言語の場合は通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語のテキストが含まれる非アジア語のテキストに適しています。
break-all: この動作は、アジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、連続した英語の文字を改行するなど、非アジアのテキストを含むアジアのテキストに適しています。
------------------------------------------------ -----------
word-wrap: コンテンツが指定されたコンテナの境界を超えた場合に改行するかどうかを設定または取得します。
normal: コンテンツが指定されたコンテナ境界をプッシュまたはオーバーフローすることを許可します。
ブレイクワード: コンテンツは境界内で中断されます。必要に応じて、単語内で改行を許可します。
---------------------------------------------- --- -------------------
上記は、一般的な CSS プロパティの概要 3 の内容です。さらに関連する内容については、PHP 中国語に注意してください。ウェブサイト (www.php.cn)!
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
