最近看了一眼最新的面試題，準備秋招，發現了乙個比較老的題，就是div+css經典布局的二列式布局和三列式布局，比如：兩列布局，左邊定寬，右邊自適應。或者三列布局，兩邊定寬，中間自適應。這不很好寫麼，比如我以前這麼寫
/*css***/
body
.left
.container
----------
id="test">
class="left">左側固定寬度div>
class="container">右側自適應寬度div>
div>很好，這並沒有什麼錯誤而且也實現了功能，而且一不會影響接下來div的正常排列，但接下來，一篇部落格引起了我的注意，博主提出了乙個強硬的條件，div的順序如果倒過來（也就是上面**的左側和右側的div**塊換下順序），那麼就會出現乙個問題，排列走樣了。
這個問題也很好理解，由於右側div是沒有浮動的，也就是他沒有脫離文件流，正常來講，他應該被蓋在紅的下面，所以我們在上面設定了margin來偏移div（浮動理解為沿著z軸漂浮，但飄起來的元素不一定在乙個麵內）。但是順序的改變帶來了一點微妙的變化，沒有浮動的div是乙個block元素，他在文件流中單獨佔一行，並且有marign-left的css，所以才會出現第一行有空白，這樣，上顯示的就很清楚了。
那麼怎麼辦呢，那篇文章的博主是這麼寫的（我會在底下給出鏈結）
html
id="wrap">
id="content" style="height:140px;">
id="contentb">
content自適應區，在前面
div>
div>
id="sidebar" style="height:240px;">sidebar固定寬度區div>
div>
css#sidebar
#content
#contentb
解釋一下這篇博主的思想（他是左邊自適應，右邊固定寬）：把左邊的也浮動起來，這樣他就沒有了預設寬度，再把寬度設定為100%，這樣左邊的寬度就等於瀏覽器寬度，然後把他margin-left乙個負紅塊的寬度，這樣紅塊就可以浮動上來了，然後由於margin-left了，相當於左移了距離，那麼在把裡面的內容div（contentb）進行margin-left乙個正值寬度，就可以正常顯示了。
出於好奇，想做乙個左邊寬度固定，右邊寬度自適應的，那大家想了還不簡單，把這裡面的左浮動換右浮動，margin-left換成margin-right不就完了麼。
注意，並不是這樣，這個地方有乙個問題，當你這麼還完了之後，是有這種效果，但是出現了下邊的橫向滾動條和右邊拉過去的一片空白（就是margin-right：-310px 的這個310px）。
那麼到底是怎麼回事呢，於是我小小研究了一下margin在浮動情況下負值到底代表這什麼。
這裡我們結合浮動來討論，例如：左浮動+margin-left：負值，簡稱為左左。
左左：這種情況，相當於你的div向左偏移了乙個margin-left的值（負值），不會出現滾動條，於是就有了一部分被瀏覽器左邊隱藏了得效果。
右右：這種情況，相當於你的div向右偏移了乙個margin-right的值（負值），但是會出現滾動條，而且右邊滾動條拉過去會出現白邊，白邊的值就是你設定的margin-right的值。
左右：這個和接下來的都是要重點研究一下的，推薦各位可以自己試一下啊，然後感受一下變化和差距。正常情況下來想，乙個div設定了左浮動，那還要他的右外邊距幹什麼？他的右外邊距應該由挨著他的下乙個元素的左外邊距來控制，但是這裡margin-right變成了乙個負值，接下來的現象就很神奇了，他的寬度相當於在減少，但是實際上展現在頁面上的還是那個寬度，這就意味著，當這個負值等於他本身的寬度的時候，他的寬度對挨著他的浮動元素來說就是0！！！這樣，就可以實現100%寬度的上浮，並可以實現經典的二列布局，見**
lang="en">
charset="utf-8">
二列布局，左寬固定，右自適應title>
/*css***/
.left
.container
.container_a
style>
head>
id="wrap">
class="container">
class="container_a">自適應寬度div>
div>
class="left">固定寬度div>
div>
body>
html>這裡面，div的順序只是影響了他們在z軸的高度，在前面的div比z軸座標值小（表現出來的就是被後面的div蓋上了，用類似z-index那種屬性來理解），這樣就算換了順序，還是原來的樣子，不會出現上面的問題（注意可能自適應有兩層div，外層div推薦設成無色，這樣就不會有覆蓋問題，具體可以調調div順序來觀察一下。）
然後右左就和這個一樣了，現在想要換成左邊適應，右邊固定，你只要把left換成right，right換成left就ok了。
lang="en">
charset="utf-8">
三列布局，左右寬固定，中間自適應title>
/*css***/
.left
.container
.container_a
.right
style>
head>
id="wrap">
class="left">固定寬度div>
class="container">
class="container_a">自適應寬度div>
div>
class="right">固定寬度div>
最後感謝這篇部落格的博主，這是他的部落格部落格鏈結
還有這些天大概看了一下bootstrap，感覺不是很習慣，有沒有感覺現在網頁全是bootstrap風格的，看久了也不愛看了。
這種對css布局和語法最基本的研究雖然可能用處不是很大，但是明白了當年一代而過的知識之後，還是很開心的。這幾天把我學的bootstrap更新一下，然後就可以放假回家，等待秋招啦！！！
前端小知識點 外邊距疊加的幾種情況
外邊距摺疊的幾種情況 1 當乙個元素出現在另乙個元素上面時，第乙個元素的底外邊距和第二個元素的頂外邊距發生疊加，效果圖如下 ps 這裡的元素特質塊級元素，inline元素豎向margin無效，display為inline block的元素觸發了bfc也不會出現疊加，input，img之類的行內替換元...
各種情況下的console
以一位良師益友 1.輸出到日誌 console.log x 2.顯示乙個物件所有的屬性和方法。console.dir obj 3.佔位符 只支援字元 s 整數 d或 i 浮點數 f 和物件 o 四種。如 console.log d年 d月 d日 2011,3,2 console.log 圓周率是 f...
受限情況下的程式除錯
平台不支援，例如 之前使用一款rk的晶元，晶元原廠告知不支援gdb除錯，原廠未移植成功。資源受限，例如 低端產品資源不足或者缺失關鍵資源 記憶體，儲存空間或者cpu效能不足，物理介面只有串列埠等 導致gdb無法執行。特殊時期，產品無法使用gdb除錯，例如 測試，生產，售後時期都無法再通過gdb除錯。...