HTML基礎-03

盒子模型

---

 

盒子模型（框模型 box model）

　　- 瀏覽器在渲染頁面時，它會將頁面中的每個元素都想象成是一個矩形的盒子。

　　- 想象成盒子之後，對於頁面的佈局就變成了如何擺放盒子

　　- 每個盒子從內到外都有如下幾個部分組成

內容區（content）：內容區決定這個盒子能裝多少東西（子元素）

內邊距（padding）：內容區和邊框之間的距離

邊框（border）：盒子的邊框，邊框，是盒子的邊界，出了邊框就是盒子外部的

外邊距（margin）：盒子距離其餘盒子的距離

 邊框（border）

邊框相關的三個樣式

　　border-color 邊框的顏色    border-color：#00ffcc;

　　border-style 邊框的樣式     border-style：dashed;

　　border-width 邊框的寬度    border-width：30px;

邊框會影響到盒子的可見框大小

border-width表示邊框的寬度

　　- 能夠經過該屬性分別制定邊框四個方向的寬度

　　border-width: 10px 20px 30px 40px;

　　若是指定了四個寬度，則會分別設置上右下左四個方向的邊框的寬度

　　border-width: 10px 20px 30px;

　　三個值：上 左右 下

　　border-width: 10px 20px;

　　兩個值：上下 左右

　　border-width: 10px;

　　一個值：上下左右

border-color邊框的顏色，能夠分別指定四個邊的顏色，規則和border-width同樣。

　　border-color: red orange blue aqua; 上右下左----順時針旋轉

　　border-color: silver;

border-style 指定邊框的樣式

　　solid 實線

　　dotted 點狀虛線

　　dashed 虛線

　　double 雙線

　　border-style: solid dotted dashed double;------順時針旋轉

　　border-style: solid dotted dashed ;--------------上左右下

　　border-style: solid dotted;------------------------上下左右

　　border-right: yellow solid ;

邊框（border）

　　不指定寬度，默認寬度 通常3px

　　不指定顏色，默認使用字體顏色-隨字體顏色變

　　邊框可同時設置四個方向邊框的寬度、顏色、樣式，而且沒有順序要求

border:red 10px solid

　　除了border還有四個

　　border-top 上   border-right 右  border-bottom 下  border-left 左

 

內邊距（padding）邊框和內容區之間的距離叫作內邊距

　　盒子的可見框大小由內容區，內邊距和邊框共同決定

　　四個方向的內邊距

　　padding-top 上  padding-right 右  padding-bottom下  padding-left 左

 　  經過padding來同時設置四個方向的內邊距，規則和border-width同樣

　　padding: 10px 20px 30px 40px;

　　padding: 10px 20px 30px ;

　　padding: 10px 20px  ;

　　padding: 10px   ;

 

外邊框（margin）

　　當前盒子和其餘盒子之間的距離，外邊距不會影響盒子的可見框的大小，可是外邊距會影響到盒子實際佔地的大小，影響盒子的位置。

　　四個方向的外邊距：

　　　　margin-top  margin-right  margin-bottom  margin-left

　　因爲在瀏覽器中默認狀況下，元素是靠左靠上排列的，因此設置上左外邊距時，會移動元素自身，而設置下和右外邊距時，會移動其餘元素

　　外邊距能夠是負值，若是是負值則元素會向相反方向移動    margin-top: -50px;

　　同時設置四個方向的外邊距margin: 10px 20px 30px 40px;

水平方向佈局

　　子元素在父元素的位置是父元素的內容區

　　子元素在父元素中的水平方向的佈局，必須知足以下等式

　　margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width（7個值和[自動補全]=父元素的寬度）

 

　　在水平方向，有三個值能夠設置auto

　　　　分別是 margin-left width margin-right

　　設置爲auto之後，瀏覽器會自動計算該屬性的值

　　　　- 若七個值和相加不等於父元素寬度，則屬於過分約束，則瀏覽器會自動調整右外邊距的值

　　　　- 若是將margin-left 或 margin-right 的一側設置爲auto，則另外一側會設置儘可能大的值

　　　　- 若left和right都設置auto，則會將兩側外邊距設置相等的值，致使子元素在父元素中水平居中

垂直方向佈局：（簡單）

　　margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom=父元素高度

　　box1>box2:

　　width設置auto時，子元素會佔滿父元素

　　height設置auto時，父元素的高度由子元素內容決定

 

1. 當父元素寫死時，子元素的高度高於父元素時，會溢出，溢出的子元素不會影響頁面佈局。

　　使用 overflow 來設置溢出內容的處理方式：

　　　　可選值：

　　　　visible，默認值 溢出內容不會被裁剪直接在父元素外部顯示

　　　　hidden，溢出的內容會被裁剪，超過父元素的不會顯示

　　　　scroll，生成滾動條，能夠經過滾動條查看完整內容，滾動條一直在

