[WEB 2]CSS Boxモデル1
cssは文字を飾るだけではありません.
ドキュメント全体の設計を担当します.
1)ラベルの体積を理解する
まずhtmlファイルボックスです.htmlを生成します.
結果.
しかし、ここでh 1タグ(CSS)があちらのページのどこからどこまでを占めているのでしょうか.
styleラベルを作成して、それを理解しましょう.border-width:枠線厚さ border-color:枠線の色 border-style:枠線のスタイル(破線、単線...) この3つの設定の結果
これはh 1ラベルの範囲または体積です.
aラベルの体積を同様に理解する.
実行
aラベルのボリュームも出てきます.
2つのラベルの違いが見えますか?
h 1タグは画面全体を使用し、aタグはその位置を使用する.
これをblock level elementとinline elementと呼びます.
2)タグを置換するボリュームblocklevel element:画面全体のタグ inline element:ラベル このように整理してもいいです.
スタイルタグを変更することで、現在画面全体に書き込まれているh 1タグをinline elementに置き換えることができます.
スタイルラベルを変更しましょう.
したがって、画面全体のh 1ラベルを使用しているのは、自分と同じであることがわかります.
これにより、aタグをblock level elementに置き換えることもできる.
前に示したように、aタグは画面全体に書き込まれます.
また、displayプロパティにはnoneというプロパティ値があります.
この機能を有効にすると、タグは非表示になります.
3)スタイルラベルの重複を減らす
TAGELのボリュームがわかっているので、ディスプレー属性は削除しましょう.
これを合わせて重複を解消
ここにはまだ不便なところがある
すなわち、
合併します
コードが非常に短く、可読性が向上したのではないでしょうか.
4) content, border, padding, margin
次はborder、padding、marginです.
その答えはこの図で説明できます.
でも初めて見たのであれば、きっと理解できないので、さらに説明します.
この画面が表示されます
ここの
この部分です
しかし、この
間隔を作成するにはpaddingを設定します.
間隔が表示されます.
しかし、私はまた最初のcssと2番目のcssの距離を開きたいです.
ではmarginをセットすればいいです
上の最初の絵を理解できますか?
5)コンテンツのサイズ変更
contentのサイズはwidthとheightプロパティによって定義されます.
以上は開発者モード(
ドキュメント全体の設計を担当します.
1)ラベルの体積を理解する
まずhtmlファイルボックスです.htmlを生成します.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
<h1>CSS</h1>
<p>
Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/CSS">CSS</a>)
is a style sheet language used for describing the presentation of a document
written in a markup language.
</p>
</body>
</html>
こんな简単なhtmlファイルを作った結果.
しかし、ここでh 1タグ(CSS)があちらのページのどこからどこまでを占めているのでしょうか.
styleラベルを作成して、それを理解しましょう.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
h1 {
border-width : 5px;
border-color : red;
border-style : solid;
}
</style>
</head>
<body>
<h1>CSS</h1>
<p>
Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/CSS">CSS</a>)
is a style sheet language used for describing the presentation of a document
written in a markup language.
</p>
</body>
</html>
これはh 1ラベルの範囲または体積です.
aラベルの体積を同様に理解する.
<style>
h1 {
border-width : 5px;
border-color : red;
border-style : solid;
}
a {
border-width : 5px;
border-color : red;
border-style : solid;
}
</style>
スタイルタグを変更した後実行
aラベルのボリュームも出てきます.
2つのラベルの違いが見えますか?
h 1タグは画面全体を使用し、aタグはその位置を使用する.
これをblock level elementとinline elementと呼びます.
2)タグを置換するボリューム
スタイルタグを変更することで、現在画面全体に書き込まれているh 1タグをinline elementに置き換えることができます.
スタイルラベルを変更しましょう.
<style>
h1 {
border-width : 5px;
border-color : red;
border-style : solid;
display : inline;
}
a {
border-width : 5px;
border-color : red;
border-style : solid;
}
</style>
現在のドキュメントのh 1タグのすべてのdisplayプロパティをinlineプロパティ値に変更しました.したがって、画面全体のh 1ラベルを使用しているのは、自分と同じであることがわかります.
これにより、aタグをblock level elementに置き換えることもできる.
<style>
h1 {
border-width : 5px;
border-color : red;
border-style : solid;
display : inline;
}
a {
border-width : 5px;
border-color : red;
border-style : solid;
display : block;
}
</style>
コードを変更して実行します.前に示したように、aタグは画面全体に書き込まれます.
また、displayプロパティにはnoneというプロパティ値があります.
この機能を有効にすると、タグは非表示になります.
3)スタイルラベルの重複を減らす
TAGELのボリュームがわかっているので、ディスプレー属性は削除しましょう.
<style>
h1 {
border-width : 5px;
border-color : red;
border-style : solid;
}
a {
border-width : 5px;
border-color : red;
border-style : solid;
}
</style>
コードを表示すると、h 1ラベルとaラベルのcssコードが繰り返されます.これを合わせて重複を解消
<style>
h1, a {
border-width : 5px;
border-color : red;
border-style : solid;
}
</style>
これらの計算演算子を使用すると、タグを簡単にグループ化できます.ここにはまだ不便なところがある
すなわち、
border-
を繰り返す.合併します
<style>
h1, a {
border : 5px solid red;
}
</style>
このようにしてコードの重複を減らす.コードが非常に短く、可読性が向上したのではないでしょうか.
4) content, border, padding, margin
次はborder、padding、marginです.
その答えはこの図で説明できます.
でも初めて見たのであれば、きっと理解できないので、さらに説明します.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
h1 {
border : 5px solid red;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h1>CSS</h1>
</body>
</html>
このコードの結果を表示すると、この画面が表示されます
ここの
content
はこの部分です
しかし、この
content
とborder
の間には間隔がない.間隔を作成するにはpaddingを設定します.
<style>
h1 {
border : 5px solid red;
padding : 20px;
}
</style>
間隔が表示されます.
しかし、私はまた最初のcssと2番目のcssの距離を開きたいです.
ではmarginをセットすればいいです
<style>
h1 {
border : 5px solid red;
padding : 20px;
margin : 50px;
}
</style>
上の最初の絵を理解できますか?
5)コンテンツのサイズ変更
contentのサイズはwidthとheightプロパティによって定義されます.
<style>
h1 {
border : 5px solid red;
padding : 20px;
margin : 50px;
width : 100px;
height : 100px;
}
</style>
以上は開発者モード(
f12
)で確認したh 1タグの内容サイズである.Reference
この問題について([WEB 2]CSS Boxモデル1), 我々は、より多くの情報をここで見つけました https://velog.io/@reyang/WEB2-CSS-박스-모델-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol