◆ strict モードか互hù換huànモードかが変biànわる
◆ デフォルトのマージンで画huà面miàn外waìの部bù分fēnは無wú視shìされる
◆ css の px が省shěng略lWè可kě能néng
みなさん doctype 宣xuān言yán書shūいてますかー？

ちょっと試shìしたい時shíには 書shūかないで作zuòって あとから書shūいてある方fāngに埋maíめ込むと動dòngかなかったりずれてたり そういうことがあるのでとりあえず全quán部bùに書shūいておいたほうがいいと思sīいます

<!doctype html>
これを1行xíng目mùに書shūくだけです
コピペしなくても特tèに困kùnらない長chángさです

違weíいは？

どういう違weíいがあるかですが 上shàngの宣xuān言yán文wénは HTML5 の書shūき方fāngで sttrict モードになります
何héもかかないのは 互hù換huànモードです
互hù換huànモードは名míng前qiánの通tōngり昔xīの記jì述shù方fāng法făでも動dòngくようにしています
こっちのほうが便biàn利lìなところもありますが HTML5 は strict モードだけらしいですし strict モードをメインに考kaŏえていけばいいと思sīいます
宣xuān言yánなしだと HTML5 が使shĭえないってわけではないんですけどね

よく困kùnる違weíいは 高gaōさの 100% の扱xīいの違weíいですね
strict モードだと html と body から height:100% を指zhĭ定dìngしないとダメです
さらに Chrome だとなぜか 100% なのにはみ出chūてスクロールバーが出chūるバグのような挙jŭ動dòngをします

気qìづきづらい違weíい

ここまでは （Chromeがおかしいのは除chúいて）有yoŭ名míngなところだと思sīいます
今jīn回huíは 最zuì近jìn私sīが気qìづいた部bù分fēn2つの紹shaò介jièです

サンプルを用yòng意yìしてるので比bĭ較jiaòしてみてください
doctype 宣xuān言yánあり
doctype 宣xuān言yánなし

doctype-px-sample

1つめ

margin を見jiànてみてください
宣xuān言yánなしのほうが上shàngの方fāngに文wén字zìがあります

p タグは Chrome だと 18px の上shàng下xiàマージンがデフォルト値zhíです
宣xuān言yánありでは 18px 上shàng部bùに確què保baŏされていますが 宣xuān言yánなしではマージンは body タグの部bù分fēnだけで p タグ分fēnの上shàng部bùマージンはありません

ですが 自zì分fēnで margin:18px 0; と設shè定dìngすると 宣xuān言yánありと一yī緒xùの位weì置zhìになります
ブラウザ固gù有yoŭのスタイルに限xiànり適shì用yòngされないみたいです

2つめ

黄huáng緑lwの四sì角jiaŏにマウスカーソルを持chíっていってください
宣xuān言yánなしでは ピンクの四sì角jiaŏが移yí動dòngしますが 宣xuān言yánありだと移yí動dòngしません

違weíいは スタイルの変biàn更gèngで px をつけるかどうかです
elem.style.left = 100
と px なしでも 宣xuān言yánなしの方fāngはちゃんと 100px にしてくれています



1つめは宣xuān言yánありの動dòngきのほうが好haŏきですが 2つめは宣xuān言yánなしの動dòngきのほうが好haŏきです

こういう違weíいは探tànすとまだまだありそうなので互hù換huànモードで作zuòったのを strict モードにコピペするのは危weī険xiănだと思sīいます
可kě能néngなら最zuì初chūから両liăng方fāng一yī緒xùにしたほうがいいです