八、样式设置了不起作用,可能是元素显示模式 / 方式的问题

63 阅读1分钟

可以借助调试工具查看元素的显示模式

块级元素

块级元素的显示特点是独占一行,就是一行只显示一个

块级元素的宽度默认是父元素的宽度,高度默认由内容撑开,可以设置宽高

常见的代表标签有:div、p、h 系列标签、无序列表标签等

image.png

行内元素

行内元素,如 a 标签、span 标签等,一行可以显示多个

行内元素的宽度、高度默认由内容撑开,不可以设置宽高,设置了也不会起作用

image.png

image.png

行内块元素

行内块元素一行可以显示多个,并且可以设置宽高

常见的行内块标签有:input 标签、富文本标签 textarea、button 按钮标签等

image.png

image.png

提示:

img 标签比较特殊,它有行内块元素的特点,但在调试工具中显示的是 inline

image.png

元素显示模式转换

元素的显示模式之间可以相互转换,最常用的是转换成块级元素和行内块元素,一般很少转换成行内元素

image.png

标签嵌套规范

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

a 标签内部可以嵌套任意元素,但唯独不能嵌套 a 标签