dispaly属性四大常用取值

四大常用取值

值	描述
none	此元素不会显示
inline	此元素将显示为块级元素，且前后会带有换行符
block	默认。此元素会被显示为内联元素，且前后没有换行符
inline-block(CSS2.1新增的属性)	行内块元素

 

 

 

 

 

 

 

我们在介绍这四种display取值之前我们先区分一下什么是块级元素与行级元素:

 

• 块级元素

块级元素会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，同样也可以设置   margin与padding属性。

注意：clear属性也只能作用块级元素。

ps:常见的块级元素:div,img,ul,form,p等.

 

• 行级元素 

行级元素与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。

ps：常见的行级元素:em，strong，br,input等.

 

 

1.none

隐藏该区域，不占实际空间。但对后台来说真实存在，可以获取被隐藏的元素

和visibility:hidden的区别
hidden占实际空间，其后的元素仍在该有的位置，而none后的元素占none原有的位置

 

2.inline

多个内联元素占同一行，直到放不下才换行。

设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效；

元素的宽度就是它包含的文字或图片的宽度，不可改变。

3.block

单独占一行，每一个块级元素都是从新的一行开始。

元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

可以设置width,height，maigin四个方向，padding四个方向；

4.inline-block

看上去inline-block像是一个混合产物，实际上确是如此，它将元素显示为行内块状元素.

设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性。

inline-block问题：

在我的另外一篇博客有介绍：https://blog.csdn.net/qq_36470686/article/details/82863259