css盒子模型详解
目錄
一，什么是盒子模型？? ?
二，盒子模型內容context部分詳解
1，內容context部分的大小如何確定？
2，如何手動修改內容context的大小？
三，盒子模型內邊距padding部分詳解
1，什么是內邊距padding？
2，padding單邊屬性
3，padding簡寫屬性
4，padding注意事項
四，盒子模型邊框border部分詳解
1，邊框border樣式
2，邊框border寬度
3，邊框border顏色
4，邊框border單獨各邊屬性
5，邊框border屬性簡寫
6，邊框border的巧用
7，border圓角效果
五，盒子模型外邊距margin部分詳解
1，margin的作用
2，margin各邊屬性
3，margin簡寫屬性
4，margin需要注意的問題
5，使用margin屬性實現下面的實例
六，怪異盒子模型
1，什么是怪異盒子模型？
七，彈性盒子模型
1，什么是彈性盒子模型？
2，如何開啟彈性盒模型？? ? ?
3，如何對彈性容器里面的子元素進行布局？
4，彈性容器內的元素水平的對齊方式？
5，彈性容器內的元素垂直的對齊方式？
6，彈性容器內子元素的屬性？
八，瀏覽器內核的簡寫
一，什么是盒子模型？? ?
????????css的盒子模型，英文名為box model，屬于直譯翻譯。而實際上，這個叫法十分貼切，因為html頁面中的各種元素標簽就像一個個盒子一樣堆在一起，類似于生活中快遞店鋪里面堆成一座小山的快遞。
????????所以，盒子模型是指：html中的各個元素都類似一個一個的盒子里面的物品，但是卻叫做css盒模型，是因為css盒模型像一個盒子，把各種html元素包起來，將html元素進行封裝，以便于網頁布局與排版。下圖就是一個盒子模型的示意圖：
????????1，上面圖中藍色方框指的是html元素，也是內容部分context，可以是一張圖片、一個h1標題、一個表格、一個表單等。但是他的大小并不一定是100×100，而是可以修改的。屬性width和height用于修改內容部分的大小。
????????2，綠色部分，也就是padding部分，指的是內邊距，是元素內容與其最近一層束縛框的距離，類似于在一個方格里寫字我們寫在方格的中間，而與邊框保持一定距離一樣。
????????3，淺橘色部分，也就是border部分，指的是這個邊框的寬度，我們常見的就是寬度為1，也就是一條線。
? ? ? ? 4，深橘色部分，也就是margin部分，也叫邊緣部分，類似于人與人之間保持一定的距離一樣，他的作用是保證html元素之間的距離，比如網頁上的兩種圖片需要保持一定的間距才顯得好看。
????????5，padding，border，margin實際上是每個html元素都存在的css屬性。他們可以對元素的上下左右四個方向進行限制。
? ? ? ? 6，當存在盒子里嵌套盒子時，也就是html的標簽嵌套時，里面的元素默認以左上角作為停靠點。
? ? ? ? 7，盒子模型可用簡記為：4個矩形套娃。
<body><h1 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">標題1</h1><h1 style="padding: 10px;border: 5px solid blue; width: 10%;margin: 50px;background-color: aqua;">標題2</h1> </body>? ? ? ? 網頁顯示如下：
二，盒子模型內容context部分詳解
1，內容context部分的大小如何確定？
? ? ? ? 通常由內容大小自動確定，也是默認的方法。例如<img>標簽引入一張圖像，那么圖像盒子的內容context部分的大小就是圖片的像素大小。
2，如何手動修改內容context的大小？
? ? ? ? 使用css屬性width和height來確定長度和高度。假如不設置width，一些塊級元素會自動占一行，也就是100%的屏幕寬度。 行內元素不受width和height屬性的影響，只受元素內容的影響，由元素內容將內容部分的矩形撐開。width和height屬性的單位有：px和%，px指的是像素，%指的是占html整體容器的寬度的百分比。
? ? ? ? 示意圖如下：
三，盒子模型內邊距padding部分詳解
1，什么是內邊距padding？
? ? ? ? 元素內容距離盒子邊框的距離就是內邊距，他并不是上下左右的大小相等。css盒模型在元素基礎上多了border和margin屬性，目的是便于布局，讓網頁好看。padding屬性是一個整體概念，統管上下左右四個方向，細致地分還有：padding-top，padding-left等，使用-隔開而不是下劃線_隔開。單位是：px(使用頻率最高)和%占比。
2，padding單邊屬性
? ? ? ? 如下圖：
3，padding簡寫屬性
4，padding注意事項
? ? ? ? padding會撐大容器，也就是盒子。
四，盒子模型邊框border部分詳解
1，邊框border樣式
<p style="border-style: dotted;">么么噠</p>? ? ? ? 網頁顯示如下：?
2，邊框border寬度
? ? ? ? 使用border-width設置，單位是px。
<p style="border-width: 5px;">么么噠</p>3，邊框border顏色
????????使用border-color設置，需要在border-style設置后才能生效，否則為空白。
4，邊框border單獨各邊屬性
5，邊框border屬性簡寫
1，在border屬性里面寫，按順序寫且用空格隔開(最常用)
2，在border-style里面寫，按照屬性個數決定影響到的方向(基本不用)
6，邊框border的巧用
? ? ? ? 利用border屬性實現下面網頁部分。
<p style="border-left: 5px blue solid;padding-left: 10px;">國內圖片</p>7，border圓角效果
? ? ? ? 使用屬性border-radius實現。
五，盒子模型外邊距margin部分詳解
1，margin的作用
? ? ? ? margin的作用就是是盒子之間的保持間隙，讓網頁更加美觀。margin也是css屬性，統管上下左右四個方法。但是還可以細致地分為margin-top等。margin的取值有：auto，像素px，占比%。例如：margin：0 auto表示上下距離為0，左右距離自動選擇(居中，將剩余部分平分)。
2，margin各邊屬性
3，margin簡寫屬性
4，margin需要注意的問題
? ? ? ? 主要是外邊距合并問題，即垂直方向外邊距相撞時，取較大值。也就是盒子上下放的時候，上面盒子的margin為100px，下面盒子的margin為50px，那么兩個盒子之間的margin取100px。水平方向并沒有這個問題存在。
5，使用margin屬性實現下面的實例
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div-out {width: 1240px;background-color: crimson;margin: 0 auto;}.div-out>div {width: 303px;height: 375px;background-color: red;float: left;/*實現垂直方法布局轉換為水平方向布局*/margin-top: 10px;margin-right: 9px;}.div-out>div:nth-child(4n)/* 當元素為4的倍數時生效樣式*/{margin-right: 0;}</style> </head><body><div class="div-out"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> </body>六，怪異盒子模型
1，什么是怪異盒子模型？
? ? ? ? 怪異盒子模型也叫IE盒模型。他與標準盒子模型的區別就是：元素內容的width和height的范圍不同。怪異盒子模型的width和height包括border和padding的寬度。
? ? ? ? 使用屬性：box-sizing = border-box 來創建一個怪異盒模型。而box-sizing = context-box是標準盒模型。怪異盒模型中的內容元素并不會把容器撐大，他會自動調節內容元素的大小以保持整體性。
? ? ? ? 一般在：豎屏模式下采用怪異盒模型。
七，彈性盒子模型
1，什么是彈性盒子模型？
? ? ? ? 彈性盒子模型(flex model)是css3的新特性，也就是相對于舊版本新加的功能，是一種新的布局模式。css3的這個新特性對移動端也就是手機更加友好，能夠使用各種手機不同的分辨率。flex model會根據設備屏幕分辨率自動調整各個容納元素的各個容器的大小，以保證顯示在手機屏幕上。向我們在手機上和電腦上打開同一個網頁時，所顯示的頁面都不同。
? ? ? ? 總結就是：使用div+css布局的網頁，使用flex model時，他會在不同的設備上智能地調節div即各種容器的布局的大小，以使頁面更好看。
2，如何開啟彈性盒模型？? ? ?
????????彈性盒子模型包括：彈性容器和彈性子元素。為父容器也就是彈性容器設置屬性display：flex就可以聲明該父容器為一個彈性盒子，它里面的各種元素會自動布局。開啟flex模式后，所有元素都會默認橫著擺放，即使是塊級元素也會橫著放。
3，如何對彈性容器里面的子元素進行布局？
? ? ? ? 使用屬性：flex-direction即可。
4，彈性容器內的元素水平的對齊方式？
? ? ? ? 使用justif-context屬性實現子元素的水平對齊方式，也就是左對齊，居中，右對齊等。
5，彈性容器內的元素垂直的對齊方式？
6，彈性容器內子元素的屬性？
? ? ? ? 彈性容器內的元素變為彈性子元素之后，新增了flex-grow屬性。這個屬性確定每個子元素的權重，他的重要權比width屬性高，從而使width屬性失效。每個子元素的范圍按照其所占總的grow的比例進行確定。
八，瀏覽器內核的簡寫
? ? ? ? 為了確保css3的新特性兼容各個瀏覽器內核，需要加上修飾符前綴。但css3出來很久了，目前都不需要管這些了。
?
總結
- 上一篇： 一个Linux病毒艰辛短暂的一生
- 下一篇： 你是许三多还是成才？－－《士兵突击》观后