前端基礎(一)

1 盒子模型

1.1 別人的基本總結

盒子的寬度 = margin-left + border-left + padding-left +width + padding-right + border-right + margin-right
1.2 若是內容區過大，將會溢出，此時可以使用overflow

/* 默認值。內容不會被修剪，會呈如今元素框以外  */
overflow: visible;
/* 內容會被修剪，而且其他內容不可見  */
overflow: hidden;
/* 內容會被修剪，瀏覽器會顯示滾動條以便查看其他內容  */
overflow: scroll;
/* 由瀏覽器定奪，若是內容被修剪，就會顯示滾動條  */
overflow: auto;

1.3 框類型(經常使用) display

| 值 | 說明 |

| ---------- | :---------- : | ----------: |

| block | 塊框（ block box）是定義爲堆放在其餘框上的框（例如：其內容會獨佔一行），並且能夠設置它的寬高，以前全部對於框模型的應用適用於塊框 （ block box） |

| inline | 行內框與塊框是相反的，隨着文檔的文字對行內盒設置寬高無效，設置padding, margin 和 border都會更新周圍文字的位置，可是對於周圍的的塊框不會有影響 |

| inline-block | 行內塊狀是兩種的集合不會從新另起一行但會像行內框同樣隨着周圍文字而流動，並且他可以設置寬高，而且保持了其塊特性的完整性，它不會在段落行中斷開 |

2.浮動 float（會讓元素block化）

慕課網-CSS深刻理解之float浮動(張鑫旭)
具備包裹性的其餘屬性:

display:inline-block
position:absolute/fixed/sticky
overflow:hidden/scroll

2.1 清除浮動 (clearfix hack)
2.1.1 投機取巧法
在父元素底部加上

雖然說兼容性好，可是浪費一個標籤，違反了語義化，不推薦
2.1.2 overflow + zoom法
補充知識: BFC(Block Formatting Context)
BFC:塊級格式化上下文【在css3中叫Flow Root】是一個獨立佈局環境，相鄰盒子margin垂直方向會重疊。
什麼樣的元素會爲其內容生成一個BFC呢？
浮動元素，即float:left/right
絕對定位元素，即position:absolute/fixed
塊容器，即display:table-cell/table-caption/inline-block
設置了除visible外的overflow值的塊盒子，即overflow:hidden/scroll/auto
BFC特性：

• 1 建立了BFC的元素中，子浮動元素也會參與高度計算
• 2 與浮動元素相鄰的、建立了BFC的元素，都不能與浮動元素相互覆蓋
• 3 建立了BFC的元素不會與它們的子元素margin重疊
  由於子浮動元素也會參與高度計算, 因此藉此能夠獲得如下方法:

.fix {
    overflow:hidden; zoom:1;
}

方法不錯，可是可能內容會被裁減掉。
2.1.3 after + zoom法 經過CSS來添加子元素，不修改HTML代碼 —— :after選擇符(最佳方法)

.clearfix:after {
    content: " ";  //content能夠任意發揮
    display: block;
    line-height: 0;  //height: 0也行
    clear: both;
}
.clearfix {
    zoom: 1; 
}

2.2 浮動佈局


2.3 float與流體佈局