web前端入門到實戰：外邊距合併現象、盒子模型以及寬度和高度

1、 在默認佈局的垂直方向上，默認狀況下外邊距是是不會疊加的，會出現合併現象，誰的外邊距較大，就聽誰的；可是在水平方向就不會出現這種情況，咱們舉個例子

span{

            display: inline-block;

            width:100px;

            height:100px;

            border:1px solid red;

        }

        div{

            width:100px;

            height:100px;

            border:1px solid green;

        }

        /*咱們讓span的兩個盒子，相距100px*/

        .hezi1{

            margin-right:50px

        }

        .hezi2{

            margin-left: 50px;

        }

        .box1{

            margin-bottom:50px;

        }

        .box2{

            margin-top:50px;

        }

..........省略代碼..........

<span class="hezi1">我是span</span>

<span class="hezi2">我是span</span>

<div class="box1">我是span</div>

<div class="box2">我是span</div>
web前端開發學習Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻

2、盒子模型

1.什麼是盒子模型

答：CSS盒子模型僅僅一個比較形象地比喻，HTML中全部的標籤都是盒子，咱們現實生活中的物品大多都是有位置區域劃分的​。

​注意：在HTML中全部的標籤都是能夠設置​：寬度高度、內邊距、邊框、外邊距

2.​舉例：

<style>

        span,a,b,strong{

            display: inline-block;

            width:150px;

            height:150px;

            padding:20px;

            border:2px dotted red;

            margin:10px;

        }

</style>

........省略代碼..........

<span>我是span</span>

<a href="#">我是一個超連接</a>

<b>我是加粗</b>

<strong>我是強調</strong>

釋義：經過谷歌開發者工具，咱們能夠查看，每一個標籤所屬的區域，它們之間的數字，都是嚴格按照定義來的，F12下的有指導模型。

2.盒子模型的寬度和高度

（1）內容的寬度和高度：width\height設置的寬度和高度

（2）元素的寬度和高度​：邊框加內邊距加內容的寬度和高度

（3）元素空間的寬度和高度：外邊距加邊框加內邊距加內容的寬度和高度