元素的显示模式以及转换

元素的显示模式

块级元素：

• 独占一行（一行只能显示一个）

• 宽度默认是父元素的宽度，高度默认由内容撑开

• 可以设置宽高

h1~h6,ul,li ,p,ol,dl ,dt,dd ,header,nav,main,footer

行内元素(内联元素):

• 一行可以显示多个

• 宽度和高度默认由内容撑开

• 不可以设置宽高

span,b,u,i,em,strong,a

行内块元素

• 一行可以显示多个

• 可以设置宽高

input textarea,select,button，img

行内元素水平方向的 margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效

元素嵌套规范

块元素一般作为大容器，可以嵌套文本，块元素，行内元素，行内块元素等...

注意 p标签里不能嵌套 p，div，h等块级元素

a标签内部可以嵌套任意标签

注意: a标签不能嵌套a标签

行内元素不要嵌套块元素

元素显示模式转换

改变元素显示的特点，让元素符号我们布局要求

display:block;         转换为块元素    
display:inline-block;  转换为行内块元素 
display:inline;        转换为行内元素    极少使用 
  

注意: 几乎不会把块元素转换为其它元素，用的最多的是把行内元素转换为行内块或者块，比如a