box-sizing: border-box;
max-width: 700px;
min-width: 500px;

マージンの中央配置
margin:0 auto 0 auto;
左右をいい感じにとってね

width:70%
max-width:700px;　画面を変えても大きさ維持
margin:0 auto ; 　　上下は０　左右は２０

marginの相殺：大きい数字にもっていかれる

position

.test01 {
width:500px;
height:500px;
background:pink;
position:fixed;
top:20px;
left:20px;
z-index:-1; /999は一番上に指定/
}

.test02 {
width:200px;
height:200px;
background:orange;

}

relative;　親につけると子供がついてくる
absolute　子供につけると親についていく
あまりつかわない

display:inline;　サイズに合わせる　width指定できない

display:inline-block; サイズにも合わせてくれて横幅指定できる

display:block;　p、div、ul、h1～h6などのタグの初期値

.oya p:first-of-type {
background: #4f1;
}　　　　　　　最初のｐだけ色変える

.oya p:last-of-type {
background: #c6b;
}　　　　　　　最後のｐだけ色変える

.oya p:last-of-type {
background: #c6b;
width:200px;
margin:0 auto;
text-align:center;
}　　　　
２００ｐｘでマージンの横幅も親にいいかんじにしてtext-align:center;で文字も真ん中

overflow:scroll; 親からはみ出ている文字をスクロール