レイアウト系プロパティ

1.widthプロパティ（内容の幅）

width: 内容の幅;

〇初期値は「auto」
　今はbox-sizing→border-box=content+padding+border

2.max-widthプロパティ（幅の最大値）

max-width: 内容の幅の最大値（初期値はnone）;

3.min-widthプロパティ（内容の幅の最小値）

min-width: 内容の幅の最小値;

〇最大幅・最小幅は画面サイズを変形させたときの最大幅と最小幅

4.heightプロパティ（内容の高さ）

height: 内容の高さ（初期値はauto）;

〇box-sizing→border-box=content+padding+border
　基本はautoで良い（正円、正四角形を作る時などは指定）

5.6.max-height,min-heightプロパティ（高さの最大値、最小値）

max-height: 内容の高さの最大値;
min-height: 内容の高さの最小値;

7.float/clearプロパティ（回り込み/回り込みの解除）

float: 回り込みの方向;

left	要素の左寄せ
right	要素の右寄せ
none	配置の指定なし

clear: 解除の回り込み（基本both）;

left	左方向の回り込み解除
right	右方向の回り込み解除
both	左右の回り込みを解除（基本はこれを使う）
none（初期値）	解除しない

例）
<div class="clearfix">
 <p class="float-left red">項目1</p>
 <p class="float-left red">項目2</p>
 <p class="float-left red">項目3</p>
</div>

↓　左並びにする場合

.float-left{
  width: 100px;
  float: left;
  color: white;
  text-align: center;
}

.red{
  background-color: red;
}

.green{
  background-color: green;
}

.blue{
  background-color: blue;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

8.position/top/left/bottom/rightプロパティ（要素の配置方法）

position: 配置方法;
top: 上からの配置方法;
bottom: 下からの配置方法;
left: 左からの配置方法;
right: 右からの配置方法;

例）
position: relative;
top: 100px
left: 10px

static（初期値）	通常の配置
relative	相対位置への配置
absolute	絶対位置からの配置（親からの相対位置）
fixed	固定位置に配置
sticky

〇むやみやたらに使わない！

9.z-indexプロパティ（重なりの順序）

z-index: 重なりの順序（初期値はauto）;

10.displayプロパティ（要素の表示方法）

display: 要素の表示方法;

block	ブロック属性
inline	インライン属性
inline-block	インラインブロック属性
none	非表示属性
flex
inline-flex
grid
inline-grid
table属性