Bottleneck_html/css_WEB-ITnose

私は Zhang Xinxu のブログがとても好きで、ずっと読んでいました。最近、私の状態が少し間違っていたので、CSS 学習のボトルネックについての彼のブログを読み返しました。

個人的な経験

まず私の個人的な経験について話させてください。フロントエンドの最も基本的な要素は html、css、js です。私の個人的な理解では、html はスケルトン、css は衣服、js はアクションです。したがって、適切な HTML 構造を書くことが最も基本です。 CSS を始めるのもとても簡単です

私が初めてフロントエンドに取り組み始めたときは、こんな感じでした毎日が新鮮で、毎日が新しい知識にさらされ、毎月、他の人が書いたエフェクトやフレームワークを読み、自分で使用しました。今は少し焦りを感じていて、以前ほど早く新しいことを学ぶことができません。

ダダの視点

ダダのブログに戻りますが、私の今の状況はおそらくダダが挙げたボトルネック1です。 。 。この記事は本当に読む価値があります。長い間何も書いていなかったため、自分の表現力が低下し、今はブログを頑張っています。

本題に戻り、Da Da が提起したいくつかの質問に答えてみましょう:

dl、dt、dd の 3 つのタグに対するブラウザのデフォルトのマージン値はどれくらいですか?デフォルトで太字のテキストが含まれるラベルはありますか?

うわー

これは私が Chrome で書いてコピーして貼り付けたデモです。実際、dt はこれらのことにまったく注意を払っていませんでした。これは恥ずかしいことです。 。 。

line-height:150% と line-height:1.5 の違いは何ですか?

dl {display: block;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}dt {display: block;}dd {display: block;-webkit-margin-start: 40px;}

line-height

1. line-height:15px 親要素は行の高さをピクセル単位で設定し、子要素はその行の高さを継承し、独自のフォントサイズが変更されても変更されません
2. line -height:150% 親要素は line-height の割合を設定します。 子要素の line-height = 親要素の font-size ※親要素の line-height の値はフォントとして変更されません。 -子要素のサイズが変更されます
3. line-height:1.5 親要素は、子要素の行の高さ = 子要素のフォントサイズ * 親要素の行の高さを数値で設定します。子要素のフォントサイズが変わると変化します

上のデモの行の高さを変更して効果を確認できます

なぜ float によって外部コンテナの高さが崩れるのですか?これはバグですか?

当時一緒にクリアした浮遊物の跡が大きく残っています

追記 これは先週か先々週のことのようですが、半分書ききれていなかったので書きました。それは置いといて、「IE7、IE8、IE9 では垂直方向の配置のパフォーマンスが異なるのはなぜですか? レンダリングのメカニズムは何ですか?」という質問はまだ書かれていないので、次回追加します。