收藏
批改狀態(tài)：合格
老師批語：
<!DOCTYPE HTML>
<html>
<head>
<title>常用四種元素的對齊方式</title>
<meta charset="UTF-8">
<style>
body{
margin:0;
padding:0;
width:800px;
height:600px;
}
div{
margin:auto;
padding:0;
}
hr,ul,span{
margin:0;
padding:0;
}
.align1{
width:400px;
height:150px;
background-color: #0388f1;
text-align:center;
line-height:150px;
}
.align2{
width:400px;
height:150px;
background-color: #a6f13b;
text-align:center;
line-height:100px;
}
.align21{
width:100px;
height:100px;
background-color: #98cddc;
position: absolute;
top:175px;
left:350px;
}
.align3{
width:400px;
}
.align31{
width:400px;
height:150px;
background-color: #b3f1c6;
text-align:center;
display:table-cell;
vertical-align: middle;
}
.align4{
width:400px;
height:150px;
background-color: #49ecf1;
text-align: center;
display:table-cell;
vertical-align: middle;
}
.align4 li{
font-size:30px;
list-style: none;
padding:5px;
display:inline;
}
.align4 a{
text-decoration:none;
}
</style>
</head>
<body><div>
<hr>
<div class="align1"><a href="http://ipnx.cn">PHP學(xué)習(xí)網(wǎng)</a></div>
<hr>
<div class="align2">
<div class="align21">PHP學(xué)習(xí)網(wǎng)</div></div>
<hr>
<div class="align3">
<div class="align31">
<span>PHP學(xué)習(xí)網(wǎng)</span><br>
<span>php.cn</span>
</div>
</div>
<hr>
<div class="align4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
<hr>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE HTML>
<html>
<head>
<title>絕對定位實(shí)現(xiàn)十字架</title>
<meta charset="UTF-8">
<style>
body{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
}
.box1{
width:100px;
height:100px;
background-color: #0388f1;
position:absolute;
top:0;
left:100px;
}
.box2{
width:100px;
height:100px;
background-color: #51534d;
position:absolute;
top:100px;
left:0px;
}
.box3{
width:100px;
height:100px;
background-color: #3fdc4b;
position:absolute;
top:100px;
left:200px;
}
.box4{
width:100px;
height:100px;
background-color: #98cddc;
position:absolute;
top:200px;
left:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
總結(jié)：
內(nèi)容區(qū)content
邊框 border
內(nèi)邊距padding
外邊距margin
邊框的兩種寫法一樣:
border-top-width:5px;
border-top-style:solid;
border-top-color:red;
border-right:10px solid green;
文檔流是元素的排列方式，總是水平排列
外邊距在垂直方向上會發(fā)生塌陷，以大數(shù)值為準(zhǔn)
多個(gè)盒子的外邊距重疊是不合計(jì)的，以大的為準(zhǔn)
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號