博客列表 >2019.9.4作业 CSS浮动及各种定位

2019.9.4作业 CSS浮动及各种定位

Léon的博客
Léon的博客原创
2019年09月05日 15:05:00802浏览

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

    浮动: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的左上角点为定位点,相当于固定定位。


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议