整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
有的HTML標簽都可以看成矩形盒子,由width，height，padding，border構成，稱為盒模型。
盒子的總寬度 = width + 左右padding + 左右border
盒子的總高度 = height + 上下pading + 上下border
表示盒子內容的寬度。
width屬性的單位通常是px，也會涉及到 百分數、rem等單位。
當塊級元素（div，h系列，li 等）沒有設置width屬性的時候，它將自動撐滿，但這并不意味著width可以被繼承。
表示盒子內容的高度
height屬性的單位通常是px，也會涉及到 百分數、rem等單位
當塊級元素（div，h系列，li 等）沒有設置height屬性的時候，它將自動撐滿，但這并不意味著height可以被繼承。
padding 是盒子的那邊距，即盒子邊框內壁到內部文字（或者子元素）的距離
四個方向的padding，可以分別用小屬性進行設置
小屬性 | 意義 |
padding-top | 上padding |
padding-right | 右padding |
padding-bottom | 下padding |
padding-left | 左padding |
<!--小屬性demo-->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
padding-left: 20px;
padding-top: 30px;
padding-bottom: 40px;
padding-right: 50px;
}
</style>
<div class="box1"></div>padding 合并寫法
<!--padding合并寫法-->
<!-- 上 右 下 左-->
padding: 10px 10px 10px 10px;
<!-- 上 左右 下-->
padding: 10px 20px 10px;
<!-- 上下 左右 -->
padding: 10px 20pxmargin 是盒子的外邊距，即盒子和其他盒子間的距離。
margin 的四個方向
屬性名稱 | 解釋 |
margin-top | 上 margin，向上擴展 |
margin-right | 右margin， 向右擴展 |
margin-bottom | 下margin， 向下擴展 |
margin-left | 左margin， 向左擴展 |
兩個盒子之間的，margin 不會疊加，只以大的margin的值為準。
一些元素都有默認的margin，在開始制作網頁的時候，要清除他們，比如 body、ul、p等
實踐：盒子實現水平居中的實現方式
<!-- 主要是 auto屬性-->
.box1 {
margin: 10px auto;
}默認值為 content-box ， 此時的width和height 表示的是去除掉 邊框和內邊距后剩余的空間。
如上圖，一個盒子 默認情況下， 它留給子元素的空間就是 寬300像素，高200像素的可用面積。即 width 和 height屬性的區域。
box-sizing: border-box如果添加了 如上的屬性后，此時留給子元素的可用空間只有 寬270px 、高170px了。可用面積 面積 = (width - pading * 2 - border * 2) * (height - pading * 2 - border* 2) 。
也就是 width和height 就是 盒子的全部高度和寬度
<!--小屬性demo, 此時留給孩子的實際可用面積是 寬270px = (300px-(10px*2)-(5px*2)) 高 170px = (200px-(10px*2)-(5px*2)) 了-->
<style>
.box1 {
width: 300px;
height: 200px;
padding: 10px;
border: 5px solid red;
margin: auto;
box-sizing: border-box;
}
</style>
<div class="box1">
</div>塊級元素
行內元素
行內塊
img 是特殊的行內塊，他們既能設置寬度和高度，也能并排顯示。
行內元素和塊級元素的相互轉換
元素 | 規則 |
display:block | 將元素轉為塊級元素 |
display:inline | 將元素轉為行內元素，轉為行內元素的情況并不多見 |
display:inline-block | 將元素轉為行內塊 |
display:none | 隱藏元素，元素會把位置也放棄 |
將行內元素轉塊級元素
<!--一個將行內元素轉為塊級元素的例子-->
.clickA {
display: block;
width:200px;
height: 200px;
background-color: red;
}
<a href="#" class="clickA">我是點擊</a>隱藏元素的兩種寫法
天帶大家快速理解盒子模型，直接上代碼：
<!doctype html><html>
<head>
<meta charset="utf-8" />
<title>css盒子</title>
<meta name="keywords" content="關鍵詞,關鍵詞" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div>我的css盒子測試模型</div>
</body></html>
上面代碼沒有任何難度，只是寫了一個div標簽，大家已經知道，div標簽是塊級元素，所以會占滿一行：
但是我們也注意到了圖片的左側其實還是有一些間隙的：
這個間隙在我們預期中是不應該存在的，這種間隙基本上就是出在margin或者padding或者border上。
我們先看開發者工具的右側：
上面有一個element.style{}，下面有一個div標簽的屬性，默認display: block。上面那個是干什么用的呢？我們修改一下代碼：
<div style="border: 1px solid red">我的css盒子測試模型</div>
然后再刷新頁面看：
這下我們就知道了，這個element.style就是我們寫在代碼里的屬性。但是我們一般不會這么寫，也就是大家在寫代碼的時候把所有屬性都放到css文件中為好，不要讓這個element.style有任何內容。
下面還有一個方框：
這個框就是目前這個css盒子的具體屬性，比如寬度等信息。
也就是說一個完整的盒子模型大小是由這三個參數值共同決定的。現在我們修改代碼：
lesson4.html
<div id="mydiv">我的css盒子測試模型</div>
原代碼不變，只是給div加一個id。
index.css
*{}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff;}
然后我們刷新頁面：
下面盒子區域也會隨之變化：
我們看到內容區域大小變成了100*100，而padding、border、margin都為0，我們來修改這三個值，再看效果：
*{}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px;}
盒子大小由原來的100*100變為120*120了。
padding為內邊距，我們看到文字和邊緣有了10像素的距離：
從上面圖片看到，padding屬性也是分為上下左右的，所以這個padding其實是分為padding-left、padding-right、padding-top、padding-bottom。
如果四個方向邊距都不一樣，我們寫四個有點太累贅了，所以我們可以這樣寫：
padding: 10px 20px 30px 40px;
可以看到，四個值從左到右分別代表：上、右、下、左，也就是順時針走的邊距。只要這樣寫的方式，都是這種順時針代表的。
如果你寫
padding: 10px 20px;
就代表上下10px，左右20px。
這些大家試一下就知道了。
border代表邊框。
#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border: 10px solid red;}
border: 10px solid red;代表上下左右都是10像素、實線、紅色。如果要四個邊框不一樣就只能一個一個寫了：
#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}
增加了border以后盒子大小也會變化：
由于現在瀏覽器有可能會自動給你的代碼加上margin或者padding，我們經常在css文件中先設置一下這兩個屬性值為0：
html, body{
margin: 0px;
padding: 0px;
}
此時，我們再看一下，樣式：
lesson4.html
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Css盒子模型</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<div id="mydiv">我的css盒子測試模型</div></body></html>
index.css
*{}html, body{ margin: 0px; padding: 0px;}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}
此時，樣式就會緊貼著瀏覽器邊緣了：
有時候我們也會這樣寫：
index.css
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
#mydiv{
width: 100px;
height: 100px;
background-color: #000;
color:#fff;
padding: 10px 20px;
border-top: 10px solid #f00;
border-left: 10px solid #0f0;
border-right: 10px solid #00f;
border-bottom: 10px solid #bbb;
}
這樣一來，我們盒子模型的大小就會隨著瀏覽器窗口的大小而自適應了。再來說一下外邊距——margin，我們修改我們的代碼為：
lesson4.html
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Css盒子模型</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<div class="mydiv">我的css盒子測試模型1</div>
<div class="mydiv">我的css盒子測試模型2</div></body></html>
index.css
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
div.mydiv{
width: 100px;
height: 100px;
background-color: #000;
color:#fff;
padding: 10px 20px;
border-top: 10px solid #f00;
border-left: 10px solid #0f0;
border-right: 10px solid #00f;
border-bottom: 10px solid #bbb;
}
我們看一下效果：
兩個盒子分別在兩行出現，那么如果我想把這兩個盒子放到一行，我要怎么辦呢？我的第一個想法是把display屬性改為inline，但是發現改后樣式變為：
這是因為行內元素是不能修改寬和高的，這時候我們用display: inline-block就可以了：
現在又出現了另一個問題，就是大家發現上面兩個盒子中間多了一個空白的地方，而且空白地方無法選中，說實話如果你用inline-block那么中間這個間距就是默認自帶的了(如果非要去掉就要加float: left或者margin: -10;)。
現在我們盒子和瀏覽器邊緣是沒有間距的，現在我們希望它離瀏覽器有一段距離，我們加一個margin: 10px;屬性，然后再看：
我們看到它和瀏覽器之間有了邊距，我們再來看一下現在盒子的大小：
盒子現在的大小是160*140
可以看到盒子的大小是沒有計算最外層的margin屬性的也就是
160=100+202+102；140=100+102+102
所以說margin是盒子的外邊距，在盒子外面，不算做盒子大小的。
現在大家就掌握了盒子模型的所有基礎概念了。
如果對接口、性能、自動化測試、面試經驗交流等感興趣的，可以關注我的頭條號，我會不定期的發放免費的資料，這些資料都是從各個技術網站搜集、整理出來的，如果你有好的學習資料可以私聊發我，我會注明出處之后分享給大家。歡迎分享，歡迎評論，歡迎轉發。需要資料的同學可以關注小編+轉發文章+私信【測試資料】
種盒模型
我們在盒模型的屬性中提到過標準盒模型, 這是因為除了標準盒模型外, 還有在IE瀏覽器中使用的怪異盒模型。我們現在用一段代碼分別演示這兩種盒模型。
<html>
<head>
<style>
div{
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #000;
margin: 20px;
}
.content-box{
box-sizing: content-box;
}
.border-box{
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- 標準盒模型 -->
<div class="content-box">
我是content-box
</div>
<!-- 怪異盒模型 -->
<div class="border-box">
我是border-box
</div>
</body>
</html>這兩個盒子中, 使用了 box-sizing:content-box; 屬性的就是標準模式, 用了 box-sizing:border-box; 屬性的就是怪異模式。
標準盒模型, 標準盒模型這個標準是由 W3C 組織制定的, 現在除了低版本IE以外, 基本所有瀏覽器都遵循這個標準。
標準盒模型中, width 和 height 屬性所指定的寬高就是實際內容區的大小,
而盒子實際大小是： 橫向空間：width + padding寬度 + border寬度
縱向空間：height + padding寬度 + border寬度
怪異盒模型, 怪異盒模型是微軟在 IE6、7、8 中使用的一種盒模型, 所以也把怪異盒模型叫做 IE盒模型。
在怪異模式下，width 和 height 做指定的寬高就是盒子的實際寬高, 而它內容區部分的大小是在 width 或 height 指定尺寸的基礎上, 再減去 border 和 padding 所占的寬度。
頁面的加載和渲染全過程 當我們在瀏覽器里輸入一個 URL 后, 最終會呈現一個完整的網頁。
這中間會經歷如下的過程:
1 HTML 的加載
輸入 URL 后, 最先拿到的是 HTML 文件。HTML是一個網頁的基礎, 所以要在最開始的時候下載它。
HTML下載完成以后就會開始對它進行解析。
2 其他靜態資源下載
HTML 在解析的過程中, 如果發現 HTML 文本里面夾雜的一些外部的資源鏈接, 比如 CSS、JS 和圖片等時, 會立即啟用別的線程下載這些靜態資源。
這里有個特殊的是 JS 文件, 當遇到 JS 文件的時候，HTML 的解析會停下來, 等 JS 文件下載結束并且執行完, HTML 的解析工作再接著來。
這樣做是因為 JS 里可能會出現修改已經完成的解析結果, 有白白浪費資源的風險，所以 HTML 解析器干脆等 JS 折騰完了再干。
3 DOM 樹構建
在 HTML 解析的同時, 解析器會把解析完的HTML轉化成DOM 對象, 再進一步構建 DOM 樹。
4 CSSOM 樹構建
當 CSS 下載完, CSS 解析器就開始對 CSS 進行解析, 把 CSS 解析成 CSS 對象, 然后把這些 CSS 對象組裝起來, 構建出一棵 CSSOM 樹。
5 渲染樹構建
DOM 樹和 CSSOM 樹都構建完成以后, 瀏覽器會根據這兩棵樹構建出一棵渲染樹。
6 布局計算
渲染樹構建完成以后，所有元素的位置關系和需要應用的樣式就確定了。這時候瀏覽器會計算出所有元素的大小和絕對位置。
7 渲染
布局計算完成以后，瀏覽器就可以在頁面上渲染元素了。比如從 (x1, y1) 到 (x2, y2)的正方形區域渲染成藍色。經過渲染引擎的處理后，整個頁面就顯示在了屏幕上。
內聯樣式的權重是1000
ID 選擇器里樣式的權重是100
類選擇器、屬性選擇器和偽類選擇器里樣式的權重是10
標簽選擇器里樣式的權重是1
通用選擇器直接忽略
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
