HTML行内元素、块级元素、盒模型

1：行内元素

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：

行内元素	说明
a	超链接
span	常用行级
strong	加粗，强调
b	加粗，不强调
em	斜体，强调
i	斜体，不强调
img	图片
input	输入框
select	下拉列表

2：块元素

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表：

块级元素	说明
div	最典型的块元素
p	表示段落
h1-h6	表示1-6级标题（默认加粗）
br	表示换行
ol	有序列表
ul	无序列表

3：总结

1. 块级元素的宽度是 100%，在浏览器中默认独占一行。
2. 行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
3. 块级元素内部可以嵌套块级元素或行内元素。
4. 建议行内元素里面只嵌套行内元素

css盒模型

1：什么是css盒模型

css的盒模型由里到外包括：content,padding,border,margin4部分,如图所示。

css的盒模型有两种：IE盒模型和标准盒模型。

2：两种盒模型的区别

• W3C标准盒子模型(content-box)：内容就是盒子的边界。

• W3C标准盒子模型(content-box)： width=内容宽度

• IE盒子模型(border-box)：边框才是盒子的边界。

• IE盒子模型(border-box)： width=内容宽度+padding+border