CSS#6-シャーシモデル-

1. width, height

幅と高さ

<div></div>

div{
width:auto;
height:auto;
background: tomato;
}

auto値は自動的に100%の値に指定されます.
💡1.in-line要素は、横寸法と高さ寸法が「0」から始まります.
したがってautoは0に設定されているので、現れません.
2.ライン内の要素には、基本的に横と縦の値は指定できません.
まとめ
1.ブロック要素の場合と行内要素の場合では、横寸法と縦寸法を含むデフォルト値が異なります.
2.ブロック要素はレイアウト専用、インライン要素はテキスト専用.

div{
width: auto; /*100%*/
height:auto;/*0*/
}
span{
width: auto;/*0*/
height: auto;/*0*/
}

2. max-width, max-width, min-height, max-height

1. max-width
属性値ぞくせいち:単位とautoたんいとauto
デフォルト:none
私たちの要求通りに最大値に増やして書くことができますが、max-widthを設定すれば最大値を設定することができます.
2. min-width
属性値ぞくせいち:単位とautoたんいとauto
既定値:0.
3. max-height
属性値ぞくせいち:単位とautoたんいとauto
デフォルト:0
4. min-height
属性値ぞくせいち:単位とautoたんいとauto
デフォルト:none

<div class="parent">
  <div class="child"></div>
</div>

parent{
width:500px;
height:300px;
border:4px solid tomato;
margin: 20px;
}

.child{
 width:100%;
height:200px;
background:orange;
}

ここでwidth値はautoでも100%なのでautoに変えても変わりません.
また、auto版の基本設定なので、別に設定する必要はないので書かなくても大丈夫です.

parent{
width:500px;
height:300px;
border:4px solid tomato;
margin: 20px;
}

.child{
max-width:400px;
min-width:200px;
height:200px;
background:orange;
}

以上のように、最大値と最小値が設定されている場合、親要素が小さくなっても、最大値と最小値を満たすために小さくなり、大きくなります.
このように制限線を設定することができます.

3.margin

1.要素の「外部(外部)マージン」を指定したり、負の値を使用したりできます.
2.ショートカット属性でもあります.
💡ショートカット属性は、左右のすべての値を同時に設定できます.
3.単位:px、em、%などが使用可能、auto:ブラウザ計算幅、%:親要素幅のパーセントを指定します.既定値は0です.

<div class="parent">
  <div class="child"></div>
</div>

.parent{
width:400px;
height:200px;
border:4px solid red;
}
.child{
width:100px;
height:100px;
border: 4px solid; 
margin:50%;
}

marginに%要素を入力すると、親要素の幅パーセントが子要素のmargine要素に入ります.

4.余白の繰り返し

合併は、クラッシュとも呼ばれます.
1.兄弟要素のmargin-topとmargin-bottomが出会ったとき
2.親要因のmargin-topと子要因のmargin-topが出会ったとき
3.親要因のmargin-bottomと子要因のmargin-bottomが出会ったとき

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent{
width:300px;
height:200px;
background:cyan;
1. margin-top:50px;
}
.child{
width:100px;
height:100px;
background:tomato;
margin-top:50px;
}

1.の場合、親要素と子要素は、親要素の上から下50 pxまで一緒に表示されます.
2.子要素が親要素の面と重なる場合、子要素にmarging-topを加えたように1です.同じ結果を出す.(margine-bottomもそうです.)
💡げんかいはんぷくけいさんほう
条件要素Aの境界要素Bの境界計算法の繰返し値はいずれも正数30 px 10 pxより大きい値であり、繰返し30 pxはいずれも負数-30 px-10 pxより小さい値であり、繰返し-30 pxはそれぞれ正数と負数-30 px-10 px-10+10=-20 pxである

5. padding

要素の「内側(内側)マージン」を指定、短縮します.

単位:px、em、%などが使用可能、auto:ブラウザ計算幅、%:親要素幅のパーセントを指定します.既定値は0です.

寸法増加

padding
💡paddingのサイズが増加した場合、直接計算して表示または自動表示する方法はbox-size:border-boxです.入力すると、ブラウザは自動的に計算されます.また、box-sizeの値にはcontent-boxサイズが自動的に追加されます.

6. border

