前提
私がハマった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 全ての要素に対する回り込みを解除