CSS笔记4：Display

0. display

display

1. dispaly & visibility

• display:设置一个元素应如何显示
• visibility:指定一个元素应可见还是隐藏

区别：
visibility:hidden即使不可见的元素也会占据页面上的空间。
display:none创建不占据页面空间的不可见元素。

display:none VS visibility:hidden

---

2. 块和内联元素

块元素：占用全部宽度，前后各有换行符；如<p>、<h1>、<div>
内联元素：仅必要的宽度，不强制换行；如<span>、<a>

3. display 元素显示

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

    <div id="div6" style="background-color:yellow;display:inline">display=inline</div>
    <div id="div7" style="background-color:blueviolet;display:inline">div7</div>
  

display:inline样式
注：左右排列，需要所有的涉及的元素style中display均是inline;因为block是前后均有换行符

• display:block
  

  display:block

• display: inline-block;
  inline-block是元素具备了两种（块级和内联）元素的功能，inline最重要的一点就是：元素能够在一行展示，而inline元素所缺失的设置宽高，也是block 元素的功能，从而两个联手，展现出了同行的块状效果。

---

4. visibility 元素显示

• visibility: visible
  默认值。元素是可见的。

• visibility:hidden
  元素是不可见的。

• visibility: collapse
  当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
  

  visibility: collapse样式

• visibility:inherit
  规定应该从父元素继承 visibility 属性的值。

5. 案例

实现鼠标放置a上，背景图改变

---

参考：

1. CSS Display(显示) 与 Visibility（可见性）
2. CSS visibility 属性
3. CSS display 属性