今天寫demo的時候發現可以給span元素設定寬高了，但是並沒有給span元素設定任何display:block的屬性。
找原因的過程中發現了下圖：
已知span預設是display:inline;的，是內聯元素。
而float、position是脫離文件流的布局方式，和display在文件流的布局方式是互斥的。
也就是說，float,display,position三個屬性，同時設定的話，display其實是不起作用的。
就像span預設是inline，你設定float之後，還是可以設定寬高，不需要設定display: block;
css有個核心的定位機制，稱作vfm（visual formatting model ）。
裡面講了css的定位機制（position scheme)，有三種，normal flow,float,absolute positioning
如何給span設定高度寬度？
內容提要 給span設定高度和寬度後沒有作用。本文介紹了如何如何給span設定高度寬度。css模型中經常用的容器是div和span。給span設定高度和寬度後沒有作用。www.xin126.cn 執行頁面 span 設定高度寬度後不起作用的解決方法 在span的css中增加display block...
標題高度塌陷的情況及解決方法
在靜態頁面布局中經常會出現高度塌陷的情況，給前端入門的同學造成很大的困擾，那麼造成高度塌陷是有什麼引起的呢。什麼是高度塌陷？主要就是因為在父元素沒有設定高度 或者高度自適應的情況下 子元素全部脫離文件流，也就是子元素全部浮動，就會發生高度塌陷。父元素高度塌陷後，父元素以下的元素都會向上移動，導致布局...
在寫高度自適應時遇到高度坍塌的問題及解決辦法
問題描述 通常在寫高度自適應的時候，父級的高度通常要設定成自適應，其在頁面顯示的真正高度其實是由子元素撐開的高度。通常在這種自適應的頁面中，布局通常會用到浮動，讓子元素浮動起來，可以在同一排顯示，但是子元素浮動後會脫離文件流，這會導致其父級失去高度，從而造成高度坍塌的問題。如下圖 由於子元素現在為空...