css布局详解（一）——盒模型
一、網頁布局的幾種情況
今天讓我們總結一下在css布局的各種情況做一個總結，為我們以后布局網頁時做一個參考。
先看一張圖，這是去年cssConf大會時阿里的 @寒冬winter 老師放出來的：
如圖所示，css布局可以分為以下幾大塊：
- 盒子內部的布局
- 文本的布局
- 盒模型本身的布局
- 盒子之間的布局visual formatting
- 脫離正常流normal flow的盒子的布局
- absolute布局上下文下的布局
- float布局上下文下的布局
- 正常流normal flow下的盒子的布局
- BFC布局上下文下的布局
- IFC布局上下文下的布局
- FFC布局上下文下的布局
- table布局上下文下的布局
css grid布局上下文下的布局
二、盒模型（Box moudle）
- 脫離正常流normal flow的盒子的布局
1、基本框
css假定每個元素都會生成一個或多個矩形框，這稱為元素框。各元素框中心都有一個內容區(content area)。這個內容區周圍有可選的內邊距（padding）、邊框（border）、外邊距（margin）。這就是css中的盒模型。
2、包含塊
每個元素都相對于其包含塊擺放，可以這么說，包含塊就是一個元素的“布局上下文”。
包含塊由最近的塊級祖先元素、表單元格或行內塊祖先元素的內容邊界（content edge）構成。考慮下面的代碼：
在這個例子中p的包含塊是div元素，因為div是p元素最近的塊級祖先元素，類似的，div的包含塊是body。所以，p的布局依賴div的布局，而div的布局依賴body的布局。
三、塊級元素與行級元素的對比
塊級元素的解析
塊級元素特點
默認情況下，塊級元素會在其框前和框后產生“換行”，并盡可能的充滿整個容器。
元素的水平格式化
水平格式化的7大屬性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。
這7個屬性值加起來往往是包含塊width值。
負外邊距
在盒模型中，內邊距、邊框、和內容寬度（及高度）不能為負值，只有外邊距可以為負值。利用定位以及負margin可以設置盒子在頁面中的居中。
<div class="box" style="width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top:-50px;background:red;" ></div>元素的垂直格式化
類似于水平格式化，垂直格式化的7個相關屬性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，這7個屬性的總和必須等于父級元素的height屬性。
其中margin-top，margin-bottom和height可以設置成auto;
一個正常流中的塊元素的margin-top和margin-bottom設置為auto后，會被設置為0，即不能將元素垂直居中，實際上元素沒有外邊距。定位元素如果設置成auto有不同的處理結果。
如果正常流元素的height設置為auto，則其高度將會被設置為其內容元素的高度總和
垂直外邊距合并
垂直外邊距合并：當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
css代碼：
div{
width: 200px; height: 200px; background: red; }
.box1{
margin-bottom: 100px;
}
.box2{
margin-top:50px;
}
html代碼
設置值為auto
其中margin-left，width，margin-right可以設置為auto。當設置margin-left與margin-right的值為auto而width的值為特定值時，會使盒子水平居中。
當設置三個值都為auto時，瀏覽器會將margin-left與margin-right設置為0，而將width會盡可能的寬。而當設置三個值為固定值時，按css術語來講，這些格式化屬性過分受限，此時總會把margin-right強制為auto；
行級元素的解析
行內元素不會另起一行只占據它對應的標簽的邊框所包含內容的空間，只能包含數據和其他行內元素。行級元素不能設置寬高，不能設置上下margin、和padding
行內元素會生成一個內容區，類似于塊級元素的content部分，內容區的大小與字體的大小相等。內容區加上文字的上下邊距就等于行內框的高度，可以通過設置line-height的高度控制行內框的高度。行框是包含該行中行內框最高點和最低點的最小框。如下圖
替換元素
在行級元素中替換元素是一個例外，他既可以設置寬高，也可以設置margin和padding,它類似于inline-block。
行級元素與塊級元素的嵌套關系
- 行級元素嵌套行級元素
- 塊級元素嵌套塊級元素，塊級元素內嵌套行級元素。
- 少數塊級級元素不能嵌套塊級元素例如：p不能嵌套div標簽,標題標簽中最好不要嵌套div。
轉載于:https://www.cnblogs.com/liugblog/p/4965330.html
總結
以上是生活随笔為你收集整理的css布局详解（一）——盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SVG 基本绘图方法总结
- 下一篇： 第二百二十六天 how can I 坚持