計算盒子模型的尺寸、display屬性、塊級和內聯元素、浮動、overfloat
計算盒子模型的尺寸
盒子實際高度=上下外邊距+上下邊框+上下內邊距+內容高度
盒子實際寬度=左右外邊距+左右邊框+左右內邊距+內容寬度
box-sizing屬性
content-box
盒子的實際寬度和高度僅應用於元素內容,不包括內邊距和邊框
border-box
盒子的實際高度和段杜包括元素內容、邊框和內邊距
問題:求“馬”所在div的寬度
樣式: .class1{
Width:200px;
Height:300px;
Border:5px;
}
<div class=”class1”><img src=”image/1.jpg” ></div>
注意:1、這裡的200px不是指馬的寬度,而是這個div,所以寬度為200+5*2=210px
2、 .class1{
box-sizing:content-box; 谷歌瀏覽器可以這樣寫,但其他瀏覽器要加字首
padding:20px;
}
.class2{
Padding:20px;
}
.class3{
box-sizing:border-box;
padding:20px;
}
上面樣式1和樣式2效果一樣,說明box-sizing是加padding的。它會使包容它的那個塊邊大。
而樣式3會使包容它的那個塊小一點
3、.class4{
Width:300px;
Border:5px;
}
<div class=”class4”>
<img src=”image/2.jpg”>
</div>
說明:在div中放入一張圖片,求這個div的寬度?300px+5*2=310px
若在樣式中新增”padding:20px;”則這個div
若在樣式中再新增”box-sizing:content-box;”寬度為:300+5*2+20*2=350px會把div撐寬
若在樣式中再新增“box-sizing:border-box;”寬度為300px,在內容中縮小,所以比原本div寬要小,導致那張圖片的寬度會被擠小點(圖片寬度為:300-5*2-20*2=250px)
結論:
應用:製作京東快報
display屬性
技能目標
會使用float屬性佈局網頁並定位網頁元素
會使用clear屬性清除浮動
會使用overflow進行溢位處理
塊級元素 <div> <p> 獨佔一行,可以設定寬高
內聯(行內)元素 <a> <img> <span> 內容是多少,寬度就是多少,並不會獨佔一行
設定寬高但不起作用,設定padding、margin也不起作用
塊級元素和內聯元素能否互相轉換呢?使用display
標準文件流的組成
塊級元素
<h1>...<h6>、<p>、<div>、列表
內聯(行內)元素
<span>、<a>、<img/>、<strong>...
display屬性
控制元素的顯示和隱藏
塊級元素與行內元素的轉變
值 說明
none 設定元素不會被顯示
inline 元素會被顯示為內聯元素
block 元素會被顯示為塊級元素
inline-block 行內塊元素 讓內聯元素擁有塊級元素的特點(寬高,padding,margin的效果)
Display=none 一般用於網上購物時,比如滑鼠移動到購物車有你購買的商品顯示,移走就被隱藏了
Div,span{
Width:100px;
Height:100px
Border:1px red soild;
}
.class1{
Display:inline 加了這句會導致這個div塊級元素變為內聯元素,
} 因此特性:不會獨佔一行、設定寬高不起作用
<div class="class1">這是一個div塊級元素</div>
<span class=”class2”>這是一個內聯元素span</span>
將塊級元素設定為內聯元素加display:inline;
將內聯元素設定為塊級元素加display:block;
要想一個內聯元素寬高起作用,則加display:inline-block;
.class1{
Display:inline-block;
}
<span class=”class1”>行內塊元素</span>
<span>內聯元素</span>
這裡網頁效果是”行內塊元素”和”內聯元素”是佔一行的,說明行內塊元素原本是內聯元素,但是他能設定寬高。
應用:京東頂部的導航條
1、導航條用<ul><li>..</li><ul>製作,但是呈現豎直,要想變為水平則樣式中ul li{display:inline-block} 為什麼而不是inline,以為導航名之間要設定內邊距,效果更好看
2、盒子模型對行內元素不起作用
總結:先判斷元素是行內元素還是塊元素,要使它起作用是否要使它變為行內元素還是塊元素
常見的網頁佈局 上為導航,中為內容,下為版權
上下結構
上中下結構
上左右下結構:1-2-1結構 內容分左右部分
上左中右下結構:1-3-1結構
浮動 -float屬性(可以檢視京東導航條,列表項所在的div樣式)
屬性值 說明
left 元素向左浮動
right 元素向右浮動
none 預設值,元素不浮動
當我讓元素浮動起來,停止浮動的條件:如果浮動元素遇到父容器的邊,它就會停止。遇到前一個浮動元素也會停止
clear屬性
屬性值 說明
left 在左側不允許浮動元素
right 在右側不允許浮動元素
both 在左右兩側不允許浮動元素
none 預設值。允許浮動元素出現在兩側
一個div裡面有幾個div,父元素包含幾個子元素,如何讓父容器隨子元素的高度自適應?
因為浮動的原因,脫離了文件流,父元素起不了包裹的作用,而父容器還老實巴交在文件流待著,兩者的層級不一樣。
方法一:在父容器中新增一個空的div。樣式為:clear:both,讓父元素和子元素拉到一個層級
方法二:給父容器填加一個樣式。樣式為:overfloat:hidden;
兩種擴充套件盒子高度的區別
使用overflow屬性擴充套件盒子高度減少程式碼量,也減少了空的HTML標籤,使程式碼更加簡潔,清晰,從而提高了程式碼的可讀性和網頁效能
如果頁面中有定位元素,並且元素超出了父級的範圍,就必須使用clear屬性來清除浮動來擴充套件盒子高度
Overflow是對父容器的內容溢位了怎麼處理