盒模型：3个距离的区分
a: margin(外边距)
b: border(内边距)
c: padding(内边距)
一个盒子的大小：
width==width+(margin-left+margin-right)+(border-left+border-right)+(padding-left+padding-right)
height==height+(margin-top+margin-bottom)+(border-top+border-bottom)+(padding-top+padding-bottom)
注：这3个距离，若只分别定义1个，则默认在盒子的四周均生效，若想指定某一个方向的设定，可加上4个方向的定义：上、右、下、左(顺时针)；
一、margin：
1.margin的普通用法：
例1：margin：10px;则盒子的四周的外边距都将变成10px;
margin：10px,10px,10px,10px; == margin:10px;
注：若未定义4个方向，而是2、3个方向，则默认未定义的边与其对边的值相等；
margin: 10px,20px; == margin:10px,20px,10px,20px；
margin:10px,20px,30px; == margin:10px,20px,30px,20px;
例2:指定某一方向：
margin-top:20px;
margin-left:20px;
2.margin的特殊用法：
1）利用margin设置，使元素水平方向自适应居中：margin:0px auto; ——竖直方向的居中显示怎么实现？？？
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin的特殊使用</title> 6 </head> 7 <style type="text/css"> 8 div 9 { 10 width:200px; 11 height: 200px; 12 background:red; 13 margin:0px auto; 14 } 15 </style> 16 <body> 17 <div> 18 i am div 19 </div> 20 </body> 21 </html>
显示效果：
2)margin的重叠现象研究：
——对于相邻的普通元素，其上下边距并非是简单的设置值的和，而是取其中较大边距值；
——对于float(浮动)元素，则是相加；
普通元素实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin的特殊使用</title> 6 </head> 7 <style type="text/css"> 8 #div1 9 { 10 width:200px; 11 height: 100px; 12 background:red; 13 margin-bottom:50px; 14 } 15 #div2 16 { 17 width:200px; 18 height:100px; 19 background: green; 20 margin-top: 50px 21 } 22 </style> 23 <body> 24 <div id="div1"> 25 i am div1,高100，下边距50； 26 </div> 27 <div id="div2"> 28 i am div2，高100，上边距50； 29 </div> 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin的特殊使用</title> 6 </head> 7 <style type="text/css"> 8 #div1 9 { 10 width:200px; 11 height: 100px; 12 background:red; 13 margin-bottom:100px; 14 } 15 #div2 16 { 17 width:200px; 18 height:100px; 19 background: green; 20 margin-top: 50px 21 } 22 </style> 23 <body> 24 <div id="div1"> 25 i am div1,高100，下边距100； 26 </div> 27 <div id="div2"> 28 i am div2，高100，上边距50； 29 </div> 30 </body> 31 </html>
显示效果：
float 元素实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin的特殊使用</title> 6 </head> 7 <style type="text/css"> 8 #div1 9 { 10 width:200px; 11 height: 100px; 12 background:red; 13 margin-right:100px; 14 float:left; 15 } 16 #div2 17 { 18 width:200px; 19 height:100px; 20 background: green; 21 margin-left: 100px; 22 float:left; 23 } 24 </style> 25 <body> 26 <div id="div1"> 27 i am div1,宽200，右边距100； 28 </div> 29 <div id="div2"> 30 i am div2，宽200，左边距100； 31 </div> 32 </body> 33 </html>
显示效果：
二、border：
1.border的3要素：
1）width(宽)：以px为单位；
2）style(形状)：solid(实线)、dashed(虚线)、dotted(点线).....actset(立体效果)
3）color(颜色)；
2.单独设置3要素之一：
border-style：dashed; border-top-style:dashed;
border-width: border-top-width:
border-color: border-top-color:
3.利用border画出一个三角形；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用border画三角形</title> 6 <style type="text/css"> 7 div 8 { 9 width:0px; 10 height:0px; 11 background:red; 12 border:100px solid; 13 border-top-color:white; 14 border-right-color:white; 15 border-bottom-color:yellow; 16 border-left-color:white; 17 } 18 </style> 19 </head> 20 <body> 21 <div> 22 </div> 23 </body> 24 </html>
显示效果：
4.利用border画出一棵圣诞树；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用border画圣诞树</title> 6 <style type="text/css"> 7 #cont 8 { 9 width:800px; 10 height:800px; 11 background: white; 12 } 13 #cont1 14 { 15 width:600px; 16 height:100px; 17 background: white; 18 } 19 #cont2 20 { 21 width:700px; 22 height:100px; 23 background: white; 24 } 25 #cont3 26 { 27 width:800px; 28 height:100px; 29 background: white; 30 } 31 #cont4 32 { 33 width:450px; 34 height:500px; 35 background: white; 36 } 37 #one 38 { 39 width:0px; 40 height:0px; 41 border-style:solid; 42 border-width:0px 200px 100px 200px; 43 border-top-color:white; 44 border-right-color:white; 45 border-bottom-color:green; 46 border-left-color:white; 47 float:right; 48 } 49 #two 50 { 51 width:0px; 52 height:0px; 53 border-style:solid; 54 border-width:0px 300px 100px 300px; 55 border-top-color:white; 56 border-right-color:white; 57 border-bottom-color:green; 58 border-left-color:white; 59 float:right; 60 } 61 #three 62 { 63 width:0px; 64 height:0px; 65 border-style:solid; 66 border-width:0px 400px 100px 400px; 67 border-top-color:white; 68 border-right-color:white; 69 border-bottom-color:green; 70 border-left-color:white; 71 float:right; 72 } 73 #four 74 { 75 width:100px; 76 height:300px; 77 background: grey; 78 clear:both; 79 float:right; 80 } 81 </style> 82 </head> 83 <body> 84 <div id="cont"> 85 <div id="cont1"> 86 <div id="one"> 87 </div> 88 </div> 89 <div id="cont2"> 90 <div id="two"> 91 </div> 92 </div> 93 <div id="cont3"> 94 <div id="three"> 95 </div> 96 </div> 97 <div id="cont4"> 98 <div id="four"> 99 </div> 100 </div> 101 </div> 102 </body> 103 </html>
显示效果：
三、padding
1.基本用法同margin;
2.无法给padding赋颜色。padding与背景的颜色是一致的，即当设置了背景色以后，再加上padding后，着色区域会变大；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>padding使用</title> 6 </head> 7 <style type="text/css"> 8 #nopadding 9 { 10 width:100px; 11 height: 100px; 12 background:grey; 13 } 14 #padding 15 { 16 width:100px; 17 height: 100px; 18 background:grey; 19 padding:50px; 20 } 21 </style> 22 <body> 23 <div id="nopadding"> 24 i'm no padding 25 </div> 26 <div id="padding"> 27 i'm with padding 28 </div> 29 </body> 30 </html>
显示效果（content 同为100px，100px）：
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
