今天是2019年6月20日，在这里跟大家分享css基础中外边距、内边距、背景等相关属性的设置及一些问题的解决！话不多说，直接上知识点。
一、轮廓
- 定义：围绕在边框外围的一条线，作用起到突出显示功能
- 属性：outline：width style color
- 备注：outline：none表示无轮廓
- 使用场景：表单轮廓 去除轮廓
二、按钮
- 定义：<input type="button">或<button></button>
三、盒子模型（框模型）
- 框模型：一个元素就是盒子或者框（双标签），给一个元素设置宽高，放内容。
- 盒子模型：定义元素内容、内边距、边框、外边距的处理样式。
- 当框模型介入到元素中，元素的实际尺寸是：
- 左右边框+左右内边距+内容宽度
- 上下边框+上下内部距+内容高度
四、外边距
- 定义：围绕元素周围的空白区域，拉开当前元素和其他元素之间的距离
- 属性：margin 属性值：px，百分比或者auto
- 注意：
- margin取值为1个时：代表的是上下左右四个方向。
- margin取值为2个时：x1代表的是垂直方向，x2代表的是水平方向。
- margin取值为3个时：x1代表的是上，x2代表的是水平方向， x3代表的是下。
- margin取值为4个时：代表的是上下左右四个方向。
- 备注：
- 取值auto使用场景：块元素水平居中，只需要设置margin-left:auto和margin-right:auto。合并就是margin：0 auto。
- 水平居中的前提：需要有指定的宽度
- 单向定义：margin-方向（top bottom left right） 取值：同上
- 负数的使用：margin给正值往相反方向移动，margin给负值往相同方向移动
- 使用场景：用于微调元素的位置
- 问题
- 垂直外边距合并：当两个垂直外边距相遇时，会合并成一个外边距，最终的值取决于两者中较大的一个。
- sample：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直外边距合并</title> <style> div { width: 300px; height: 300px; background: #008000; } #box1 { margin-bottom: 30px; } #box2 { margin-top: 20px; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
- sample：
- 垂直外边距溢出：当我们给一个子元素设置垂直溢出margin时，如果子元素前面没有任何内容，且父元素没有边框，这个时候子元素垂直margin会溢出作用到父元素上。
- 解决方案：
- 给父元素加边框
- 取消子元素的外边距，增加父元素的内边距
- 在子元素前面加一个空的table标签
- 内容生成：
- 原理：可以通过css向一个元素的前面（作为第一个子元素插入）或者后面（作为最后一个子元素插入）加入一个标签（定义标签属性）
- 格式：before {content:"插入元素的内容" xx; height:xx; background:xx;.....}
- sample
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>溢出生成</title> <style> .box, #box { width: 200px; height: 200px; background: #008000; } #box { background: #0000FF; } #box:before { content: ""; display: table; } .child { width: 80px; height: 80px; background: #E4393C; margin-top: 100px; } </style> </head> <body> <div class="box"></div> <div id="box"> <div class="child"></div> </div> </body> </html>
- 垂直外边距合并：当两个垂直外边距相遇时，会合并成一个外边距，最终的值取决于两者中较大的一个。
五、内边距
- 定义：元素边框与内容之间的距离
- 属性：padding
- padding取值为1个时：代表的是上下左右四个方向。
- padding取值为2个时：x1代表的是垂直方向，x2代表的是水平方向。
- padding取值为3个时：x1代表的是上，x2代表的是水平方向， x3代表的是下。
- padding取值为4个时：代表的是上右下左四个方向。
- 注意：当给一个元素设置内边距时，会撑开元素的实际宽高，宽高需要保持不变的情况下，需要width/height减去定义的尺寸。
- 单向定义：padding-方向
- 备注：行内元素不可以设置宽高，可以padding撑开
六、背景相关属性
- 背景颜色：background-color
- 背景图片：background-image
- 背景重复：background-repeat
- repeat：重复（默认值）
- no-repeat：不重复
- repeat-x：水平方向重复
- repeat-y：垂直方向重复
- 背景图片尺寸：background-size 两个值，以空格分割
- 备注：
- contain：等比例放大背景图，直到背景图的宽度或者高度有一个适应元素的宽高截止。
- cover：等比例放大背景图，直到背景图的宽度和高度都覆盖了元素宽高截止。
- 备注：
- 背景图片固定：background-attachment
- 值：
- scroll：背景图会跟随滚动条的滚动而滚动
- fix：背景图固定
- 值：
- 背景图定位：background-position 两个值，以空格分割
- 第一个值 水平偏移距离 正值 右移动
- 第二个值 垂直偏移距离 正值 下移动
- 背景综合属性：background：color url() repeat attachment position
- 注意：background-size 如果需要定义背景尺寸，不能使用背景属性必须使用background-size属性
- 常用：background：url() repeat position;
- 精灵图：sprite 雪碧图 将若干个小图合并成一张大图
- 好处：可以减少http的请求，提高页面打开速度。