首先介紹一下什么是盒子模型
1 邊框樣式
dashed（虛線）| dotted (點(diǎn)線) | solid (實(shí)線)
2 顏色 border-color:#888;//前面的井號不要忘掉。
3 寬度 thin | medium | thick（但不是很常用），最常還是用象素（px）。
如果有想為 p 標(biāo)簽單獨(dú)設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式怎么辦呢？css 樣式中允許只為一個方向的邊框設(shè)置樣式：
設(shè)置單個方向的邊框
border-top:1px solid red;
border-bottom:1px solid
border-right:1px solid red;
border-left:1px solid red;
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
4 填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
5邊界
元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上、右、下、左。如下代碼：
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
Display: 有三個屬性 flex table block
1 Flex: // 其內(nèi)元素變?yōu)閮?nèi)聯(lián)元素 默認(rèn)橫向排列 //當(dāng)然可以控制方向 用方向?qū)傩裕篺lex-direction:
2 table : //在寬高定的情況下 內(nèi)容保持在最中間位置
3 block: //其內(nèi)元素變?yōu)?塊狀元素 獨(dú)自占一行
注意：如果元素不是 flex 彈性盒對象的元素，則 flex-direction 屬性不起作用。
flex-direction:
1 ?row ?默認(rèn)值。靈活的項(xiàng)目將水平顯示，正如一個行一樣。
![]()
圖像 2019-3-29，下午2.52.jpg
2?row-reverse ? ??與 row 相同，但是以相反的順序。?
![]()
圖像 2019-3-29，下午2.53.jpg
3 ?column ? ?靈活的項(xiàng)目將垂直顯示，正如一個列一樣。
![]()
圖像 2019-3-29，下午2.53.jpg
4?column-reverse ?與 column 相同，但是以相反的順序
![]()
圖像 2019-3-29，下午2.54.jpg
align-items：
align-items 屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對齊方式1?stretch ? ? ? ?默認(rèn)值。元素被拉伸以適應(yīng)容器?
![]()
圖像 2019-3-29，下午2.55.jpg
2?center ? ? ?元素位于容器的中心。 ??
![]()
圖像 2019-3-29，下午2.55.jpg
3?flex-start ? ??元素位于容器的開頭。
4 ?flex-end ? ? ?元素位于容器的結(jié)尾。
![]()
圖像 2019-3-29，下午2.56.jpg
5 ?baseline ? ??元素位于容器的基線上6 ?initial ? ? ?
justify-content：
默認(rèn)值justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。提示：使用 align-content 屬性對齊交叉軸上的各項(xiàng)（垂直）1 ?flex-start ?默認(rèn)值。項(xiàng)目位于容器的開頭 ? ?
![]()
圖像 2019-3-29，下午2.56.jpg
2 ?flex-end ? ?項(xiàng)目位于容器的結(jié)尾
![]()
圖像 2019-3-29，下午2.57.jpg
3 ?center ? ? ? ?項(xiàng)目位于容器的中心。
![]()
圖像 2019-3-29，下午2.58.jpg
4 ?space-between ??項(xiàng)目位于各行之間留有空白的容器內(nèi)
![]()
圖像 2019-3-29，下午2.58.jpg
5 ?space-around ? ?項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)
![]()
圖像 2019-3-29，下午2.59.jpg
6 ??initial ? ?默認(rèn)值
CSS 布局模型在網(wǎng)頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）定義和用法
overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。 界面是否滑動
1?visible ?默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外
2?hidden ??內(nèi)容會被修剪，并且其余內(nèi)容是不可見的
3?scroll ??內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
4?auto ??如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
5?inherit ??規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
1 流動模型流動布局模型具有2個比較典型的特征：
第一點(diǎn)：塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個塊狀元素標(biāo)簽(div，h1，p)寬度顯示為100%。
第二點(diǎn)：在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
2 浮動模型塊狀元素這么霸道都是獨(dú)占一行默認(rèn)情況下是不能浮動的，但可以用 CSS 定義為浮動，
如 div、p、table、img 等元素都可以被定義為浮動。如下代碼可以實(shí)現(xiàn)兩個 div 元素一行顯示。div{??? width:200px;??? height:200px;??? border:2px red solid;??? float:left;}<div id="div1"></div><div id="div2"></div>3 層模型1、絕對定位(position: absolute)2、相對定位(position: relative)
3、固定定位(position: fixed)
絕對定位：
(如果想為元素設(shè)置層模型中的絕對定位，需要設(shè)置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。)div{??? width:200px;??? height:200px;??? border:2px red solid;??? position:absolute;??? left:100px;??? top:50px;}<div id="div1"></div>
相對定位：
（如果想為元素設(shè)置層模型中的相對定位，需要設(shè)置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。）#div1{??? width:200px;??? height:200px;??? border:2px red solid;??? position:relative;??? left:100px;??? top:50px;}<div id="div1"></div>
固定定位：
（fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。以下代碼可以實(shí)現(xiàn)相對于瀏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。）#div1{??? width:200px;??? height:200px;??? border:2px red solid;??? position:fixed;??? left:100px;??? top:50px;}relative 與 absolute 組合使用
1、參照定位的元素必須是相對定位元素的前輩元素：
<div id="box1">??? <div id="box2">相對參照元素進(jìn)行定位</div></div>從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;
box1{??? width:200px;??? height:200px;?? position:relative; ??????
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進(jìn)行偏移定位.
box2{??? position:absolute;??? top:20px;??? left:30px;???????? }這樣box2就可以相對于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）。
