css display

昨天有说到div因为block这个元素而占了整行无法并排，今天就来说一下block是甚麽样的元素
display是css中的语法，他有几个常被使用的元素，分别是block、inline、inline-block和none，本篇将会说明这几个元素的差异
我写出三个方块，并且方块的css设定如下，本篇只会改变display的元素

        .box1, .box2, .box3{
            height: 150px;
            width:150px;
            color: white;
            font-size: 50px;
            margin: 15px;
            padding: 20px;
            display: block;
        }

block也是网页中的预设状态，他的特性是可以定义它的长宽以及marging和padding，但是会占满整行的空间，因此无法并排

下方的灰线是用来观察margin-bottom的距离
inline可以说是block的相反值，他无法改变长宽，他占有的空间就只有被文字撑开的大小而已

从图中可以观察到，margin只作用在横向，虽然padding使底色向下延伸了一些，但是下方灰线的起始位子依然是文字的下方，代表他也只影响了横向和底色面积
接下来是inline-block，它结合了以上两者的优点，可以定义长宽及marging和padding，又不会占有本身定义外的空间，也就是可以达成并排的效果

可以发现inline-block似乎是最符合预想效果的表现方式
最後一个none也就如同字面上的意思，被定义为none的物体将不会显示出来，并且不会占有物体原来的位子

            display: none;

仔细看可以发现灰线是贴在网页最上缘的，代表那些物体不是被隐藏了，而是不存在