CSS布局之显示方式

学习前端有一段时间了，整理一下学习心得，顺便给初学者一些参考。（持续更新）
如果有写的不对的地方，还望指教。

---

今天来说说布局中的显示方式——display，这个也是CSS布局中常用的一个属性。

我们先来看看display有哪些取值。

我们来看下例子：

//定义两个标签
        <div id="div1">
            我是div1;我是div1;我是div1;我是div1;我是div1;
        </div>
        <span>
            我是span1;
        </span>
//样式
        #div1,span{
            color: #fff;
            background: #000;

        }

如果我们给span设置一个宽度，它是没有效果的。所以想要为内联元素设置宽度，我们就要将元素设置为inline-block。

        span{
            display: inline-block;
            width: 200px;
            height: 200px;
        }

display的最后一个属性是none，一般用于控制元素的隐藏。

display：none 跟另一个元素隐藏visibility:hidden还有点不一样。

display:none元素不显示，同时元素保留位置，而visibility:hidden的隐藏，元素不显示但是保留位置。

我们看下例子：

        <span class="span1">
            我是span1;
        </span>
        <span class="span2">
            我是span2;
        </span>

我们将第一个设置为none;

        .span1{
            display: none;
        }

如果把display改为visibility:hidden；