盒子模型自学笔记——或许能帮你快速了解盒子模型

盒子模型

元素分类

内联（行内）元素 inline

• 和其它元素在一行上；
• 元素的高度、宽度以及顶部、底部外边距（margin-top，margin-bottom）不可设置，顶、底部内边距（padding-top，padding-bottom）对周围元素无影响（padding只对本行元素有效）；
• 元素的宽高就是其包含的文字和图片的宽度，不可改变；
• 常用的内联元素：a, span, br, strong, em；
• 设置display: inline; 可以将元素转换为内联元素。

块级元素 block

• 一个块级元素独占一行；
• 元素的高度（height），宽度（width），行高（line-height）以及顶部、底部边距（margin，padding）都可以设置；
• 元素高度在不设置的情况下，是它父容器的100%（和父元素高度一致）；
• 常用的块级元素：div, p, h1…h6, ul, ol, dl, table, adress, blockquote, form；
• 设置display: block; 可以将元素转换为块级元素。

内联块级元素（行内块元素）inline-block

• 和其他元素在一行上；
• 元素的宽高以及顶部、底部边距可以设置；
• 常用的内联块级元素：img, input；
• 设置display: inline-block; 可以将元素转换为内联块级元素（BFC）。

盒子模型类型（重要）

box-sizing: content-box;

• 元素的width = content的宽度；

• 自己会膨胀。

box-sizing: border-box;

• 元素的width = content的宽度 + padding + border
• 自己不会膨胀

这一切与margin无关

盒子模型布局稳定性

使用优先级：
$$width>padding>margin$$