收藏
批改狀態(tài)：合格
老師批語：盒子只是布局中的元素罷了, 今晚才會學(xué)到布局
一、默寫盒模型的全部屬性，并準(zhǔn)確說出他們的場景
1、content 內(nèi)容區(qū)Width： 寬度Height: 高度Background： 背景
2、padding 內(nèi)邊距 Padding-top Padding-right Padding-bottom Padding-legt
3、border 填充 Border-top Border-right Border-buttom Border-left Width style color
4、margin 外邊距Margin-topMargin-ringhtMargin-buttomMargin-left
就是利用盒子模型進行網(wǎng)站布局，如網(wǎng)站中的欄目 圖片區(qū)域、廣告位等。
二、box-sizing: 解決了什么問題，不用它應(yīng)該如何處理box-sizing
解決了盒子添加邊框和內(nèi)邊距時會撐開盒子改變大小，影響布局的問題。如果不用它應(yīng)為用如下方法解決：手工計算盒子和邊框、內(nèi)邊距的大小進行手工調(diào)整內(nèi)容區(qū)的大小。
三、盒子外邊距之間的合并時怎么回事，并實例演示
同級盒子之間，添加外邊距后，出現(xiàn)了為邊距的合并，也就外邊距的塌陷。二個盒子之間的間距，最終由較大值確定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三、 盒子外邊距之間的合并</title> <link rel="stylesheet" href="static/css/3.css"> </head> <body> <div class="box1"> <img src="static/images/1.png" alt=""> </div> <div class="box2"> <img src="static/images/2.png" alt=""> </div> </body> </html> </html>
點擊 "運行實例" 按鈕查看在線實例
.box1{
width: 300px;
height: 300px;
background-color: aqua;
}
.box2 {
width: 450px;
height: 400px;
background-color: lightcyan;
}
.box1 > img {
width: 100%;
}
.box2 > img{
width: 100%;
}
.box1 {
margin-bottom: 20px;
}
.box2{
margin-top: 30px;
}點擊 "運行實例" 按鈕查看在線實例
四、嵌套盒子之間內(nèi)邊距和外邊距的表現(xiàn)有何不同，如何處理？
子盒子的外邊距會傳遞給父盒子，通過給父盒子添加內(nèi)邊距或邊框來解決
外邊距在水平方向取值auto時，可以實現(xiàn)盒子的水平居中顯示效果。
五、實例演示：背景顏色的先性漸變的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景顏色的先性漸變的</title> <link rel="stylesheet" href="static/css/5.css"> </head> <body> <div class="box"></div> <div class="box1"></div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
.box{
width: 450px;
height: 500px;
box-sizing: border-box;
background-color: lightcyan;
border: 1px solid gray;
}
/*線性漸變,從上到下方向漸變*/
.box{
background: linear-gradient(brown,yellow,green,white);
}
.box1{
width: 500px;
height: 400px;
box-sizing: border-box;
background-color: lightcyan;
border: 1px solid gray;
}
/*!*向右漸變**/
.box1{
background: linear-gradient(to right,brown,yellow,green,white);
}點擊 "運行實例" 按鈕查看在線實例
六、實例演示：背景圖片的大小和位置的設(shè)定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景圖片的大小和位置的設(shè)定</title> <link rel="stylesheet" href="static/css/6.css"> </head> <body> <div class="box1"> </div> <div class="box2"> </div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
.box1{
width: 300px;
height: 350px;
box-sizing: border-box;
border: 10px dotted blue;
background-image: url("../images/1.png");
}
.box2{
width: 400px;
height: 500px;
box-sizing: border-box;
border: 1px solid red;
}
.box1{
/*background-size: cover;*/
/*background-position: right center;*/
background-repeat: no-repeat;
background-position: center center;
/*background-size: cover;*/
background-size: contain;
}
.box2{
background: lightblue url("../images/2.png") no-repeat center center;
}點擊 "運行實例" 按鈕查看在線實例
七、手抄作業(yè)
八、總結(jié)：
通過對盒子的學(xué)習(xí)，對css的布局有了一定的了解。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號