1.border
エレメントを作成する枠線をショートカット属性として使用します.
💡属性値
値は、デフォルトborder-width線の厚さ(幅)mediumborder-style線のタイプnonborder-color線の色blackを表します.
ex)「border:厚さタイプ色;」持つ形.
2. border-width
💡属性値
値はデフォルト値mediumの厚さmediumthinを薄厚単位px、em、cmなどで指定します.
3. border-style
線の種類は、指定、短縮、個別属性です.
💡属性値
値は、デフォルト値なしワイヤレス非表示線なし同じ実線(普通線用)破線破線破線破線2行直線溝掘出形状(線)リッジ突起の形状(線、溝の反対)昆虫要素全体の形状(線)開頭要素全体の形状(線)を表します.
4. border-color
線の色を指定
💡属性値
値は、既定の色の線の色を指定する白黒の透明線(要素の背景色を表示)を意味します.
私たちが知っている色の値でいいです.
💡その他のプロパティー1
値の意味は、値border-トップトッププリアンブルタイプカラーborder-トップ幅トップラインの厚さborder-トップスタイルトップラインのタイプborder-トップカラートップラインの色border-ボトムカラーボトムプリアンブルタイプカラーborder-ボトム幅ボトムラインの厚さborder-ボトムスタイルボトムラインのタイプborder-ボトムカラーボトムカラーボトムラインの色色を使用します.
ここでborder-leftも同様に存在する.
1.ここでもborderは周辺の要素であり、例えばmargin繰返しやpaddingサイズが増加するため、サイズが増加するにつれて全体のサイズも増加する.
2.横長100 pxの箱を作りたい場合は、1 px線ではなく横長98 pxを直接計算し、box-size:border-box属性を利用することができます.これで自動的に計算できます.(下記参照)

7. box-sizing

要素のサイズ計算基準の指定
💡属性値
値はデフォルトのcontent-box幅(width,height)計算要素のサイズを表し、content-boxborder-box幅(width,height)の内側余白(padding)と枠線(border)の計算を含む
1. content-box
2. padding-box
3. border-box

<div class="box"></div>

.box{
width:200px;
height:200px;
background:orange;
padding:40px;
border: 10px solid red;
}

ここで863*300サイズの箱はcontent-boxです.
padding-boxもありますが、ブラウザの互換性が悪いため問題が発生します.

8. display

要素のボックスタイプ(タイプ)の設定
💡属性値
値は、デフォルトのブロック要素(divラベルなど)の行内要素(spanラベルなど)の行内ブロック要素(入力ラベルなど)がW、H、M、Pの値を有することができることを示す.(block要素など)他のtable、table-cell、flexなどのnone要素のタイプが存在しない(要素が消失する)、画面上の特性要素を消失させるために使用されます.

<span></span>

span{
display:block;
width:100px;
height:100px;
background:tomato;
}

inputは、基本的にdisplay:inline-blockの要素を有する.

の不透明度については後述するが、不透明度値は基本的に「1」の値であり、display:noneとは異なり、不透明度の場合、空間は空のように配列されているが、display:noneの場合、その空間そのものにはまったく存在しないように見える.

9.overflow

コンテンツ(サブエレメント)がエレメントの大きさを超えると、コンテンツの表示(短縮)を制御します.
値は、デフォルト値「visible」「hidden」「オーバーフロー部分」「カット」「非表示」「カット」「オーバーフロー部分」「スクロールバーを使用して表示」「autoオーバーフロー部分がある場合のみカット」「スクロールバーを使用して表示」を意味します.

スクロールは、オーバーフローやオーバーフローがなくても強制的にスクロールが発生します.しかしautoオーバーフローはスクロールを生じ,オーバーフローしなければ生じない.

💡tip. ボックス内のテキストを中央揃えにする方法

<div class="parent">
<div class="child">1</div>
</div>

.parent{
width:300px;
height:250px;
border: 4px solid;
}
.child{
width:100px;
height:100px;
background:tomato;
border:4px solid red;
display:flex;
justify-content:center;
allign-items:center;
font-size:40px;
}

ここで、親要素にオーバーフローした値を使用します.

10. opacity

要素の透明度の指定
値は、デフォルト値の0～1の小数点1を表します.
💡使用方法

.half{
opacity:0.5; /*50%투명도, 반투명*/
}
.transparent{
opacity:0; /*0%투명도, 투명*/
}
.box{
opacity:0.75 /*75%투명도, 반투명*/
}

ここでは0.5でなくても5と書くことができます
ここで、display:noneとcificityは少し混同されているが、cificity画面に存在するが見えず、display:noneの画面特性自体が消え、存在しない概念に近い.
💡確認したいのであれば、背景にある箱を2つ作り、不透明とディスプレー:noneで確認すればいいです.

最後に。

今日はBoxモデルを勉強しました箱の模型には重要な概念がたくさんあると思います.
私たちはcssを勉強し続けます.