assignment5-1
一篇很好的文章解释margin折叠
外边距用来指定非浮动元素与其周围盒子边缘的最小距离。两个或两个以上的相邻的垂直外边距会被折叠并使用它们之间最大的那个外边距值。多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期。
比如给<ul>下面的<li>设置margin:5px 10px;含义是垂直方向各是5px，水平方向各是10px;在没有做浮动的情况下多个<li>垂直排列。
那么<li>之间的间距按理来说是10px，但浏览器实际渲染的间隔结果展现出来的是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">暂无访客</div>
<div class="content"><a href="">登录</a>后您的头像会在这里</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
网友评论