浮动(float)

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

普通流（标准流）

块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用元素：span、a、i、em等

浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

定位

将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
虽然我们前面学过行内块（inline-block）但是他却有自己的缺陷：

它可以实现多个元素一行显示，但是中间会有空白缝隙
它不能实现左青龙右白虎的布局盒子左右对齐

浮动(float)

概念：元素的浮动是指设置了浮动属性的元素会

脱离标准普通流的控制
移动到指定位置。
作用
让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等..
浮动最早是用来控制图片，实现文字环绕图片的效果。
浮动布局实现三个盒子在一个水平线上挨着

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one,
        .two{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
        .one{
            float: left;
            /*width: 200px;*/
            /*height: 200px;*/
            /*border: 1px solid red;*/

        }
        .two{
            background-color: pink;
            float: left;

        }
        .three {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right;

        }
    </style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>

浮动(float)的扩展

1). 浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border: 20px solid red;
            padding: 20px;
        }
        .son{
            float: right;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>

</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

image

2). 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

 float: left;
            width: 100px;
            height: 100px;
            background-color: red;

image

定位

CSS 布局的三种机制

普通流（标准流）
浮动
- 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。
定位
- 将盒子定在某一个位置自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。

标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）

定位详解

定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移

边偏移

image

定位模式 (position)
在 CSS 中，通过 position 属性定义元素的定位模式，语法如下

选择器 { position: 属性值; }

image

静态定位(static) - 了解

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，不要定位的时候用。
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的

相对定位(relative) - 重要

相对定位是元素相对于它原来在标准流中的位置来说的。（自恋型）
相对定位的特点：（务必记住）

相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .two{
            background-color: red;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
<div>3</div>

</body>
</html>

image

绝对定位(absolute) - 重要

绝对定位是元素以带有定位的父级元素来移动位置（拼爹型）

完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）

父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位,将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
绝对定位的特点：（务必记住）

绝对是以带有定位的父级元素来移动位置（拼爹型）如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的。
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

绝对定位以带有定位的父级元素来移动位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yeye{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            position: absolute;
        }
        .father{
            width: 350px;
            height: 350px;
            background-color: pink;
            margin: 100px;
            position: relative;

        }
        .son{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            margin-left: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>

</head>
<body>
<div class="yeye">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>

image

绝对定位的盒子是不占有原来位置的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            position: relative;
        }
        .son-da{
            position: absolute;
            top: 20px;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son-xiao{
            width: 250px;
            height: 250px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son-da"></div>
    <div class="son-xiao"></div>
</div>
</body>
</html>

image

定位口诀 —— 子绝父相

绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？

子绝父相 —— 子级是绝对定位，父级要用相对定位。

image

分析：

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
- 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。
  结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            /*position: relative;*/
            position: absolute;
            width: 1000px;
            height: 90px;
            background-color: yellowgreen;
        }
        .down{
            width: 1000px;
            height: 150px;
            background-color: skyblue;
        }
        .arr-l{
            position: absolute;
            top: 20px;
            left: 0;
            width: 40px;
            height: 40px;
            background-color: red;
        }
        .arr-r{
            position: absolute;
            top: 20px;
            right: 0;
            width: 40px;
            height: 40px;
            background-color: red;
        }
    </style>

</head>
<body>
<div class="up">
    <img src="../imgs/img.jpg" alt="">
    <div class="arr-l"></div>
    <div class="arr-r"></div>
</div>
<div class="down"></div>
</body>
</html>

image

固定定位(fixed) - 重要

固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形

完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。

绝对定位的盒子居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*    !*水平居中*!*/
        /*    position: absolute;*/
        /*    left: 50%;*/
        /*    margin-left: -150px;*/
        /*    width: 300px;*/
        /*    height: 300px;*/
        /*    background-color: skyblue;*/
        /*    !*margin: 0 auto适用于标准流居中*!*/
        /*    !*margin: 0 auto;*!*/
        /*}*/

        /*div {*/
        /*    !*垂直左居中*!*/
        /*    position: absolute;*/
        /*    top: 50%;*/
        /*    margin-top: -100px;*/
        /*    width: 300px;*/
        /*    height: 200px;*/
        /*    background-color: skyblue;*/
        /*    !*margin: 0 auto适用于标准流居中*!*/
        /*    !*margin: 0 auto;*!*/
        /*}*/

        div {
            /*垂直右居中*/
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -100px;
            width: 300px;
            height: 200px;
            background-color: skyblue;
            /*margin: 0 auto适用于标准流居中*/
            /*margin: 0 auto;*/
        }

    </style>

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

堆叠顺序（z-index）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one, .two, .three{
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
        .three{
            top: 100px;
            left: 100px;
            background-color: blue;
        }
        .one{
            z-index: 2;
        }
        .two{
            z-index: 1;
            top: 50px;
            left: 50px;
            background-color: red;
        }

    </style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

</body>
</html>

定位改变display属性

前面我们讲过， display 是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。
所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。（我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

display 显示（重点)

display 设置或检索对象是否及如何显示。

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            /*这里除了说明是块元素， 也有显示元素的意思*/
            /*display: block;*/
            /*隐藏元素不保留位置*/
            display: none;
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .two{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>

</head>
<body>
<div class="one"></div>
<div class="two"></div>

</body>
</html>

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛

CSS-浮动、定位

CSS-浮动、定位

浮动(float)

普通流（标准流）

浮动

定位

浮动(float)

浮动(float)的扩展

1). 浮动元素与父盒子的关系

2). 浮动元素与兄弟盒子的关系

定位

CSS 布局的三种机制

定位详解

边偏移

静态定位(static) - 了解

相对定位(relative) - 重要

绝对定位(absolute) - 重要

绝对定位以带有定位的父级元素来移动位置

定位口诀 —— 子绝父相

子绝父相 —— 子级是绝对定位，父级要用相对定位。

固定定位(fixed) - 重要

绝对定位的盒子居中

堆叠顺序（z-index）

定位改变display属性

display 显示（重点)