<span style="font-size:14px;font-weight: normal;">
</span>
<span style="font-size:14px;font-weight: normal;"> <head>
<title>HTML示例</title>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid blue;/*t统一设置*/
}
#div2{
border-right:2px dashed red;
}
</style>
</head>
<body>
CSS的盒子模型,目前以div+CSS来布局。<br/><br/>
(1)边框<br/><br/>
border:统一设置<br />
上border-top <br/>
下border-bottom<br/>
下border-left <br/>
下border-right <br/><br/>
(2)内边距<br/><br/>
距离上下左右四条边的距离叫内边距<br/>
(3)
<pre>
</pre>
<div id="div1">AAAAAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCCCCC</div>
</body>
</html></span>
</span></span>
内边距
<span style="font-size:14px;font-weight: normal;">
</span>
<span style="font-size:14px;font-weight: normal;"> <head>
<title>HTML示例</title>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid blue;/*t统一设置*/
}
#div2{
border-right:2px dashed red;
}
</style>
</head>
<body>
CSS的盒子模型,目前以div+CSS来布局。<br/><br/>
(1)边框<br/><br/>
border:统一设置<br />
上border-top <br/>
下border-bottom<br/>
下border-left <br/>
下border-right <br/><br/>
(2)内边距<br/><br/>
距离上下左右四条边的距离叫内边距<br/>
(3)
<pre>
</pre>
<div id="div1">AAAAAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCCCCC</div>
</body>
</html></span>
</span></span>
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid blue;/*t统一设置*/
}
#div2{
padding:50px;
}
#div23{
padding-left:100px;
}
</style>
</head>
<body>
内边距<br/><br/>
padding:20px;<br/>
使用padding统一设置<br/>
上下左右<br/>
padding-top....<br/><br/>
<div id="div1">AAAAAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCCCCC</div>
</body>
</html>
</span>
外边距
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div{
border:2px solid blue;
}
#div32{
margin:20px;
}
#div33{
margin-left:30px;
}
</style>
</head>
<body>
外边距:<br/><br/>
margin<br/>
统一设置和分别设置<br/>
上下左右<br/>
margin-top...<br/>
也可已使用margin统一设置<br/>
也可以分别设置<br/>
上下左右四个外边距<br/>
<br/><br/><br/>
<div id="div31">AAAAAAAAAAAAAA</div>
<div id="div32">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div33">CCCCCCCCCCCCCC</div>
</body>
</html></span>