css中的块级元素和行内元素（了解），显示模式转换（掌握）

首先在讲块级元素和行内元素之前我们先认识一下容器级标签和文本级标签

容器级标签

什么是容器级标签：
容器级标签就是网页中单独占一行的标签，如：div、h、ul、ol、dl、li、dt、dd…等标签。

文本级标签

什么是文本级标签呢：
文本级标签就是网页中能够在一行中全部显示的标签，如：span、p、buis、strong、em、ins…等标签。

块级元素

什么是块级元素呢？
块级元素就是在网页当中独占一行显示。
块级元素有哪些呢？
所有的容器级标签都是块级元素。
特殊的块级元素：p


注意点
1.块级元素如果不设置宽和高，那么他将按照默认的值来显示。
2.如果设置了宽和高，那么他将按照设置的属性来显示。

行内元素

什么是行内元素呢？
行内元素就是在网页中显示在同一行。
行内元素有哪些呢？
所有的文本级标签都是行内元素。（除了p）


注意点
1.行内元素不可以设置宽和高。

元素之间显示模式的转换（掌握）

一、块级元素转换为行内元素

转换前

转换后

二、行内转换为块级

转换前

转换后

三、行内块级元素转换

转换前

转换后

如何设置元素转换

在css中添加display

display的取值

inline：将块级元素转换为行内元素
block：将行内元素转换为块级元素
inline-block：转换为行内块级元素

快捷键

dl：display:inline
db：display:block
dib：display:inline-block