初心者がハマったCSSまとめ

#前提
私がハマったcssをまとめた備忘録です

##display
要素の「表示形式」を指定するプロパティ

###ブロックレベル要素　display: block
見出し要素（h1, h2, h3…h6）、p、ul、ol、li、div、table
要素の前後に改行が入り、ブロックが積まれているイメージ

・widthとheightを指定できる
・上下左右にmargin,paddingを指定できる
・text-alignは要素の中身に適応される

###インライン要素 display: inline
ブロックレベル要素の中身として使われる要素(a、span、strong など)
テキストの一部として扱われるため、要素の前後には改行は入らず横に並んでいくイメージ

・widthとheightを指定できない
・左右だけmargin,paddingを指定できる
・text-alignは親ブロックに指定することで適用できる

###display: inline-block
・横に並んでいく
・widthとheightを指定できる
・上下左右にmargin,paddingを指定できる
・text-align を親ブロックに付けることで指定できる。

<ul>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
<ul>

li {display: inline-block;}
a { display: block;}

listをインラインブロックで横並びにして、aをブロック要素で表示することでクリックできる範囲を広げる

##overflow
ボックス内に収まりきらない内容の処理を指定するプロパティ

・visible(初期値)：ボックスから内容をはみ出して表示

・hidden：ボックスからはみ出した要素は表示しない

・scroll：ボックスに入りきらない内容はスクロールで表示される

・auto：ボックスに入りきらない内容はスクロールで表示される

autoとhiddenの違い
autoは内容が入りきらない場合にのみスクロールバーが表示
hiddenは内容にかかわらず常に表示される

##position

position: staticが初期値
通常の位置に配置される、topやbottomなどの位置を指定できない

###position: relative
元々配置される位置を基準にtopやleftなどを指定することができる

###position: absolute
通常の位置から外れてbodyが基準になる
親要素にstatic以外の値を設定している場合は親要素の左上が基準の位置になる

<div class="container">
  <img href="#">
</div>

.container{
            position: relative;
          }
.container img{
                position: absolute;
                top: 50%;
                left: 50%;
              }

containerを基準にimgの場所を指定できる

##clear

回り込みの解除
floatプロパティで左、右寄せを指定されている要素の回り込みを解除する際に使用

none　初期値。回り込みを解除しない
left　左寄せされた要素に対する回り込みを解除
right　右寄せされた要素に対する回り込みを解除
both　全ての要素に対する回り込みを解除