　　　　auto，根據須要生成滾動條

 

2. 兄弟元素的外邊距的摺疊（margin）

.box1{

height:100px;

Width:100px;

Margin-bottom:100px;

}

.box2{

height:100px;

Width:100px;

Margin-top:100px;

}

　　外邊距的摺疊，垂直方向相鄰的外邊距，會發生外邊距摺疊現象。

　　兄弟元素間的相鄰外邊距，會去兩個外邊距間的最大值（正值）；若是是負值，取絕對值較大的。

　　兩個外邊距：相鄰的外邊距，誰大用誰的距離

　　一正一負：取兩個值的和

 

3. 父子元素的外邊距摺疊

　　父子元素的相鄰垂直外邊距，子元素的外邊距會傳遞給父元素

.box1{

width:200px;

heigth:300px;

background-color:#bfa;

border-top:1px red solid;

}

.box2{

width:200px;

heigth:300px;

background-color:orange;

margin-top:100px;

}

 

4. 文檔流（常規流、標準流）

　　-文檔流是網頁中的一個位置，默認狀況下頁面中的全部元素都在文檔流中排列

　　-塊元素在文檔流中的特色

1. 自上向下進行排列（獨佔一行）
2. 默認寬度和元素同樣
3. 默認高度被內容撐開

　　　　<div>   </div>

　　-行內元素在文檔流中的特色

1. 自左向右水平排列，若是一行中不足以容納全部元素則切換到下一行繼續自左向右水平排列
2. 默認高度和寬度都會被內容撐開

　　　　<span>   </span>

 

5. 行內元素的盒模型

　　內聯元素不支持設置寬度和高度<span>   </span>

　　內聯元素能夠設置padding（border），但垂直方向padding（border）不會影響頁面的佈局

　　內聯元素支持水平方向的外邊距，不支持垂直方向的

 

6. display

　　-指定元素所產生的框的類型

　　-可選值：

　　　　inline行內元素

　　　　block塊元素

　　　　inline-block行內塊元素

　　　　　　-既有行內元素的特色，不會獨佔一行；又有塊元素的特色，可設置寬高

　　　　none元素不在頁面中顯示

　　　　　　內聯元素沒法改變寬度和高度，將超連接變成塊元素，就能夠改變大小

　　　　display:block;

 

a{

width:200px;

height:200px;

background:#ofd;

dispaly:none;

}

.box1:hover a {   ////鼠標碰到鏈接時出現

display:block;///////////inline

}

 

7. visibility設置元素的顯示狀態

　　可選值：visible:默認值，元素正常顯示

　　hidden不顯示元素，但元素依舊佔據位置

　　display:none :不顯示元素，並且不佔據位置

 

8. 二級菜單

　　當鼠標移動到xxx時，顯示二級菜單

　　.outer>xxx:hover .inner{祖先與後代關係

　　　　display:block;}

 

9. 默認樣式

爲了確保網頁在沒有樣式的狀況下，也能夠瀏覽，因此瀏覽器都會爲網頁設置一些默認樣式，對開發者來講沒有任何做用，而且不一樣的瀏覽器所設置的默認樣式不一樣，開發中第一件事就是去除瀏覽器的默認樣式。

*{margin:0;

padding:0;   去掉全部邊框，外邊界}

重點：CSS權威指南---利用reset.css直接引入，能夠去除全部默認樣式，推薦

normalize.css--統一

 

10. 塊元素和行內元素通常狀況下，只會在塊中放內聯元素，不會向內聯元素放塊元素

塊元素：用於頁面的佈局            p：不能聽任何塊元素

行內元素：主要用於頁面中選中文字  a：什麼都能放，除了本身

 

11. .img-list

{height:190px;

width:470px;

background-color:#33ffss;

margin:auto;     //居中

list-style:none;   //去掉列表前面的樣式}

.img-list img{

height:100%;

width:100%;}

<ul class=’img-list’>

<li><a href=」#」><img src=」img/1.jpg」></a></li>

<li><a href=」#」><img src=」img/2.jpg」></a></li>

<li><a href=」#」><img src=」img/3.jpg」></a></li>

</ul>

 

12. 文本修飾text-decoration:none: 去除下劃線

<style>

.nav {width:190px;

height:450px;

padding:10px 0;

margin:0 auto;

list-style:none;

background-color:white;}

.nav li {height:25px;

padding-left:18px;}

.nav li:hover{

background-color:gray;}

.nav li a{

font-size:18px;

text-decoration:none;

color:#333;}

.nav li a:hover{

color:red;}

</style>

<ul class=’nav’>

<li><a href=」#」>xxx</a></li>

<li><a href=」#」>xxx</a><a href=」#」>xxx</a><a href=」#」>xxx</a></li>

<li><a href=」#」>xxx</a><a href=」#」>xxx</a><a href=」#」>xxx</a></li>

</ul>