Be a better web developer：day5

一、外边距

注意：垂直方向上的外边距，会发生合并，取较大的值

水平方向上的外边距，会发生叠加，元素之间的距离较大

为子元素添加距上的外边距，作用于父元素上：为父元素设置上边框（可以使用透明色）或者为父元素添加顶部的内边距padding-top：0.1px；

二、内边距：元素内容与元素边框之间的距离

padding：10px；　　设置上右下左四个方向的内边距
padding：10px 20px；　　　设置上下内边距为10，左右内边距为20　
padding：10px 20px 30px；　　　　设置上下内边距为10 30，左右内边距为20
padding：10px 20px 30px 40px　　　　设置上右下左四个方向的内边距
padding-top:内容与元素顶部边框之间的距离
padding-right:内容与元素右边框之间的距离
padding-bottom:内容与元素底部边框之间的距离
paddingleft:内容与元素左边框之间的距离

默认带有内边距的元素：ol、ul、input、td

三、设置盒模型的计算方式　　box-sizing 指定盒模型的计算方式

取值：

conten-box 默认值，元素的width height属性只用来规定内容的尺寸，如果元素设置内外边距和边框，最终在文档中占据的尺寸由各种值相加得到

border-box 元素的width height属性，规定的是包含边框、内边距和内容在内的尺寸

四、元素的显示设置

1.设置元素的可见性 visibility：visible默认值　　hidden设置元素隐藏，元素在文档中仍然占位

2.转换元素类型 display：block转换为块元素　　inline转换为行内元素　　inline-block转换为行内块元素

　　特殊取值：none实现元素隐藏，元素在文档中不占位，其他元素会相应的移动

实现元素隐藏与现实：display：none；隐藏　　display：block；显示

五、背景相关的属性

1.backgorund-color 设置背景颜色，取颜色值

注意：所有元素默认的背景颜色是透明色，新建窗口的白色不是body的背景色，是浏览器渲染的结果

　　　背景颜色是从元素的边框位置开始绘制的，如果元素添加内边距，都会被渲染成相应的背景颜色

2.background-image 设置背景图片，取值url（）

注意：背景图片尺寸如果大于元素尺寸，图片仍然按照原始尺寸显示，超出元素的部分不可见

　　　背景图片的尺寸小于元素尺寸，浏览器会自动对背景图片重复平铺，直到铺满元素

　　　背景图片与背景颜色一样，不影响元素正常内容的显示

3.设置背景图片的重复方式 background-repeat

取值：repeat 默认值，沿水平和垂直方向平铺

　　　repeat-x 沿水平方向平铺

　　　repeat-y 沿垂直方向平铺

　　　no-repeat 不重复平铺

4.设置背景图片的位置 backfround-position

取值：x y　 x表示背景图片水平方向的偏移距离

　　　　　　正值表示图片向右偏移

　　　　　　负值表示图片向左偏移

　　　　  　y表示背景图片垂直方向的偏移距离

　　　　　　正值表示图片向下偏移

　　　　　　负值表示图片向上偏移

注意：结合“精灵图”实现元素背景图片调整，这种技术叫“精灵技术”

　　取百分比 　　参照元素尺寸计算水平和垂直偏移距离

　　0% 0%　　背景图片显示在元素左上角

　　50% 50%　　背景图片显示在元素中间

　　100% 100%　　背景图片显示在右下角