
批改狀態(tài):合格
老師批語:寫的很不錯(cuò),很認(rèn)真,繼續(xù)加油!
margin
:包含 margin-top,margin-left,margin-right,margin-bottom ;
border
:可以定義邊框?qū)挾?、邊框線樣式、顏色、形狀等;
padding
:包含 padding-top,padding-left,padding-right,padding-bottom ;
在html代碼中是這樣定義的:
<style>
div {
width: 100px;
height: 100px;
/* 設(shè)置4周外邊距為20px, margin: 20px 20px 20px 20px;的簡寫*/
margin: 20px;
/* 設(shè)置邊框?yàn)?px,實(shí)線,黑色 */
border: 2px solid black;
/* 設(shè)置4周內(nèi)邊距為10px, padding: 10px 10px 10px 10px;的簡寫*/
padding: 10px;
background-color: lightblue;
}
</style>
<body>
<div>
盒子
</div>
</body>
運(yùn)行效果示意:
我們來看一個(gè)盒子模型示意:
其中:
width = 100px
margin = 20px
border = 2px
padding = 10px
如果增加padding或者border 的值,那么盒子大小會(huì)隨之改變;
這樣會(huì)影響頁面布局,那么不想讓盒子大小隨屬性變化而變化則需要給盒子樣式增加一個(gè)屬性:
box-sizing: border-box;
重新計(jì)算盒子大小,以邊框?yàn)闇?zhǔn),布局中會(huì)經(jīng)常用到這個(gè)屬性。
* {margin: 0;padding: 0;box-sizing: border-box;}
我們可以利用定位和視口實(shí)現(xiàn)子元素在父元素中的垂直居中
例如:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小剛開發(fā)日志:塊元素垂直居中</title>
</head>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
/* 水平居中 */
margin: auto;
/* 設(shè)置父元素為定位參照 */
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
/* 左右居中 */
margin: auto;
/* 參照父元素調(diào)整位置 */
position: absolute;
/* 設(shè)置視口:從父元素的左上頂點(diǎn)到右下頂點(diǎn) */
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<body>
<div class="box1">
box1
<div class="box2">box2</div>
</div>
</body>
</html>
運(yùn)行效果:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightcoral;
padding: 10px;
margin: 20px;
border: 2px solid black;
background-clip: content-box;
}
</style>
<body>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
<div id="box" class="box"></div>
</body>
<script>
const box = document.querySelector("#box");
// clientWidth = width + 左右padding
console.log(box.clientWidth);
// clientHeight = height + 上下padding
console.log(box.clientHeight);
// 當(dāng)前視口寬度
console.log(document.documentElement.clientWidth);
// 當(dāng)前視口高度
console.log(document.documentElement.clientHeight);
// offsetWidth = width + 左右padding + 左右boder
console.log(box.offsetWidth);
// offsetHeight = height + 上下padding + 上下boder
console.log(box.offsetHeight);
// 獲取定位父級(jí)
console.log(box.offsetParent);
// 距離定位父級(jí)頂部距離
console.log(box.offsetTop);
// scrollWidth:獲取指定標(biāo)簽內(nèi)容層的真實(shí)寬度(可視區(qū)域?qū)挾?被隱藏區(qū)域?qū)挾龋?/span>
console.log(box.scrollWidth);
// scrollHeight:獲取指定標(biāo)簽內(nèi)容層的真實(shí)高度(可視區(qū)域高度+被隱藏區(qū)域高度)
console.log(box.scrollHeight);
// scrollTop:內(nèi)容層頂部 到 可視區(qū)域頂部的距離
console.log(box.scrollTop);
</script>
</html>
運(yùn)行結(jié)果
代碼如下
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小剛的日志:小動(dòng)畫</title>
</head>
<style>
button {
width: 50px;
height: 30px;
}
.box {
width: 200px;
height: 300px;
position: absolute;
top: 50px;
left: 20px;
}
.box img {
width: 100%;
}
</style>
<body>
<div class="box"><img src="img.png" alt="刀劍神域" /></div>
<button>go</button>
<button>stop</button>
</body>
<script>
const img = document.querySelector(".box");
const imggo = document.querySelector("button:first-of-type");
const imgstop = document.querySelector("button:last-of-type");
// 監(jiān)聽事件
imggo.addEventListener("click", go);
imgstop.addEventListener("click", stop);
// 動(dòng)畫開始及停止方法
let timer = null;
function go() {
console.log(img.offsetLeft);
timer = setInterval(function () {
img.style.left = img.offsetLeft + 10 + "px";
img.style.top = img.offsetTop + 10 + "px";
}, 200);
}
function stop() {
clearInterval(timer);
}
</script>
</html>
運(yùn)行效果
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)