一、外边距
注意：垂直方向上的外边距，会发生合并，取较大的值
水平方向上的外边距，会发生叠加，元素之间的距离较大
为子元素添加距上的外边距，作用于父元素上：为父元素设置上边框（可以使用透明色）或者为父元素添加顶部的内边距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% 背景图片显示在右下角