assignment5-1
一篇很好的文章解釋margin折疊
外邊距用來(lái)指定非浮動(dòng)元素與其周圍盒子邊緣的最小距離磕秤。兩個(gè)或兩個(gè)以上的相鄰的垂直外邊距會(huì)被折疊并使用它們之間最大的那個(gè)外邊距值错蝴。多數(shù)情況下似踱，折疊垂直外邊距可以在視覺(jué)上顯得更美觀南片，也更貼近設(shè)計(jì)師的預(yù)期。
比如給<ul>下面的<li>設(shè)置margin:5px 10px;含義是垂直方向各是5px渤愁，水平方向各是10px;在沒(méi)有做浮動(dòng)的情況下多個(gè)<li>垂直排列漾峡。
那么<li>之間的間距按理來(lái)說(shuō)是10px，但瀏覽器實(shí)際渲染的間隔結(jié)果展現(xiàn)出來(lái)的是5px叮盘。
assignment5-2
- html文檔
<!DOCTYPE html>
<html>
<head>
<title>css盒模型5.2</title>
</head>
<body>
<div id="box">
<div class="head">源碼分類</div>
<div class="content"><a href="">ASP</a>(1)</div>
<div class="content"><a href="">PHP</a>(0)</div>
<div class="content"><a href="">JSP</a>(1)</div>
</div>
<div id="box">
<div class="head">訪客</div>
<div class="content">暫無(wú)訪客</div>
<div class="content"><a href="">登錄</a>后您的頭像會(huì)在這里</div>
</div>
<style type="text/css">
a:link {
color: vlue;
}
#box {
border: 1px solid #A8A8A8;
box-sizing: border-box;
}
.head {
background-color: #FFCC99;
border: 1px solid #A8A8A8;
box-sizing: border-box;
}
.content {
box-sizing: border-box;
margin: 10px;
}
</style>
</body>
</html>
-
效果圖
image
assignment5-3
- html文檔
<!DOCTYPE html>
<html>
<head>
<title>css盒模型5.3</title>
</head>
<body>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="down" class="box"></div>
<style type="text/css">
.box {
margin: 10px;
width: 400px;
height: 200px;
border: 5px solid black;
float: left;
}
#down {
margin-left: 440px;
}
</style>
</body>
</html>
-
效果圖
image
assignment5-4
- html文檔
<!DOCTYPE html>
<html>
<head>
<title>css盒模型5.4</title>
</head>
<body>
<img src="imgs/girl.png">
<style type="text/css">
img {
margin: 30px 50px 30px 50px;
border: 5px solid red;
padding: 20px;
}
</style>
</body>
</html>
-
效果圖
image
