Blogger Information
Blog 14
fans 1
comment 0
visits 11696
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2019.9.4作业 CSS浮动及各种定位
Léon的博客
Original
803 people have browsed it

一. 实例演示如何消除子元素浮动造成父元素高度折叠的影响

    浮动:float。值:left左浮动,right右浮动,none默认值不浮动,inherit继承父元素浮动效果

    当元素设置浮动时,元素会脱离文档流,元素在文档流中的位置会被没有浮动属性的下一个元素占用。

    当子元素设置浮动后,子元素脱离了父元素内的空间,父元素会塌陷,尺寸会改变。

    为了使父元素不受子元素浮动的影响,有以下四种方法:

    1:设置父元素的尺寸

        此方法缺点:当子元素高度变化时,父元素高度不会随之改变,需要一并设置。如下图

        1.PNG

    2、为父元素设置浮动属性。此方法缺点,当父元素还有父元素时,问题依然存在。如下图

        2.PNG

    3、在父元素中添加一个块元素,设置清除浮动。此方法缺点:出现冗余元素,对后端工程师不利。

    4、为父元素添加属性overflow: hidden; 推荐使用此方法,简单且无副作用。

    以上方法代码如下:

    

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        /* 父元素没有设置高度,子元素没有设置浮动时,子元素占据了父元素内的空间,
           父元素的高度为其所有子元素高度和及边框、padding、margin的和 */
        
        .box1 {
            width: 300px;
            border: 3px solid black;
        }
        
        .box2 {
            width: 300px;
            height: 300px;
            background-color: lightcoral;
        }
        /* 当子元素设置浮动时,子元素脱离父元素的空间,父元素高度会塌陷 */
        
        .box2 {
            float: left;
        }
        /* 为防止父元素塌陷,有以下4种方法 */
        /* 1、为父元素设置高度。此方法缺点:当子元素高度变化时,父元素高度不会随之改变,需要一并设置 */
        
        .box1 {
            height: 300px;
        }
        
        .box2 {
            height: 200px;
        }
        /* 2、为父元素设置浮动属性。此方法缺点,当父元素还有父元素时,问题依然存在。 */
        
        #yanshi {
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        
        #out {
            width: 300px;
            border: 2px dashed red;
        }
        
        .box3 {
            width: 300px;
            border: 3px solid yellow;
            float: left;
        }
        
        .box4 {
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }
        /* 3、在父元素中添加一个块元素,设置清除浮动。此方法缺点:出现冗余元素,对后端工程师不利 */
        
        .box5 {
            width: 300px;
            border: 3px solid black;
        }
        
        .box6 {
            width: 300px;
            height: 300px;
            background-color: coral;
            float: left;
        }
        
        .clear {
            clear: both;
        }
        /* 4、为父元素添加属性overflow: hidden; 推荐使用此方法,简单且无副作用 */
        
        .box7 {
            width: 300px;
            border: 3px solid black;
            overflow: hidden;
        }
        
        .box8 {
            width: 300px;
            height: 300px;
            background-color: gray;
            float: left;
        }
    </style>
    <title>消除子元素浮动对父元素的塌陷影响</title>
</head>

<body>
    <div class="box1">
        <div class="box2">
            我是子元素
        </div>
    </div>
    <hr>
    <div id="yanshi">
        <div id="out">
            <div class="box3">
                <div class="box4">
                    我是子元素
                </div>
            </div>

        </div>
    </div>
    <hr>
    <div class="box5">
        <div class="box6">
            我是子元素
        </div>
        <div class="clear">
        </div>
    </div>
    <hr>
    <div class="box7">
        <div class="box8">
            我是子元素
        </div>
    </div>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)

CSS定位语法:position:属性值;left:左侧距离;right:右侧距离;top:顶部距离;bottom:底部距离;

position属性值有以下几种:

    1、static:静态定位。文档流定位,流动布局。此为默认值。

    2、relative:相对定位。元素没有脱离文档流,定位基准点为元素没有定位时的左上角点。

    3、absolute:绝对定位。元素脱离文档流,定位基准点为最接近的一个具有定位属性的父级元素的左上角点。

    4、fixed:固定定位。直接以浏览器窗口作为参考进行定位,它是浮动在页面中,元素位置不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小

