系列文章目录

前端学习 01 —— HTML5
前端学习 02 —— CSS01
前端学习 02 —— CSS 02
前端学习 02 —— CSS 03
前端学习 03 —— JavaScript 01
前端学习 03 —— JavaScript 02

文章目录

系列文章目录
5、浮动
6、定位

5、浮动

5.1、标准文档流

正常的网站我们看到的都是左边这种，而右边这种没有经过布局修饰的属于标准文档流。

行内元素（内联元素）：可以放在一行，例如span、a、img…

块级元素：独占一行，例如p、h1~h6、div、列表…

行内元素可以被块级元素包含，反之则不行。

5.2、display

可以将块级或是行内元素进行转换，例如本来块级元素独占一行，可以通过display使其不独占一行。通过display来实现行内元素的排列，但我们更多是通过float实现，因为float是把元素浮在父类元素上，比较独立。

没有使用display：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
     
     
            width: 150px;
            height: 150px;
            border: 2px solid red;
        }
        span{
     
     
            width: 150px;
            height: 150px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
<div>这是块级元素</div>
<span>这是行内元素</span>
</body>
</html>

在这里插入图片描述

可以发现，行内元素的宽高没有起作用。而给div和span使用display后

/*inline 行内元素，block块级元素，inline-block保留块宽高特性且不独占一行*/
display: inline-block;

5.3、float

通过float属性，可以使元素左右浮动在父类上，光是这样的浮动是动态的，也就是布局会随着页面变化，导致极为混乱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/1.png" width="180" height=120"></div>
    <div class="layer02"><img id="img2" src="images/2.jpg" width="250" height="250"></div>
    <div class="layer03"><img src="images/3.png" width="100" height="140"></div>
    <div class="layer04">
         浮动的盒子可以向左也可以向右移动，
        直到它的边缘碰到包含框或另一个浮动的盒子为止.
    </div>
</div>
</body>
</html>

div{
    
    
    margin: 10px;
    padding: 5px;
}
#father{
    
    
    border: 3px solid red;
}
.layer01{
    
    
    border: 3px solid red;
    display: inline-block;
    float: right;
}
.layer02{
    
    
    border: 3px solid red;
    display: inline-block;
    float: left;
}
.layer03{
    
    
    border: 3px solid red;
    display: inline-block;
}
.layer04{
    
    
    border: 3px solid red;
    font-size: 10px;
    line-height: 10px;
    display: inline-block;
}

浮动前结果：

浮动后结果：

改变浏览器页面大小后：

5.4、解决父级边框塌陷问题

前面的float属性比display要好，因为float可以改变方向，向左向右浮动，而display只能紧贴上一个行内元素。但是float也有一个问题，若我们内部元素都设置float就会导致内部元素为空，而父级的边框因为没有内容就会塌陷。例如下面这样，将所有元素都设置向左浮动：

可以看到，因为内部元素都浮动到外面，导致父级的边框塌陷了。

解决这个问题有四种方式，在这之前先知道一个属性 clear，它可以清除浮动效果。

1、增加父级元素的高度。这是比较low的方式，直接写死高度，自然不会塌陷。

2、设置一个清除两侧浮动的空div。

/* clear:both 是判断该元素两侧是否有浮动元素，
   只要有一侧有，该元素就会自动换到下一行。*/
#clear{
    
    
    clear: both;
    margin: 0;
    padding: 0;
}

缺点：HTML中会有空的div，不符合规范。

3、通过overflow属性。overflow是当内容溢出时，可以选择增加滑动条或是隐藏内容。

/*父级元素增加overflow:hidden，因为父级的div没有设置宽高，
它的宽高是被内容撑起来的，因此它浮动的内容仍然是可见的。
若把hidden换为scroll就会出现滚动条。*/
#father{
    
    
    border: 3px solid red;
    overflow: hidden;
}

4、（推荐使用）通过伪类after。在父级元素增加如下代码。

/*市面上最常用的方式，after是表明在father后面的新东西，conten使内容为空，
同时使该元素为块级并清除浮动。该方式和空div的方式类似，但避免了HTML中出现垃圾代码。*/
#father:after{
    
    
    content: "";
    display: block;
    clear: both;
}

效果：

6、定位

6.1、相对定位

相对定位是根据自己原先的位置进行偏移。需要注意的是，这里面top、right、bottom、left多是指当前元素距离那个方向的距离，若top:20px，则当前元素距离上方20px，所以会向下偏移20px，因此若需要向上偏移则写-20px。

注意：相对定位会保留原来位置,其他元素不会占用，它任然在标准文档流中。

#father{
    
    
    padding: 10px;
    border: 2px solid red;
    width: 300px;
    height: 300px;
}
a{
    
    
    width: 100px;
    height: 100px;
    color: white;
    background: #ff6eb1;
    text-align: center;
    text-decoration: none;
    line-height: 100px;
    display: block;
}
a:hover{
    
    
    background: #9bfcff;
}
/*需要设置position为relative*/
.a2, .a4{
    
    
    position: relative;
    left:200px;
    top:-100px;
}
.a5{
    
    
    position: relative;
    left:100px;
    top:-300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <a class="a1" href="#">1</a>
    <a class="a2" href="#">2</a>
    <a class="a3" href="#">3</a>
    <a class="a4" href="#">4</a>
    <a class="a5" href="#">5</a>
</div>
</body>
</html>

结果：

6.2、绝对定位和固定定位

绝对定位就是位置固定死，若父类没有指定position（无论什么定位都可以），则绝对定位是相对于浏览器的。而固定定位则是位置固定不动，即便浏览器大小改变也不影响，常用于导航栏或是返回顶部之类的按钮。

注意：绝对定位和固定定位的top、right、bottom、left也是到该方向的距离，但它们和相对定位不同，不会在原位置保留，会脱离标准文档流，也就是说可能发生重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选择div的父级元素下第一个div 即div1*/
        div:nth-of-type(1){
     
     
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
     
     
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

此时绝对定位div1和固定定位都在浏览器右下角：

若将浏览器往上拉动，绝对定位div1会向上移动，而div2则始终位于浏览器右下角：

6.4、z-index

z-index属性可以改变该元素的图层位置，当两元素发生重叠时，通过z-index可以使某个元素在上面。

/*先清除一些标签的边距*/
body, div, ul, li{
    
    
    margin: 0;
    padding: 0;
}
/*清除li前面圆点*/
ul li{
    
    
    list-style: none;
}
/*定义外部div属性*/
#app{
    
    
    border: 2px solid red;
    width: 280px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 25px;
}
/*设置父级元素相对定位，旗下的li用绝对定位就能于ul*/
#app ul{
    
    
    position: relative;
}
/*设置两个li的位置，这里要设置宽高，否则tipBg无法显示*/
.tipText, .tipBg{
    
    
    position: absolute;
    top: 195px;
    color: white;
    width: 280px;
    height: 25px;
}
/*这里如果没有z-index，tipText会被tipBg覆盖，
因为它们通过绝对定位会脱离标准文档流，重叠在一起。
通过给tipText设置z-index：2，使其在第二层。*/
.tipText{
    
    
    z-index: 2;
    text-align: center;
}
.tipBg{
    
    
    background: grey;
    /*背景透明度*/
    opacity: 0.5;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
    <ul>
        <li><img src="images/1.png" ></li>
        <li class="tipText">汪星人大作战</li>
        <li class="tipBg"></li>
        <li>上映时间：2021年1月29日</li>
        <li>上映地点：各大影院</li>
    </ul>
</div>
</body>
</html>

没有z-index的效果：

使用z-index加上透明度的效果：

前端学习 02 —— CSS 03