适于新手小白的CSS的学习讲解（三）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 设置背景颜色 快捷键bgc */
            background-color: red;
            /* 设置背景图片 快捷键bgi */
            background-image: url(../day05/images/bg.jpg);
            /* 设置背景图片的平铺方式 repeat-x 水平方向平铺 repeat-y 垂直方向平铺 no-repeat 不平铺 repeat（默认值）*/
            background-repeat: repeat-x;
            /* 设置背景图片属性 */
            background-size: 100% 100%;
            /*设置背景图片的位置 水平位置 垂直位置 */
            background-position: 100px 0px;
            /* 简写background  颜色 背景图片 平铺方式 关联方式 position */
            background: blue url(../day05/images/bg.jpg) no-repeat fixed 20px 0px;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

- 背景关联方式

什么是背景关联方式？

默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式.

如何修改背景关联方式？

在CSS中有一个叫做background-attachment的属性，这个属性就是专门用于修改关联方式的

格式 background-attachment：scroll;

取值： scroll 默认值，会随着滚动条的滚动而滚动

fixed 不会随着滚动条的滚动而滚动

快捷键: ba background-attachment:;

-背景图片和插入图片区别?

背景图片仅仅是一个装饰, 不会占用位置插入图片会占用位置

背景图片有定位属性, 所以可以很方便的控制图片的位置插入图片没有定位属性, 所以控制图片的位置不太方便

插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

1.CSS布局

- 什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

- 标准流(文档流/普通流)排版方式

标准流(文档流/普通流)

-标准流(文档流/普通流)处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在标准流(文档流/普通流)中。

-元素在标准流(文档流/普通流)中的特点

块元素

1.块元素在标准流(文档流/普通流)中会独占一行，块元素会自上向下排列。

2.块元素在标准流(文档流/普通流)中默认宽度是父元素的100%

3.块元素在标准流(文档流/普通流)中的高度默认被内容撑开

内联元素

内联元素在标准流(文档流/普通流)中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
在标准流(文档流/普通流)中，内联元素的宽度和高度默认都被内容撑开

其实浏览器默认的排版方式就是标准流的排版方式
在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)

可选值： none，默认值，元素默认在标准流(文档流/普通流)中排列

left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动

right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动

当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离标准流(文档流/普通流)，元素脱离标准流(文档流/普通流)以后，它下边的元素会立即向上移动，那么这个时候前面一个元素就会盖住后面一个元素。

元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。

浮动的元素不会超过他上边的兄弟元素，最多一边齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            /* display: inline-block; */
            /* 浮动布局 可以让元素水平排版 float：left none（默认值）
            特性：脱离文档流原先位置不保留 飘在文档流上方
            */
            float: left;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <p>段落标签</p>
</body>
</html>

2.浮动流排版方式

- 浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

-注意点: 1.浮动流中没有居中对齐, 也就是没有center这个取值

2.在浮动流中是不可以使用margin: 0 auto;

-特点: 1.在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是块级元素/行内元素/行内块级元素都可以水平排版

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="../day05/images/bg.jpg" alt="背景图片">
    <div>块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素
    </div>
</body>
</html>

- 清除浮动

