值描述none元素会被隐藏,不显示inline元素会被设置为内联元素,内部按行从左向右排列(元素前后没有换行符)block元素会被设置为块级元素,内部按列从上到下排列(元素前后带有换行符)inline-block元素会被设置为行内块级元素,不会独占一行的块级元素list-item元素会作为列表显示table元素会作为块级表格来显示(类似table),表格前后带有换行符flex元素会进入flex布局模式
inline、block、inline-block三者区
block块级特点:
-
每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)
-
元素的高度、宽度、行高以及顶和底边距都可设置。
-
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
inline内联特点:
-
和其他元素都在一行上;
-
元素的高度、宽度及顶部和底部边距不可设置;
-
元素的宽度就是它包含的文字或图片的宽度,不可改变。
inline-block 特点:
-
inline-block内联块状元素同时具备内联元素、块状元素的特点。
-
和其他元素都在一行上;
-
元素的高度、宽度、行高以及顶和底边距都可设置。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
css