CSS元素显示模式及标签嵌套

块级元素

显示特点：

1.独占一行（一行显示一个）

2.宽度默认是父级宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div,p,h标签，ul,li,dl,dt,dd,form,header,nav,footer.......

代码展示

效果展示

行内元素

显示特点：

1.一行可以显示多个（不换行）

2.宽度和高度默认由内容铺开（设置宽高不生效）

3.不可以设置宽高(尺寸和内容的大小相同）

代表标签：

a,span,b,u,i,s,strong,ins,em,del.....

代码展示

 效果展示

 行内块元素

显示特点：

1.一行可以显示多个

2.可以设置宽高

代表标签：

1.input,textarea,button,select......

代码展示

效果展示

元素显示模式转换

目的:改变元素默认的显示特点，让元素符合布局要求

语法：

属性：display:block      效果：转换为块级元素  使用频率：较多

属性：dispay:inline-block   效果：转换为行内块元素   使用频率：较多

属性：display:inline      效果：转换为行内元素   使用频率：较少

代码展示

效果展示

标签嵌套规范注意点

1.一般是块级嵌套行内

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

但是：p标签不能嵌套div,p,h等块级元素

3. a标签内部可以嵌套任何元素

但是：a标签不能嵌套a标签