display详解

了解

首先display分为对外显示和对内显示
对外显示：block、inline、inline-block
对内显示：flex、grid流式布局

对外显示

block块级元素

常见的块元素有p标签、div标签、ul标签、ol标签、h1~h6等。

块级元素特点

• 独占一行
• 可以设置width、height属性。
• 在不设置宽情况下，宽默认为父元素内容区宽
• 块级元素里可以放任意类型元素，不过要注意。
• 文字类元素标签内不能放其它块元素，比如
  • p标签里不能放p和div标签
  • h1-h6标签里不能放p, div元素

inline内联(行内)元素

常见的行内元素有：a、strong、span、i、del等

内联元素特点

• 相邻的行内元素会在一行显示，放不下时会换行显示
• 设置width、height属性是无效的。其宽高随其内容大小而撑开。
• 行内元素里只能放文本或其它行内元素
• 注意:
  • a标签中不能再放a标签。但a标签中可以放块级元素
  • 实际开发中，在某些情况下会把a标签转换为块级元素

inline-block(非官方说法)行内快元素

以下元素具有行内块元素的特性:img、表单类元素、video , audio等以上元素本质上叫可替换元素(归类归到行内元素)。
官方本没有行内快元素的说法

inline-block(非官方说法)行内快元素特点

• 相邻的行内块(或行内)元素会在一行显示，放不下会换行。
• 相邻的行内块元素之间会有空白间隙。
• 元素默认宽为它本身内容宽，可设置width、height属性。

三者区别

元素类型	排列方式	盒模型属性	内容
块级(block)	独占一行	width、height有效	任意元素
行内块(inline-block)	一行可显示多个	width、height有效	行内或行内块元素
内联(inline)	一行可显示多个	width、height无效	行内或文本元素

根据需要三者可以相互转换

比如要将div转成行内标签，只需要在css中写上
div{display:inline;}
即可

隐藏元素

属性	功能	—
display:none;	隐藏元素	可以将元素隐藏，子孙元素全部隐藏不可见。并且只要父元素隐藏，子孙没有任何办法可见。 元素隐藏后不会占空间。就好比页面当中就没有加过这个元素一样。
visibility :hidden;	隐藏元素	将元素隐藏，子孙元素全部不可见，但是给子孙加上 visibility:visible;时，子孙可见。 隐藏后仍占其位置，会留下空白的一块区域。基本不用。

对内显示

display:flex

单独发一篇

display:grid

单独发一篇