效果:
(https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/3、盒子模型.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3、盒子模型</title>
</head>
<body>
盒子模型具有内边距、边框、外边距、宽和高这些基本属性,
但不要求每个元素都设置这些属性.
一、盒子模型的相关属性
1.边框属性
包括边框样式border-style、边框宽度border-width、边框颜色属性border-color。
(1)边框样式border-style
格式:
border-上/右/左/下-style:属性值
<!--
常用属性值:
none:(默认值)没有边框
solid:边框为单实线
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
其中上右下左分别为:top、right、bottom、left
属性值可用空格隔开连续写四个分别代表上右下左,减少冗余度。
不设置时,下边框默认和上边框一致,左边框默认和右边框一致。
eg:
boder-top-style:solid /*上边框样式为solid*/
boder-style:none none solid solid /*上、右、下、左边框的样式*/
-->
eg:
<style type="text/css">
h1{border-style:double}
.one{
border-top-style:dotted;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:solid;
}
.two{
border-style:solid dotted dashed;
}
</style>
<body>
<h1>边框样式-双实线</h1>
<p class="one">边框样式-上下单线、左右单实线one</p>
<p class="two">边框样式-上单实线、左右点线、下虚线two</p>
</body>
(2)边框宽度border-width
<!--
格式:
border-上下左右边框-width:宽度;和border-style基本一致
-->
eg:
<head>
<style type="text/css">
p{
border-style:solid;
border-width:1px;/*综合设置*/
border-top-width:3px;/*对上边框宽度设置进行覆盖*/
/*等价于border-width:3px 1px 1px;;*/
}
</style>
</head>
<body>
<p>边框宽度上3px、下左右1px,样式为单实线</p>
</body>
(3)边框颜色border-color
<!--
格式:
border-上下左右边框-color:颜色;和border-style基本一致
颜色属性:英文单词、16进制颜色值(最常用)、RGB模式
如:red、#FF0000、rgb(r,g,b)
-->
eg:
<style type="text/css">
.one1{
border-style:solid;
border-width:3px;
border-color:blue yellow red;
}
</style>
<p class="one1">综合设置样式、设置了三种颜色的one1边框</p>
(4)边框属性综合设置
<!--
border-style、border-width、border-color一起设置
减少代码冗余度
格式:
border-:边框宽度 样式 颜色; /*综合四个边框设置*/
border-上下左右边框:(上/下/左/右)边框宽度 样式 颜色; /*分边框设置*/
如:p{border-top:2px solid #ccc;}
-->
eg:
<style type="text/css">
.one2{
border-top:2px solid #ccc;
}
</style>
<body>
<p class="one2">边框属性综合设置的one2盒子</p>
</body>
2.内边距属性padding
<!--
盒子与盒子内容之间的距离
格式:
padding:属性; /*内边距综合设置*/
padding-上下左右边距:属性;
可用属性:
auto:自动(即默认值)、
不同单位的数值、
最常用单位为像素值px
-->
eg:
<style type="text/css">
.one3{border:5px solid #ccc;} /*设置图像和段落边框*/
img{ /*设置图像内边距*/
padding:10px;
padding-bottom:0;
}
</style>
<body>
<img/ class="one3" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" title="小猴紫" alt="图片找不到">
<p class="one3">段落one3</p>
</body>
3.外边距属性margin
<!--
盒子与盒子之间的距离
格式设置跟内边距基本一致
格式:
margin:属性; /*内边距综合设置*/
margin-上下左右边距:属性;
如: .one{margin:0 auto;}
可用属性:
auto:自动(即默认值)、
不同单位的数值、
最常用单位为像素值px
*属性可使用负值,使相邻标签发生重叠。
-->
eg:
<style type="text/css">
img{ /*设置图像内边距*/
border:5px solid green;
float:left; /*设置图片左浮动*/
margin-right: 50px; /*图片右外边距*/
margin-left: 30px; /*图片左外边距*/
}
.one4{text-indent:2em;} /*文本首
行缩进2字符*/
</style>
<body>
<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" title="heart" alt="图片找不到">
<p class="one4">段落one4,</p>
</body>
4.背景属性
<!--
(1)设置背景颜色background-color
格式:
{background-color:属性}
属性:
属性值与文本颜色取值一样
可使用预定义颜色值、十六进制#RRGGBB、RBG代码rgb(r,g,b)
background-color默认值为transparent,即透明。此时子元素会显示父元素的背景。
-->
eg:
<head>
<style type="text/css">
body{background-color:#CCC;} /*设置标题二背景颜色,当标签为body时,
即为设置网页背景颜色*/
.one5{ /*设置段落一背景颜色*/
font-family:"微软雅黑";
color:#FFF;
background-color:#36C;
}
</style>
</head>
<body>
<h2 class="one5">标题one5</h2>
<p >段落一文字</p> /*未设置背景颜色的文本段落继承显示了父元素body的背景颜色*/
</body>
(2)设置背景图像background-image
<!--
格式:
{background-image:url();}
-->
eg:
<head>
<style type="text/css">
.one6{
border-width: 5px; /*边框大小*/
background-color:#CCC;
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw)}/*为标签one6设置背景图片*/
}
</style>
</head>
<body>
<p class="one6">段落one6,为其段落标签设置了背景。</br></br></br></br> </p>
</body>
(3)设置背景图像平铺:background-repeat
<!--
图像默认为水平或竖直方向平铺
可通过background-repeat属性来控制.
格式:(前提为设置了背景图片)
{
background-image:url(图片);
background-repeat:属性;
}
background-repeat属性值:
repeat:(默认值)沿水平和竖直两个方向平铺
no-repeat:不平铺(图片位于元素左上角,只显示一次)
repeat-x:只沿水平方向平铺
repeat-y:只沿竖直方向平铺
-->
eg:
<head>
<style type="text/css">
.one7{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
background-repeat:repeat;
}
.one8{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
background-repeat:no-repeat;
}
.one9{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
background-repeat:repeat-x;
}
.one10{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
background-repeat:repeat-y;
}
</style>
</head>
<body>
<p class="one7">段落one7 </br></br></br></br></br></br></br></br> </p>
<p class="one8">段落one8 </br></br></br></br></br></br></br></br> </p>
<p class="one9">段落one9 </br></br></br></br></br></br></br></br> </p>
<p class="one10">段落one10</br></br></br></br></br></br></br></br> </p>
</body>
(4)设置背景图像的位置:background-position
<!--
希望背景图像出现在其他位置,如右下角等。
格式:
{
background-position:属性值1(水平坐标) 属性值2(垂直坐标); /*通常设置两个*/
}
属性值:
默认值: 0 0 或 top left。即位于左上角
1.使用不同单位数值。最常用px 如 20px 20px
2.使用预定义关键字:指定图片在元素中对齐方式
水平方向值:left、center、right
垂直方向值:top、center、bottom
如 center top;
两关键字不分顺序,若只写一个,另一个默认为center
3.使用百分比:按背景图像和元素的指定点对齐
如
0% 0% 表示图像左上角与元素左上角对齐
20% 30% 表示图像20% 30%与元素的20% 30点对齐
-->
eg:
<head>
<style type="text/css">
.two1{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
background-repeat:no-repeat; /*设置图像不平铺*/
background-position:50px 50px; /*用像素值px控制图像位置*/
}
.two2{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
background-repeat:no-repeat; /*设置图像不平铺*/
background-position:right top; /*用像预定义关键字控制图像位置*/
}
.two3{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
background-repeat:no-repeat; /*设置图像不平铺*/
background-position:100% 50%; /*用百分比%控制图像位置*/
}
</style>
</head>
<body>
<p class="two1">段落two1 </br></br></br></br></br></br></br></br> </p>
<p class="two2">段落two2 </br></br></br></br></br></br></br></br> </p>
<p class="two3">段落two3 </br></br></br></br></br></br></br></br> </p>
</body>
(5)设置背景图像固定:background-attachment
<!--
内容较多时,图像是否随页面滚动而跟随消失
格式:
{
background-attachment:属性值;
}
属性值:
两个,跟随/不跟随
scroll:(默认值)图像跟随页面滚动
fixed:图像固定在屏幕一位置上,不跟随页面滚动而消失
-->
eg:
<head>
<style type="text/css">
.two2{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
background-repeat:no-repeat; /*设置图像不平铺*/
background-position:50% 50%; /*用百分比控制图像位置*/
background-attachment:fixed;
}
</style>
</head>
<body>
<p class="two2">段落two2 </br></br></br></br></br></br></br></br> </p>
</body>
(5)综合设置元素背景:background
<!--
语法格式:
background:背景色 url("图像") 平铺 定位 固定;
/*属性一般按照此顺序,但不规定顺序*/
如background: url(he.png) no-repeat 50px 50px fixed;
-->
eg:
<head>
<style type="text/css">
.two3{
background:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw) no-repeat 50px 50px scroll;
}
</style>
</head>
<body>
<p class="two3">段落two3</br></br></br></br></br></br></br></br> </p>
</body>
5.盒子的宽和高:width;height
<!--
即盒子大小
格式:
{
width:属性值;
heigth:属性值;
}
属性值:
可以为不同单位数值;或相对于父元素的百分比,
最常用为像素值px
-->
eg:
<head>
<style type="text/css">
.two4{
width:1000px;
heigth:20px;
}
</style>
</head>
<body>
<p class="two4">盒子two4 </br></br></br></br></br></br></br></br> </p>
</body>
二、CSS3的新增盒子模型属性
<!--
1.颜色透明度:rgba、opacity
css3之前设置的十六进制(如#F00)、rgb模式颜色或指定英文名称这些
设置颜色的方法都无法改变颜色的不透明度。即会被覆盖
css3中新增了两种设置颜色不透明度的方法,
(1)rgba模式
为rgb颜色模式的延伸
语法格式:
{background-color:rgba(r,g,b,alpha);}
如{background-color:rgba(255,0,0,0.5);}
{background-color:rgba(100%,0%,0%,0.5);}
r,g,b为颜色色值或百分比,
alpha参数为介于0.0(透明)和1.0(完全不透民度)之间的数字。
(2)opacity属性
范围比rgba要大得多,能应用于任何元素
语法格式:
opacity:参数;
参数:
参数表示不透明的值,介于0(完全透明)~1(完全不透明)之间的浮点数值,
-->
eg:
<head>
<style type="text/css">
.two5{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
opacity:0.5;
}
.two6{
background-color:rgba(255,0,0,1);
}
.two7{
background-color:rgba(255,0,0,0.4);
}
</style>
</head>
<body>
<p class="two5">不透明度为0.5的段落two5 </br></br></br></br></br></br></br></p>
<p class="two6">不透明度为1的段落two6,与two7对比</br></br></br></p>
<p class="two7">不透明度为0.4的段落two7,与two6对比</br></br></br></p>
</body>
2.圆角:border-radius
<!--
将矩形边框四角圆角化,如网页中一些按钮、头像图片等.
语法格式:
border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂
直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4
复制特性:
参数1、2、3、4分别为左上角、右上角、右下角、左下角设置(顺时针);
当左只写参数1,代表四个参数相等,只写参数1、2代表右下角与左上角相等(对角复制);
当只写水平半径参数时,垂直半径参数默认等于水平半径参数。
参数值:
为px(像素值)或%(百分比)
-->
eg:
<head>
<style type="text/css">
.two8{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
width: 300px;
height: 300px;
border-radius:50px 20px/30px 60px;
}
.two9{
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
width: 300px;
height: 300px;
border-radius:50%;
}
</style>
</head>
<body>
<p class="two8">段落two8</br></br></br></br></br></br></br></br> </p>
<p class="two9">段落two9</br></br></br></br></br></br></br></br> </p>
</body>
3.图片边框:border-image
将图片作为元素的边框。
<!--
border-image是一个复合属性,内部包含
border-image-source、border-image-slice、border-image-width、
border-image-outset、border-image-repeat等属性。
语法格式:
border-image:border-image-source/ border-image-slice/ bo
rder-image-width/ border-image-outset/ border-image-repeat
属性:
border-image-source:指定图片路径
border-image-slice:指定图片顶部、右侧、底部、左侧向内偏移量(图片裁切位置)
border-image-width:指定边框宽度
border-image-outset:指定边框背景向盒子外部延伸的距离
border-image-repeat:指定背景的平铺方式
-->
eg:
<head>
<style type="text/css">
.two10{
width:362px;
height:362px;
border-image-source:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);/*设置图片路径*/
border-image-slice:33%;/*设置图像顶部、右侧、底部、左侧向内偏移量*/
border-image-width:40px;/*指定边框宽度*/
border-image-outset:0;/*设置边框图像区域超出边框量*/
border-image-repeat:repeat;/*设置图片平铺方式*/
}
</style>
</head>
<body>
<p class="two10">段落two10</br></br></br></br></br></br> </p>
</body>
4.阴影:box-shadow
对盒子添加阴影效果
<!--
语法格式:
box-shadow:h-shadow v-shadow blur spread color outset;
其中的6个参数值含义分别为:
h-shadow:水平阴影位置,可为负值(必选属性)
v-shadow:垂直阴影位置,可为负值(必选属性)
blur:阴影模糊半径(可选属性)
spread:阴影扩充半径,不能为负值(可选属性)
color:阴影颜色(可选属性)
outset/inset:外阴影(默认)/外阴影(可选属性)
-->
eg:
<head>
<style type="text/css">
.three1{
padding:10px;/*内边距*/
border:1px solid #666;
box-shadow:20px 10px 10px 2px #999 inset;
background-image:url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw);
}
</style>
</head>
<body>
<p class="three1">段落three1 </br></br></br></br></br></br></br></br> </p>
</body>
<!--
*使用内阴影isnet需配合内边距属性padding,让图像和阴影间拉开一定距离,以免
图片将内阴影遮挡。
*可以添加多重阴影效果,即box-shadow:h-shadow v-shadow blur spread color
outset;box-shadow:h-shadow v-shadow blur spread color outset;
-->
5.渐变
<!--
主要包括线性渐变、径向渐变和重复渐变。
1.线性渐变
起始颜色沿着一条直线按顺序过渡到结束颜色
语法格式:
background-image:linear-gradient(渐变角度,颜色值1,颜色值2,..颜色值n)
如background-image:linear-gradient(30deg,#0f0,#00F);
参数:
渐变角度:指水平线和渐变线间的夹角,可以deg为单位的角度数值,或
以to加left、right、top、bottom等关键词.
如 0deg等价于to top
颜色值:
2.径向渐变
-->
6.多背景图像
7.修剪背景图像
三、元素的类型和转换
<!--
1.元素的类型:块元素、行内元素
(1)块元素
特点:每个块元素通常独自占一行或多行,可对其设置宽度、高度、对齐等属性;
常用于网页布局和网页的搭建。
常见块元素:<xmp>|<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>|</xmp>等
其中<div>为最典型。
(2)行内元素
特点:不会独占一行,不强迫其他标签在新的一行显示;通常一个行内标签可与其他行
内标签显示在同一行;即靠自身的文本大小和图像尺寸来支撑结构;一般不可设置
宽度、高度、对齐等属性;常用于控制页面中文本样式。
常见行内元素有:<xmp>|<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、
<a>、<span> |</xmp>等;
其中<span>为最典型。
*行内元素有几个特殊的标签,如<img/>和<input/>,可对他们设置宽、高、对齐属性.
又被称作行内块元素
-->
eg:
<style type="text/css">
.three2{/*定义标签h2文本的背景颜色、宽、高度、对齐方式*/
background-color: #39F;
width:350px;
height:50px;
text-align: center;
}
.three3{background:#060;}
strong{/*定义strong标签的背景颜色、宽、高度、文本对齐方式*/
background:#66F;
width:360px;
height: 50px;
text-align: center;
}
em{background:#FF0;}
del{background:#FF0000;}
</style>
</head>
<body>
<h1 class="three2">标签three2定义的文本</h1>
<p class="three3">标签three3定义的文本</p>
<p class="three4">
标签three4定义的文本
<strong>strong标签定义的文本</strong>
<em>em标签定义的文本</em>
<del>del标签定义的文本</del>
</p>
</body>
由eg易看出,块元素<xmp><h1>、<p>等都会独占一行;而块元素<strong>、<em>、
<del></xmp>等行内元素不会独占一行。
2.<xmp><div>和<span>标签</xmp>
<!--
(1)<div>:典型的块元素,相对于大盒子,用于布局,独占一行
div标签中,可设置外边距、内边距、宽和高,同时可容纳段落、标题、表格、图像等
各种网页元素。
通过id、class等属性结合设置CSS样式,可代替大多数块级文本标签。
div标签用例
-->
eg:
<style type="text/css">
.three5{/*设置标签为three5的盒子模型宽、高、背景颜色、字体大小、字体加粗、文本对齐方式*/
width:600px;
height: 50px;
background: aqua;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.three6{/*设置标签为three6的盒子模型的宽、高、背景颜色、字体大小、首行缩进*/
width:600px;
height: 100px;
background:lime;
font-size:14px;
text-indent: 2em;
}
</style>
<body>
<div class="three5">
用div标签设置的标题文本three5
</div>
<div class="three6">
div标签three6
<p>div标签three6中嵌套的p标签文本内容,p标签为块元素会独占一行</p>
</div>
<p class="one2">边框属性综合设置的one2盒子</p>
</body>
(2)<span>
<!--
span为行内元素,只能包含文本和各种行内标签的容器;如加粗标签<strong>、
倾斜标签<em>等,span标签中也可嵌套多层span标签
常用于定义网页中某些特殊显示的文本,配合class属性使用。
span标签其本身没有结构特征,只有在应用样式时才会产生变化,故当其他行内样式
都不合适时可选择span标签。
-->
eg:
<style type="text/css">
#one11{ /*设置标签为one1的div文本通用格式*/
font-family: "微软雅黑";
font-size: 16px;
color:black;
}
#one11 .main{/*控制第一个span中特殊文本*/
color:#63F;
font-size: 20px;
padding-right: 20px;
}
#one11 .art{/*控制第二个span中特殊文本*/
color:#F33;
font-size: 18px;
}
</style>
<body>
<div id="one11">
<span class="main">木偶戏</span>是中国一种古老民间艺
术,<span class="art">是中国乡土艺术</span>
</div>
</body>
3.元素类型的转换
<!--
目的:如希望行内元素具有块元素的某些特性,例如可设置宽高;
或块元素具行内元素的某些特性,如不单独占一行;
则可使用display属性对元素类型进行转换。
display属性常用属性值:
inline:此元素显示为行内元素(行内元素默认display值)
block:此元素显示为块元素(块元素默认display值)
inline-block:此元素将显示为行内块元素(即可对他们设置宽、高、对齐等属性,但
不会独占一行)
none:此元素将被隐藏,不显示,也不占用页面空间,相对于该元素不存在.
-->
eg:
<style type="text/css">
div,span{/*同时设置div、span的样式*/
width:200px;
height:50px;
background: #FCC;
margin:10px;/*宽、高、背景颜色、外边距*/
}
.d_one,.d_two{display:inline;}/*将标签为d_one、d_two的div(块元素)转换为行内
元素*/
.s_one{display: inline-block;}/*将标签为s_one的span(行内元素)转换为行内块元素*/
.s_three{display: block;}/*将标签为.s_three的span(行内元素)转换为块元素*/
</style>
<body>
<div class="d_one">标签为d_one的div中的文本</div>
<div class="d_two">标签为d_two的div中的文本</div>
<div class="d_three">标签为d_three的div中的文本</div>
<span class="s_one">标签为s_one的span中的文本</span>
<span class="s_two">标签为s_two的span中的文本</span>
<span class="s_three">标签为s_three的span中的文本</span>
</body>
四、块元素垂直外边距的合并
<!--
原因
块元素特性:当两个相邻或嵌套的块元素相遇时,其外边距会自动合并发生重叠
1.相邻块元素垂直外边距的合并
当上下两个块元素相遇时,若上面的标签有下边距margin-bottom,下面的标签有上
外边距margin-top,他们的垂直间距不是两者之和,而是其中较大者。
-->
eg:
<style type="text/css">
.three7{
width:150px;
height:150px;
background:#FC0;
margin-bottom:20px;
}
.three8{
width:150px;
height:150px;
background:#63F;
margin-top:40px;
}
/*即两块元素垂直外边距不是20px+40px,而是40px(20被覆盖)*/
</style>
<body>
<div class="three7">标签为three7的div</div>
<div class="three8">标签为three8的div</div>
</body>
2.嵌套块元素垂直外边距的合并
设置父标签与子标签的上外边框是否合并(即取最大者),或是各自独立
eg:
<style type="text/css">
*{margin:0;padding:0;}/*使用通配符清除所有HTML标记的默认边距*/
div.three9{
width:200px;
height:200px;
background:#FC0;
margin-top:20px;
}
div.three10{
width:100px;
height:100px;
background:#63F;
margin-top:40px;
}/*块元素9、10与上一元素之间的上外边距以大的为准,即40px*/
div.three11{
width:200px;
height:200px;
background:#FC0;
margin-top:40px;
border-top:1px solid #FCC;/*在12的父标签11的div定义上边框,使子标签
以其边框为参照决定上外边距,从而达到外边距不合并的效果*/
}
div.three12{
width:100px;
height:100px;
background:#63F;
margin-top:40px;
}
</style>
<body>
<div class="three9">
<div class="three10">three11的div</div>
three9的div
</div>
<div class="three11">
<div class="three12">three12的div</div>
three11的div
</div>
</body>
</body>
</html>