定位是什么

所谓定位，简单来说就是通过CSS样式属性设定HTML页面元素在运行时显示的位置。

定位的基本思想很简单，它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。

CSS实现定位的效果主要通过浮动( float )和定位( position)两个样式属性实现。

文档流

  • 文档流是HTML页面中元素在排列时所占用位置的一-种规则。理解好文档流的概念有助于学习CSS样式中的浮动和定位两块内容。
  • 将HTML页面中的元素自，上向下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。
  • 文档流是HTML页面的底层结构，HTML页面创建的元素默认都在文档流中。

注意:如果在一行中不能容纳所有的元素，则会换到下一-行，继续自左向右排列。有三种状况将使得元素离开文档流而存在，分别是浮动、绝对定位、固定定位。

浮动

float属性指定一个 元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该属性具有以下几个值: .

  • none:默认值，表示元素不浮动。
  • left: 表示元素必须要浮动在其所在容器的左侧。
  • right:表示元素必须要浮动在其所在容器的右侧。

设置为浮动后，该元素原来的位置会被下一个元素替代。当前元素设置浮动后，之影响当前元素后边的元素

所有元素都设置为浮动的话，块级元素排列顺序变为水平方向的排列,

块级元素的浮动

块级元素默认的宽度和高度

  • 宽度是父级元素宽度的100%
  • 高度是0或者所有后代元素高度之和

设置为浮动后

  • 宽度默认是0或者所有后代元素宽度之和
  • 高度默认是0或者所有后代元素高度之科

多个块级元素都设置为浮动后->垂直方向排列变为水平方向排列

如果占满父级元素宽度的100%后，会自动换行

内联元素

内联元素的默认宽度和高度

  • 宽度是内容的宽度- width属性是无效的

  • 高度是内容的高度- height 属性是无效的

内联元素设置为浮动后

  • width 和height属性有效
  • 多个内联元素依旧是水平排列

行内块级元素

行内块级元素设置为浮动后，元素之间的空白间隙被取消

浮动的特殊情况

父级与子级之间的浮动

为子级元素设置浮动不能超出父级元素的范围（与父级元素浮不浮动无关）

兄弟同时设置浮动

如果兄弟关系的两个元素，为下一个兄弟元素设置为浮动，下一个兄弟元素不会超过上一个兄弟元素的位置

文本与浮动的元素

文本内容与浮动的元素之间，文本内容不会被浮动的元素所覆盖，而是环绕在浮动元素的周围

清除浮动

clear属性设置元素是否显示在其之前元素的下方。该属性具有以下几个值:

  • none:表示元素不会向下移动清除之前的浮动。
  • left: 表示元素被向下移动用于清除之前的左浮动。
  • right: 表元素被向下移动用于清除之前的右浮动。
  • both: 元素被向下移动用于清除之前的左右浮动。
  • clear属性的使用可以分别以下两种情况:
  1. 使用clear属性为非浮动元素清除浮动时，该元素将移动到之前浮动元素的下方。
  2. 使 用clear属性为浮动元素清除浮动时，该元素将移动到之前浮动元素的下方，并且会影响之后浮
    动元素的布局。

伪类清除浮动

1
2
3
4
5
#container::after { 
  content: "";
  display: block; 
  clear: both;
}

高度塌陷

发生的场景

  1. 存在父子级关系
  2. 父级没有设置高度
  3. 子级元素设置浮动

解决方案：

  1. 为父级设置高度（不推荐）

  2. 块级格式化上下文（BFC）

    开启方式如下几种：

    1. 将元素设 置为浮动(元素的CSS样式属性float值不为none )

    2. 将元素 设置为绝对定位

    3. 将元素设 置为行内块级元素(元素的CSS样式属性display值为inline- -block )

    4. overflow属 性值设置不为visible的块级元素(一般情况下，值为hidden )

    多多少少会带有一些副作用

案例

京东垂直菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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>
        body{
            background-color: gray;
        }
        ul{
            background-color: white;
            width: 150px;
            list-style-type: none;
            padding: 0;
        }
        ul li{
            font-size: 14px;
            line-height: 25px;
            color: gray;
            padding: 0 7px ;
        }
        ul li:hover{
            color: lightcoral;
            background-color: lightgray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
</body>
</html>

京东水平菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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>
        body{
            background-color: gray;
        }
        ul{
            background-color: white;
            list-style: none;
            /* 去除项目符号所占空间 */
            padding-left: 0; 
            /* 解决高度塌陷问题 */
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 95px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        li:hover{
            background-color: violet;
        }
        li a{
            text-decoration: none;
            color: black;
        }
        ul li a{
            display: block;
            width: 100%;
            height: 40px;

        }
    </style>
</head>
<body>
    <ul>
        <li><a href='#'>测试1</a></li>
        <li><a href='#'>测试2</a></li>
        <li><a href='#'>测试3</a></li>
        <li><a href='#'>测试4</a></li>
        <li><a href='#'>测试5</a></li>
    </ul>
</body>
</html>