⽹页设计（四）——DIV+CSS布局3前⾔：好久没更新过CSDN博客了，现在从原来的OI，变成了⼀个科研⼯作者。最近打算把原来的⼀些资料整理⼀下，作为经验公开分享，希望能帮到更多默默努⼒耕耘的⼈~
⽹页设计系列源于早⼏年在⼯作做⼊门培训时的⼀些讲稿，有关HTML+CSS框架的编程，⽐较基础。当时为了给⼊门的同学更多感性认识，提供了很多⼩实例，这⾥也都给出来了。
⽬录
DIV+CSS布局
CSS 盒⼦模型参数设置
在CSS中，可以使⽤下⾯的语段⽰例来设置div的宽度(width)、⾼度(height)、外边距(margin)、内边距(padding)
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
结构如图所⽰：
具体每种参数的语法格式为：(下⾯仅举例，可举⼀反三)
border-color:top right bottom left
border-style:top right bottom left
padding:top right bottom left
margin:top right bottom left
return to ozborder-width:top right bottom left
例如:“border-color: red black white red” 表⽰设置上边界颜⾊为红⾊，右边界颜⾊为⿊⾊，下边界为⽩⾊，左边界为红⾊再如:“padding：10px 10px10px10px” 表⽰各padding边界宽度为10px
CSS 盒⼦模型参数设置——实例9
HTML代码如下：
<html>
<head>
<style type="text/css">
.im{
width:100px;
height:100px;
border-style:solid;
border-width:10px;
border-color:red black green orange;基础教程网
margin:100px 10px 0px 0px;
}
</style>
</head>
<body>
<div class="im">
CSS盒⼦模型参数设置
</div>
</body>
</html>
打开HTML效果如图：
注意到这⾥使⽤了内部样式表，这部分代码提取出来如下：
<style type="text/css">
.im{
width:100px;
height:100px;设计模式分为哪三类
border-style:solid;
border-width:10px;
border-color:red black green orange;
margin:100px 10px 0px 0px;
}
</style>
其中，紫⾊部分的颜⾊顺序如下，可以与上图对照起来理解：
CSS外边距合并
外边距合并（叠加）是⼀个相当简单的概念。但是，在实践中对⽹页进⾏布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成⼀个外边距。合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度中的较⼤者。
当⼀个元素出现在另⼀个元素上⾯时，第⼀个元素的下外边距与第⼆个元素的上外边距会发⽣合并。请看下图：
CSS外边距合并——实例10
HTML代码如下：
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#d1 {
width:100px;
height:100px;
margin-top:20px;
margin-bottom:20px;
background-color:red;
web流程设计器
}
#d2 {
width:100px;
height:100px;
margin-top:10px;
background-color:blue;
站长工具黄}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
<p>请注意，两个 div 之间的外边距是 20px，⽽不是 30px（20px + 10px）。</p>
</body>
html+css美食静态网页设计</html>
打开HTML后效果如下：
可尝试修改红⾊部分（见下⽅代码段中的红⾊部分）的数值进⾏测试，并注意观察两div⾊块的间距变化：#d1 {
width:100px;
height:100px;
margin-top:20px;
margin-bottom:20px;
background-color:red;
}
#d2 {
width:100px;
height:100px;
margin-top:10px;
background-color:blue;
}
CSS外边距合并（续）
当⼀个元素包含在另⼀个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发⽣合并。请看下图：
CSS外边距合并——实例11
HTML代码如下：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论