1.浮动元素对兄弟元素的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;

        }
        div:first-child{
            float: left;
        }
        div:last-child{
            background-color: blue;
            /* 清除浮动元素对兄弟元素的影响 */
            clear: both;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

2.浮动元素对父元素的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 10px solid red;
            margin-top: 10px;
        }
        .parent>div{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        /* 清除浮动 在浮动元素和非浮动元素之间添加一个空标签 给空标签清除浮动 */
        /* .clear{
            clear: both;
        } */
        .parent:nth-child(2)::after {
            display: block;
            content: "";
            clear: both;

        }
    </style>
</head>
<body>
    <div class="parent">hello css</div>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <!-- <div class="clear"></div> -->
    <div class="parent">hello css</div>
</body>
</html>

- 高度塌陷？（重点）

给子元素设置浮动后，父元素失去了高度支撑，发生高度塌陷。
解决方案：
1.给父元素设置高度
2.给父元素清除浮动使用伪元素清除浮动
::after{
display:block;
content:"";
clear:both
}

- 浮动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./download/font_bwhwvr13ji7/iconfont.css">
    <link rel="stylesheet" href="./header.css">
</head>
<body>
    <!-- 头部容器 -->
    <div class="header">
        <!-- 居中容器 -->
        <div class="box">
            <ul>
                <li><a href="#">登陆/注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">甄选家</a></li>
                <li><a href="#">企业采购&nbsp;&nbsp;<i class="iconfont icon-xiala"></i></a></li>
                <li><a href="#">客户服务</a></li>
                <li class="app"><a href="#">APP</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

引入：header.css

/* 去除标签默认样式 */
*{
    margin: 0;
    padding: 0;
  /* 取消列表标志项 */
    list-style: none;
}
.header{
    height: 36px;
    background-color: black;
}
    /* 设置居中容器样式 */
.header>.box{
    width: 1090px;
    height: 36px;
    /* 设置水平居中 */
    margin: 0 auto;
}
.header>.box>ul{
    float: right;
}
/* 给父元素除浮动 */
.header>.box::after{
    display: block;
    content: "";
    clear: both;
}
.header>.box>ul>li{
    float: left;
    line-height: 36px;
    margin-right: 10px;
}
/* 给a标签文本设置样式 */
.header>.box>ul>li>a{
    text-decoration: none;
    color: #c7c7c7;
    border-right: 1px solid #c7c7c7;
    font-size: 14px;
    padding-right: 10px;
}
/* 鼠标悬浮a标签样式设计 */
.header>.box>ul>li>a:hover{
    color: #fff;
}
/* 给最后一个a标签取消样式 */
.header>.box>ul>.app>a{
    border-right: none;
}
/* 给ul清浮动 */
.header>.box>.ul::after{
    display: block;
    content: "";
    clear: both;
}

运行后：

css中外边距合并问题？（重点）

1.兄弟级外边距合并
原因：一个兄弟元素设置了下外边距，另一个兄弟元素设置了上外边距，发生外边距合并现象
合并规则：{
1.如果两个值都为正数，取最大外边距合并
2.如果一个值是正数，另一个值是负数取外边距之和
3.如果两个值都为负数，取最小外边距绝对值进行缩减
}
解决方案：
1.给其中一个元素设置外边距，另一个不设置
2.给下方兄弟元素元素开启BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 10px;
        }
        .two{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 20px;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

运行截图说明：

2.父子级外边距合并
原因：给子元素和父元素设置同一方向外边距就发生合并现象
合并规则：{
1.如果两个值都是正数，取最大的外边距合并
2.如果一个值是正数，另一个值是负数，取外边距之和
}
解决方案：
1.给父元素设置内边距，不给子元素设置外边距，可以将父元素设置为border-box
2.给父元素设置一个边框
3.给父元素开启BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
            /* 1.不给子元素设置外边距 给父元素设置内边距 */
            /* padding: 20px; */
            /* 如果不想让父元素盒子发生变化 设置边框盒子 */
            /* box-sizing: border-box; */
            /* 给父元素设置一个边框 */
            /* border: 1px solid blue; */
            /* 给父元素开启属性 */
            overflow: hidden;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

运行截图：

接下来讲讲上述提到的BFC属性

- BFC属性

BFC(Block Formatting Context)块级格式化上下文，把BFC当作是元素的一种属性，
只要元素拥有了这种属性，就成为独立的一块渲染区域，容器内的元素不会影响到容器外的元素
1.如何触发BFC
1.html
2.float不为none
3.position为absolute和fixed
4.display:inline-block
5.overflow不为visible hidden auto
2.BFC作用：
1.避免外边距重叠
2.清除浮动
3.阻止元素被浮动元素覆盖
4.两列布局
5.三列布局

本专题就到这里，BFC属性会在下个专题详细讲解。