以下是用绝对定位实现三列布局的代码:

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .container {
            width: 100%;
            margin: 0 auto;
        }
        
        .header,
        .footer {
            color: white;
            height: 50px;
            background-color: black;
        }
        
        .main {
            min-height: 800px;
            background-color: lightblue;
            margin: 2px auto;
        }
        
        .left,
        .right {
            width: 20%;
            min-height: inherit;
        }
        
        .left {
            background-color: lightcoral;
        }
        
        .right {
            background-color: lightslategray;
        }
        
        .content {
            min-height: inherit;
            background-color: limegreen;
        }
        /* 以下开始定位 */
        /* 先设置main为相对定位,作为一个有定位的父元素 */
        
        .main {
            position: relative;
        }
        /* 定位左边栏 */
        
        .left {
            position: absolute;
            left: 0;
            top: 0;
        }
        /* 定位右边栏 */
        
        .right {
            position: absolute;
            right: 0;
            top: 0;
        }
        /* 中央内容部分需要使用margin挤压出来 */
        
        .content {
            margin: 0 20%;
        }
    </style>
    <title>三列布局之绝对定位</title>
</head>

<body>
    <!-- 根元素 -->
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            我是头部
        </div>
        <!-- 内容部分 -->
        <div class="main">
            <div class="left">
                我是左边栏
            </div>
            <div class="content">
                我是中央内容
            </div>
            <div class="right">
                我是右边栏
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            我是底部
        </div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

用浮动定位制作三列布局时,要注意为父元素添加overflow:hidden属性,使父元素不受子元素浮动的影响,以下是浮动布局制作三列布局的代码:

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .container {
            width: 100%;
            margin: 0 auto;
        }
        
        .header,
        .footer {
            color: white;
            height: 50px;
            background-color: black;
        }
        
        .main {
            min-height: 800px;
            background-color: lightblue;
            margin: 2px auto;
        }
        
        .left,
        .right {
            width: 20%;
            min-height: inherit;
        }
        
        .left {
            background-color: lightcoral;
        }
        
        .right {
            background-color: lightslategray;
        }
        
        .content {
            width: 60%;
            min-height: inherit;
            background-color: limegreen;
        }
        /* 以下开始定位 */
        /* 使左边栏向左浮动 */
        
        .left {
            float: left;
        }
        /* 使右边栏向右浮动 */
        
        .right {
            float: right;
        }
        /* 使中央内容部分向左浮动 */
        
        .content {
            float: left;
        }
        /* 为main清除子元素浮动影响 */
        
        .main {
            overflow: hidden;
        }
    </style>
    <title>三列布局之浮动定位</title>
</head>

<body>
    <!-- 根元素 -->
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            我是头部
        </div>
        <!-- 内容部分 -->
        <div class="main">
            <div class="left">
                我是左边栏
            </div>
            <div class="content">
                我是中央内容
            </div>
            <div class="right">
                我是右边栏
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            我是底部
        </div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结

1、文档流:元素像排队一样依次排列。

2、float:元素添加float属性后脱离了文档流,就像一楼有一队人排成一列,有浮动的人的人跑到了二楼排成一排,一楼原来的位置被下一个没有去二楼的人占用。

3、子元素添加浮动以后脱离了文档流,父元素空间就塌陷了,就像将充满水的气球里面的水倒了出来,气球就瘪了。解决的方法有以下几种

    (1)设置父元素的尺寸。此方法缺点:当子元素高度变化时,父元素高度不会随之改变,需要一并设置。

    (2)为父元素设置浮动属性。此方法缺点,当父元素还有父元素时,问题依然存在。

    (3)在父元素中添加一个块元素,设置清除浮动。此方法缺点:出现冗余元素,对后端工程师不利。

    (4)为父元素添加属性overflow: hidden; 推荐使用此方法,简单且无副作用。

4、相对定位:重点为元素不脱离文档流,定位点时元素原位置的左上角点。

5、绝对定位:重点为元素脱离了文档流,定位点是最近的具有定位属性的父元素的左上角点,如果父元素都没有定位属性,则以body的左上角点为定位点,相当于固定定位。


Correction status:qualified

Teacher's comments:总结的相当给力
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post