Display

Display

控制元素显示隐藏。
display 属性规定元素应该生成的框的类型

• 值 描述
• none 此元素不会被显示，且不占空间
• block 此元素将显示为块级元素，此元素前后会带有换行符
• span{
  display: block;
  background-color: gray;
  height: 100px;
  width: 100px;
  }

1. • 一个块级元素占一行
2. • 块级元素可以设置宽高

• inline 默认。此元素会被显示为内联元素，元素前后没有换行符

 .display{
display:inline; 
background-color: aqua;
height: 100px;
width: 100px;
}

1. 行级元素多个元素占一行
2. 行级元素不可以设置宽高

---

• inline-block 行内块元素

• .display{
  display:inline-block;
  background-color: aqua;
  height: 100px;
  width: 100px;
  }
  span{

  background-color: gray;
  height: 100px;
  width: 100px;
  }
  

1. 多个元素占一行
2. 且可以设置宽高

---

• list-item 此元素会作为列表显示
• run-in 此元素会根据上下文作为块级元素或内联元素显示
• table 此元素会作为块级表格来显示，表格前后带有换行符
• inline-table 此元素会作为内联表格来显示，表格前后没有换行符
• table-row-group 此元素会作为一个或多个行的分组来显示
• table-header-group 此元素会作为一个或多个行的分组来显示
• table-footer-group 此元素会作为一个或多个行的分组来显示
• table-row 此元素会作为一个表格行显示
• table-column-group 此元素会作为一个或多个列的分组来显示
• table-column 此元素会作为一个单元格列显示
• table-cell 此元素会作为一个表格单元格显示
• table-caption 此元素会作为一个表格标题显示
• inherit 规定应该从父元素继承 display 属性的值

visibility

visibility 属性规定元素是否可见

• 值 描述
• visible 默认值。元素是可见的
• hidden 元素是不可见的
• collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”
• inherit 规定应该从父元素继承 visibility 属性的值