CSS学习笔记---（六）

1. 月饼与包装的纸盒子之间的距离—–padding
2. 不同纸盒子月饼之间的距离—–margin
3. 块级元素——都具有盒模型特征—-也就是，都可以设置margin,padding

4.盒模型（一）——-边框—–边框就是围绕着内容而补白的线，可以设置粗细、样式、颜色

div{  border:2px solid red;}//或者可以写成border{  border-width:2px; //粗细--可以设置为thin,medium,thick但不常用，最常用还是像素px  border-style:solid;//样式--dashed（虚线）--dotted（点线）---solid（实线）  border-color:red;//颜色--#888;前面的#不能忘。--颜色可以设置为十六进制颜色}

边框有上下左右

div{border-bottom:1px solid red;}----设置下边框div{border-left:1px solid red:}---设置左边框div{border-top:1px solid red:}---设置上边框

盒模型（二）——宽度和高度
宽度=内容宽度width+左填充padding-left+左边框border-left+左边界margin-left+右填充padding-right+右边框border-right+右边界margin-right

//CSS代码：div{  width:200px;  padding:20px;  boreder:1px solid red;  margin:10px;}

盒模型(三)—–填充—-元素与边框之间的距离（月饼与盒子之间的距离）—填充分为上右下左（顺时针）

div{padding:20px 10px 15px 30px;}//上面的代码可以写为div{  padding-top:20px;  padding-right:10px;  padding-bottom:15px;  padding-left:30px;}//如果上右下左填充都是10px;------可以写为：div{padding:10px;}//如果上下为10px;左右为20px；----可以写为：div{padding:10px 20px;}

盒模型(四)—–边界—-元素与其他元素之间的距离(月饼与其他月饼之间的距离)–margin

div{  margin:20px 10px 15px 30px;}//也可以分开写：div{  margion-top:20px;  margin-right:10px;  margin-bottom:15px;  margin-left:30px;}//如果上右下左的边界都是10pxdiv{margin:10px;}//如果上下边界10px,左右边界20pxdiv{10px 20px;}