收藏
批改狀態(tài)：合格
老師批語：
內(nèi)外邊距：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="關(guān)鍵字">
<meta name="Description" content="描述">
<title>內(nèi)外邊距</title>
<style>
*{margin:0;padding:0;}
.box{
width:400px;
height:400px;
background:#003399;
/* margin-top:20px; 順時針：上 右 下 左
margin-left:30px;
margin-right:40px;
margin-bottom:50px; */
margin:20px 40px 50px 30px;/* margin 簡寫 */
border-top:10px solid #66cc00;
border-left:20px solid #6633ff;
border-bottom:30px solid #99cc66;
border-right:40px solid #ff0000;
/* padding-top:20px; 順時針：上 右 下 左
padding-left:30px;
padding-bottom:40px;
padding-right:50px; */
padding:20px 50px 40px 30px; /* paddign 簡寫 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
常用的四個方式的元素對齊方式：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Keywords" content="關(guān)鍵字">
<meta name="Description" content="描述">
<title>元素對齊方式</title>
</head>
<body>
<!-- 子元素對齊方式 -->
<style>
/* 子元素對齊方式：在父級元素 填寫：text-align:center; line-height:200px; 實現(xiàn)對齊 */
.box{
width:200px;
height:200px;
margin:auto;
background:#669966;
font-size:20px;
text-align:center;/* 水平居中 */
line-height:200px;/* 垂直居中 */
}
.box a{
color:#fff;
}
</style>
<div class="box">
<a href="#">php中文網(wǎng)</a>
</div>
<!-- 子元素是多行的內(nèi)聯(lián)文本 -->
<style>
/* 子元素是多行的內(nèi)聯(lián)文本時: 在父元素填寫: text-align: center;display:table-cell; vertical-align:來對齊 */
.box1{
width:200px;
height:200px;
background:#669966;
font-size:20px;
color:#fff;
text-align:center;/* 水平居中 */
display:table-cell; /* 設(shè)置此屬性，margin失效 */
vertical-align:middle;/* 垂直居中 */
}
.box1 p{
margin:0;
}
</style>
<div class="box1">
<p>php中文網(wǎng)</p>
<p>免費學(xué)習(xí)平臺</p>
</div>
<!-- 子元素是塊元素 -->
<style>
/* 子元素是塊元素：在父級元素填寫 display:table-cell;
vertical-align:middle;
子元素填寫：margin:auto; 來對齊
*/
.box3{
width:200px;
height:200px;
background:#ff3333;
display:table-cell;
vertical-align:middle;
}
.box3 p{
width:50px;
height:50px;
background:#eee;
margin:auto;
}
</style>
<div class="box3">
<p>塊元素</p>
</div>
<!-- 子元素是不定寬的塊元素 -->
<style>
/* 在父級元素填寫：display:table-cell;vertical-align:center;
子元素轉(zhuǎn)為行內(nèi)元素：display:inline; */
.box4{
width:500px;
height:150px;
background:#663399;
margin-top:20px;
padding-left:0;
display:table-cell;
vertical-align:bottom; /* 頂部對齊 */
font-size:20px;
color:#fff;
}
.box4 li{
display:inline;
}
</style>
<ul class="box4">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
用5個不同色塊，使用定位屬性來寫十字架：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>十字架</title>
<style>
*{margin:0;padding:0;}
.box{
width:800px;
height:600px;
border:1px solid red;
margin:auto;
position:relative;
background-color:#eee;
}
.box1{
width:70px;
height:160px;
background:#006600;
margin:auto;
}
.box2{
width:70px;
height:70px;
background:#990099;
margin:auto;
}
.box3{
width:180px;
height:70px;
background:#66ffcc;
position:absolute;
left:185px;
top:160px;
}
.box4{
width:180px;
height:70px;
background:#ff0033;
position:absolute;
top:160px;
right:185px;
}
.box5{
width:70px;
height:160px;
background:#0000cc;
margin:auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號