要素のプロパティに変更が加えられると、ブラウザは、その変更の影響を受けるすべての要素のサイズと位置を計算しなくてはなりません。たとえば、相対的な位置設定がしてある要素の位置が変わると、他の子要素や親要素に影響が及ぶことになります。
したがってレイアウトの再計算はできるだけ避けるようにすることが重要です。
レイアウト変更をともなうプロパティ
width, height, padding, margin, display, border-width, border, top, position, font-size, text-align, font-weight, left, font-family, line-height, vertical-align, right, bottomなど多数
再描画をともなうプロパティ
color, border-style, visibility, background, text-decoration, background-image, background-position, background-repeat, border-radius, box-shadow, background-sizeなど多数