收藏
批改狀態(tài)：合格
老師批語(yǔ)：作業(yè)很認(rèn)真, 代碼寫(xiě)得也規(guī)范
1、默寫(xiě)盒模型的全部屬性,并準(zhǔn)確說(shuō)出他們的應(yīng)用場(chǎng)景
盒模型的六個(gè)常用屬性：寬、高、背景、內(nèi)外邊距和邊框稱為盒模型六大要素。
width：寬度，設(shè)置內(nèi)容的寬
height：高度，設(shè)置內(nèi)容的高
background：背景，可以設(shè)置盒子的背景顏色以及背景圖片。background-color,background-image
padding：內(nèi)邊距(透明的)，盒子里的內(nèi)容和邊框之間的距離。
具有方向性，分為padding-top,padding-right,padding-bottom,padding-left
margin：外邊距，盒子的邊界和周?chē)刂g的距離。
同樣具有方向性，分為margin-top,margin-right,margin-bottom,margin-left
border：盒子的邊框，同樣分為border-top,border-right,border-bottom,border-left。每條邊包括的屬性有顏色寬度和線條樣式。
2、`box-sizing`: 解決了什么問(wèn)題, 不用它應(yīng)該如何處理
box-sizing解決了盒子本身的大小總被添加的內(nèi)邊距和邊框撐大的問(wèn)題，不用box-sizing應(yīng)手動(dòng)計(jì)算上下和左右占據(jù)的部分的像素大小，并把盒子的自身高度減去它們。
box-sizing = content+padding+border
3、盒子外邊距之的合并是怎么回事,并實(shí)例演示
盒子的總外邊距是取垂直平級(jí)的最大的外邊距，也就是說(shuō)上面的盒子設(shè)置下外邊距為20，下面的盒子設(shè)置上外邊距為50，那么這兩個(gè)盒子之間就會(huì)取50作為外邊距，而不是70，這種現(xiàn)象又叫外邊距塌陷。
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css盒模型</title> <link rel="stylesheet" href="static/css/style1.css"> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
.box1{
width: 150px;
height: 150px;
background-color: #ccc;
margin-bottom: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color: #999;
margin-top: 30px;
}展示
4、嵌套盒子之間內(nèi)邊距與外邊距的表現(xiàn)有何不同, 如何處理
嵌套盒子的外邊距會(huì)發(fā)生傳遞效應(yīng)，給子盒子設(shè)置的外邊距會(huì)傳遞到父盒子上面。處理：給父盒子添加內(nèi)邊距來(lái)使子盒子達(dá)到添加外邊距的效果。
子盒子可以設(shè)置margin:auto來(lái)實(shí)現(xiàn)在父盒子中的居中效果。
<div class="box3"> <div class="box4"></div> </div>
.box3{
box-sizing: border-box;
background-color: lightgrey;
padding: 20px;
}
.box4{
width: 200px;
height: 200px;
background-color: lightblue;
}展示
居中
.box4{
width: 500px;
height: 200px;
background-color: lightblue;
margin:auto;
}展示
5、實(shí)例演示: 背景顏色的線性漸變的
線性漸變
.box5{
box-sizing: border-box;
width: 300px;
height: 300px;
border:1px solid;
/*上下*/
background: linear-gradient(lightblue,white);
/*向右*/
background: linear-gradient(to right,lightblue,white);
/*向左*/
background: linear-gradient(to left,lightblue,white);
/*向右下*/
background: linear-gradient(to right bottom,lightblue,white);
/*向左下*/
background: linear-gradient(to left bottom,lightblue,white);
}圖示
6、實(shí)例演示: 背景圖片的大小與位置的設(shè)定
.box6{
box-sizing: border-box;
width: 450px;
height: 350px;
border:1px solid;
background-image: url("../images/dog.jpg");
background-repeat: no-repeat;
background-position: center;
/*等比例拉伸，部分圖片被裁切*/
background-size:cover;
/*內(nèi)容填充*/
background-size:contain;
}展示
手抄代碼：
總結(jié)：經(jīng)過(guò)對(duì)元素屬性的學(xué)習(xí)，以及它們的一些特性的學(xué)習(xí)，掌握一些小技巧，通過(guò)老師講解讓本來(lái)看似令人頭疼的盒子邊距問(wèn)題變的簡(jiǎn)單易懂了。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)