一段玄學的CSS代碼，誰來解釋一下？

重新描述一下，當普通的div包裹著固定寬度的兩個div子元素時，當瀏覽器窗口縮小時，會出現(xiàn)子元素“沖出”父元素的現(xiàn)象，當給父元素div增加inline-block的屬性后，子元素和父元素就自適應了，也就是子元素不會沖出父元素，而父元素隨著瀏覽器窗口大小自適應。

我想問的是這個現(xiàn)象的本質(zhì)？以及inline-block在這里的影響？

<div class="outter">
  <div>1</div>
  <div>2</div>
</div>

.outter {
  background: red;
  padding: 5px;
  display: inline-block;
}

.outter div {
  width: 800px;
  margin: 5px;
  background: gray;
}

當瀏覽器寬度小于div時，就會發(fā)生這樣的現(xiàn)象，

在父元素加上inline-block之后就正常了，求問為什么，這里inline-block發(fā)揮了什么作用

回答

編輯回答

她愚我

其實沒有什么神奇的：

塊級元素，比如 div，默認寬度是父級的寬度，同時它的 overflow: visible，所以你會看到子元素比父元素還大
display: inline-block 之后，轉(zhuǎn)為行級對外，塊級對內(nèi)，所以以子元素的寬度作為默認寬度

其實說白了，早年 HTML 和 CSS 沒有布局這個概念，所有布局都是開發(fā)者在理解了渲染機制的基礎上自己摸索出來的。

2017年9月12日 22:32

編輯回答

拮據(jù)

摘抄《CSS世界》豆瓣讀書第三章 3.2.1小節(jié)的一段來解釋下。

3.2.1 深藏不露的 width:auto
我們應該都知道， width 的默認值是 auto。 auto 因為是默認值，所以出鏡率不高，但
是，它卻是個深藏不露的家伙，它至少包含了以下 4 種不同的寬度表現(xiàn)。
（1）充分利用可用空間。比方說， <div>、 <p>這些元素的寬度默認是 100%于父級容器的。
這種充分利用可用空間的行為還有個專有名字，叫作 fill-available，大家了解即可。
（2）收縮與包裹。典型代表就是浮動、絕對定位、 inline-block 元素或 table 元素，
英文稱為 shrink-to-fit，直譯為“收縮到合適”，有那么點兒意思，但不夠形象，我一直把這種現(xiàn)
象稱為“包裹性”。 CSS3 中的 fit-content 指的就是這種寬度表現(xiàn)。
（3）收縮到最小。這個最容易出現(xiàn)在 table-layout 為 auto 的表格中，想必有經(jīng)驗的
人一定見過圖 3-4 所示的這樣一柱擎天的盛況吧！
眼見為實，有興趣的讀者可以手動輸入 http://demo.cssworld.cn/3/2-1...

div默認是display: block;width:auto;，所以（1）充分利用可用空間。所以跟著父級容器body變動而變動。
而把div設置為display:inline-block;width:auto;，則表現(xiàn)為（2）收縮與包裹。收縮到合適也就是寬度為子容器的width:800px;

2018年3月11日 04:32

編輯回答

脾氣硬

display：inline-block：
簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
可以設置margin和padding屬性。

2017年7月24日 20:07