CSS元素的显示模式

CSS元素的显示模式

什么是显示模式

• 在HTML中将所有的标签分为两类，分别是容器及和文本级
• 在css中也将所有的标签分为两类，分别是块级元素和行内元素

什么是块级元素和行内元素

• 块级元素独占一行，可设置宽高
• 行内元素不独占一行，不可设置宽高

怎么区分块级元素和行内元素

• 所有的容器级标签都是块级元素
• 所有的文本级标签(除了p标签)都是行内元素

区分块级元素

• 是否独占一行
• 如果没有设置宽度，那么默认宽度和父元素一样宽
• 如果设置了宽高那么按设置的显示

区分行内元素

• 是否独占一行
• 如果没有设置宽度，那么默认宽度和内容一样宽
• 行内元素不可以设置宽度和高度

行内块级元素

• 元素既不占一行又可以设置宽高

显示模式的转换

给元素设置css属性:

display:inline(行内)/block(块级)/inline-block(行块);