六、元素显示三大模式

1.行内元素：

属性：display：inline

显示特点：

①行内元素只能容纳文本或者其他行内元素。

②宽度只与内容有关。

③和其他元素都在一行上显示。

④高，行高及外边距和内边距部分可改变。

(多个元素可以在一行显示，不会自动换行，宽高自动。与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度。)

2.块级元素：

属性：display：block

显示特点：

①高度，行高以及外边距和内边距都可控制。

②总是在新行上开始，占据一整行。

③它可以容纳内联元素和其他块元素。

④宽度始终是与浏览器宽度一样，与内容无关。

（霸占一行，不能与其他任何元素并列。能设置宽高，如果不设置宽度，那么宽度将默认变为父级的100%。）

块级元素有哪些：

3.两者的区别

1.行内元素与块级元素直观上的区别。

行内元素会在一条直线上排列，都是同一行的，水平方向排列。

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上。

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

4.行内块元素

属性：display：inline-block

显示特点：

1.一行可以显示多个；

2.可以设置宽高。

行内块元素有哪些：

input、textarea、button、select......

特殊情况：img标签有行内块元素特点，但是却是行内元素。

5.html嵌套规范注意点

1.块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等… 但是: p 标签中不要嵌套 div 、 p 、 h 等块级元素

2.a标签内部可以嵌套任意元素