css基础3

今天是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>

垂直外边距溢出：当我们给一个子元素设置垂直溢出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的请求，提高页面打开速度。

css基础3

未完，待续！