CSS基础框盒模型与HTML元素类型

CSS框盒模型

在使用CSS进行layout的时候，经常需要对BOX Model中的元素进行调整，Box模型定义四个概念：Margin,Border,Padding与Content。

• Margin 外边距，块级元素边框之间的距离，用来增强文本可读性。使用margin-top、margin-right、margin-bottom、margin-left来定义间距大小。

• Border 边框，元素的边框，用以区分元素范围，可以设置边框类型颜色以及宽度。

• Padding 内边距，显示内容与元素边框之间的间距，用以增强文本，图像可读性。

  内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

• Content 内容，即需要显示的内容，容纳文本，图像或者视频等元素。

写一个简单的HTML如下：

Chrome渲染效果如下：

Chrome Debug如下：

HTML元素类型

• Top-level element 【顶级元素】: { html, body,head }

• Block-level element 【块级元素】: { p, h1~h6, div, ul }，块级元素之间自动换行，任意一个块级元素均可使用BoxModel来描述。

• Inline element 【内联元素】: { a, br, em, img, li, span }，文本，图片等元素的具体表现。

任何不是块级元素的可见元素都是内联元素