div盒子併排顯示在各大網頁中是很尋常的頁面效果，但是實現這種效果的方法確不止一種
方法一：使用float原本的浮動之後再設定外邊距，外層盒子的寬度會不夠導致最後乙個盒子在第二排顯示
為什麼不顯示？
原因：父元素：660px < 150px4 + 20px4 = 680px
因此還需要再重新定義最後乙個盒子的右外邊距為0
方法二：使用 display：inline-block.father.son
.last
class="father"
>
class
="son"
style
="background-color
: pink;
">
son1div
>
class
="son"
style
="background-color
: rebeccapurple;
">
son2div
>
class
="son"
style
="background-color
: sandybrown;
">
son3div
>
class
="son last"
style
="background-color
: slategrey;
">
son4div
>
div>
但是使用 display：inline-block會出現一些情況，比如：
盒子之間出現了多餘的間隙
在父元素中設定了font-size：0；消除間隙但是字型消失
在盒子中重新設定文字大小 font-size=14px
而且還需要再寫一些相容性的**，通常用來應對低版本的ie瀏覽器
**display: inline;
zoom: 1;
方法三：使用margin負值margin負值的處理方法就是讓四個盒子的外層再套一層盒子
當然這個盒子也的包裹在最外層盒子的裡面
沒有給wraper設定寬度的話，它的寬度是auto，佔父元素的100%，也就是960px
當給wraper設定了了margin-right：-20px，它會增加wraper的寬度，增加到980px
它要保證 width + margin -right=960
其實三種方法來說都差不多，只是不同的方法解決了不同的問題。關於間距：
就對於最後乙個盒子的右邊距來說，可以用margin-right：20px和margin-right：-20px來處理
只是它們解決問題的下手方式不同，乙個是消除自己，乙個是增加別人。
關於併排：
乙個使用float來實現讓塊級元素併排，雖然簡單，但是浮動會造成一定的影響，我們需要手動消除這些浮動產生的影響
另乙個就是用display：inline-block來讓塊級元素以行內塊的方式顯示。
HTML中盒子模型
盒子模型的組成 margin 外邊距 盒子與盒子之間的距離 border 邊框 包裝盒 padding 內邊距 填充物 content 內容 買好的東西 1.margin 合起來寫的屬性 4個 當你寫乙個的時候，四個全部相同 兩個的時候，上右，對邊補齊 三個的時候，上右下，對邊補齊 margin t...
html中div垂直居中
雖然div布局已經基本上取代了 布局，但 布局和div布局仍然各有千秋，互有長處。比如 布局中的垂直居中就是div布局的一大弱項，不過好在千變萬化的css可以靈活運用，可以製作出準垂直居中效果，勉強過關。要讓div中的內容垂直居中，無非有以下幾種方法，等我一一枚舉 一 行高 line height ...
HTML中的div元素
html中的塊元素 1,html中的塊元素是什麼？它可以用於在網頁中的定位 它的元素是div,比如在瀏覽器中你會看到幾塊區域它們就是利用div元素實現的 它的語法是 2,什麼是定位？定位就是將我們要顯示在網頁上的某個元素按我們指定的位置顯示在網頁上的某的位置 目前我們現在可以用兩種方法進行定位 相對...