1.盒子 1.1元素盒子 口外边距 外边距相当于文档中的页边距,是元素边框边缘与相邻元素之间的 距离,主要用来分割各种元素,设置元素之间的距离。如下图中, 浅灰色部分表示盒子的外边距。 外边距 内边距 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子 外边距 外边距相当于文档中的页边距，是元素边框边缘与相邻元素之间的 距离，主要用来分割各种元素，设置元素之间的距离。如下图中， 浅灰色部分表示盒子的外边距。 6 1.1元素盒子
1.盒子 元素盒子 外边距 使用 margin属性来定义元素外边距,属性值单位可以为长度单位 (px、pt、em、ex、in)或百分比,取值可以为正值或负值。 同时外边距还有专门设置某一方向上外边距的属性: margin-top margin- right、 margin- bottom、 margin-left五种属性 表1001外边距的性 性 描述 在一个声明中设置所有外边距属性 margin-bottom设元素的下外边距 margin-left 设置元素的左外边距 margin-nght 设置元素的右外边距 margin-top 设置元素的上外边距。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子 外边距 使用margin属性来定义元素外边距，属性值单位可以为长度单位 （px、pt、em、ex、in）或百分比，取值可以为正值或负值。 同时外边距还有专门设置某一方向上外边距的属性：margin-top、 margin-right、margin-bottom、margin-left五种属性。 7 1.1元素盒子
8 1.盒子 1.1元素盒子 margin属性 margin可以设置为auto。常见的做法是为外边距设置固定的长度值。 (margin: 10px Opx 15px 5px; J ■还可以为 margin设置一个百分比数值。百分比数是相对于父元素的 width计算的。 p(margin: 10% 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子 margin属性 margin可以设置为auto。常见的做法是为外边距设置固定的长度值。 还可以为margin设置一个百分比数值。百分比数是相对于父元素的 width计算的。 8 1.1元素盒子
9 1.盒子 1.1元素盒子 口值复制 在Web前端开发中,有时需要输入一些重复的值。例如 p margin: 0.5em lem 0.5em 1em 1 这种情况下可以使用值复制,不必重复地键入相同的数字。上面的 规则与下面的规则是等价的。 I p(margin: 0. 5em lem:) 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子 值复制 在Web前端开发中，有时需要输入一些重复的值。例如： 这种情况下可以使用值复制，不必重复地键入相同的数字。上面的 规则与下面的规则是等价的。 9 1.1元素盒子
10 1.盒子 1.1元素盒子 口值复制的规则如下 ■如果缺少左外边距的值,则使用右外边距的值。 如果缺少下外边距的值,则使用上外边距的值。 ■如果缺少右外边距的值,则使用上外边距的值。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子 值复制的规则如下： 如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。 10 1.1元素盒子