dispaly属性四大常用取值

四大常用取值

我们在介绍这四种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://www.cdsy.xyz/computer/programme/html_div_css/230615/cd44242.html