margin padding float リセットCSSについて

padding marginの理解のための参考

イメージとしては下記のように覚えるとわかりやすいでしょう。

padding 自分が太る

margin まわりにふくらむ

floatについて

floatすると親要素が消える
親要素に高さを持たせると親要素が出る
overflow:hiddenを使う。
overflowは中の子要素を認識しないとスクロール表示がはみ出してしまうから、その機能を利用

疑似クラス afterを使用→clearfixを使用。

clearfix公式サイト

http://csscreator.com/attributes/containedfloat.php

inline は高さがなくなるので、背景画像などを入れる場合は inline-box指定をする。

詳細はこちらで確認してください。

http://taneppa.net/float/

positionプロパティの値の種類、意味

static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されず、初期値に配置します。(個人的に使わないです)
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。(個人的に単独で使う事はほぼないです)
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となり、top、bottom、left、rightは適用されます。(個人的に単独では使わないです)
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。(IE6は対応出来ていません)

詳細は下記で確認してください。

http://www.css-lecture.com/log/css/037.html

リセットCSSを使う場合、
YUIリセットCSS エリックメイヤーなどを使うのが最近の主流。

ブラウザそれぞれの持つ独自のCSSをリセットし、自分が作った通りの表現をするためリセットCSSは必要となります。

CSSコードのブラウザ対応確認は以下で行い、PC、スマホともに対応しているブラウザを確認するようにしてください。

【Can I use】

http://caniuse.com/

W3C で最新情報を常にチェックしましょう。

http://momdo.github.io/html5/Overview.html

Scroll Up