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>