border的属性：
width：粗细程度，一般都以px为单位，color：颜色，与文字的color属性一样，style：样式，solid（实线）、dashed（虚线）、dotted（点划线）、none（不显示）.....等等较为常用。border常用样式可以写在一起，例如：border：1px solid blue.
padding表示“内容”与“边框”之间的间隙
形式：padding：padding-top | padding-right | padding-bottom | padding-left 也就是上、右、下、左
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{width:300px;height:200px;border:1px solid #CDCDCD;padding:100px 60px 50px 20px;color:#A52A2A}
</style>
</head>
<body>
<div id="div1">
标准盒子模型测试
</div>
</body>
</html>margin（外边距）的使用：
理解margin作用：用于控制块与块之间的距离。块元素之间的左右margin。
结论：当两个块元素紧邻的时候，它们之间的距离为第一个元素的margin-right加上第二个元素的margin-left。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin详解</title>
<style type="text/css">
div{width:100px;height:50px;border:1px solid blue;background-color: #E66B14;}
#div1{margin-right:20px;float:left;}
#div2{margin-left:50px;float:left;}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>块元素之间的上下margin：在块级元素中当两个div设置了margin-top和margin-bottom时，两个块级元素的实际间隔并不是二者相加，而是二者取其“较大”者。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{width:300px;height:200px;border:20px solid gray;}
#div2{width:200px;height:100px;border:1px solid blue;background-color:yellow;
margin-top:0px;margin-left:0px;}
</style>
</head>
<body>
<div id="div1"><div id="div2">字块元素</div></div>
</body>
</html>
4954
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
