#レスポンシブデザインの救世主
- box-sizing: border-box;
これを使うことにより、width: ~%;という記述を使いたいときに
marginやpaddingの影響によりデザインが崩れることを防ぐことができる。
border-boxはheightやwidthが、marginやpaddingを含めた値となる。
- min-height: 数値px;
これを使うことにより、例えば横に並べたコンテンツごとの最小の高さをそろえることができる。
あまりコンテンツ内容が変更しないときに、一番長い高さのコンテンツに合わせるといいだろう。
- overflow: hidden;
ボックスの範囲内に内容が収まらなかった場合の表示方法
visibleが初期値
hiddenだと、はみ出た内容は表示されずスクロールバーもでない。
no-displayだとdisplay: none;のようにボックス全体が削除され
no-contentだとvisibility: hidden;のようにボックス全体が非表示
#不都合防止のためのCSS
test.css
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Chromeでinputにオートフィルされているときの問題。。
なんでや！！なんで背景が勝手に黄色になるんや！！！
って現象が起きる。
それを解決してくれるのがこのCSS！！
丸暗記で大丈夫だと思っている。こまったら頭の片隅にCSSで解決できるとだけ覚えておこう。