前端基础（五）------浮动与定位

最新推荐文章于 2024-05-20 22:14:20 发布

零度℃192

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量197

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_70761095/article/details/128501047

版权

1.浮动

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。主要用于设置块元素的水平排列。属性：float

值	描述
left	元素向左浮动
right	元素向右浮动

元素设置浮动会从原始位置脱流，在文档中不再占位。

文档流：浏览器在渲染显示网页内容的时候采用的一套排版规则

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，

<style>
    .parent {
        width: 800px;
        height: 400px;
        border: 10px solid blue;
    }

    .box1 {
        width: 250px;
        height: 80px;
        background-color: #ed7d31;
    }

    .box2 {
        width: 400px;
        height: 100px;
        background-color: #70ad47;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: #7030a0;
    }
</style>

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

浮动之后的文档流

<style>
    .parent {
        width: 800px;
        height: 400px;
        border: 10px solid blue;
    }

    .box1 {
        float: left;
        width: 250px;
        height: 80px;
        background-color: #ed7d31;
    }

    .box2 {
        width: 400px;
        height: 100px;
        background-color: #70ad47;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: #7030a0;
    }
</style>


<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
任何的标签都可以添加浮动属性。
浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示。内容围绕在浮动元素周围显示
- 不给img加浮动情况下，图片的底端会与第一行文字的底端对齐。给img加浮动之后，可以实现图文环绕的布局效果。

<style>
    .parent {
        width: 435px;
        height: 400px;
        border: 10px solid blue;
    }

    img {
        float: left;
    }
</style>

<div class="parent">
  <img src="http://static.zzhitong.com/lesson-files/html/img/9-10.jpg" height="210" alt="">
  豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。 时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。
</div>

浮动元素父级高度塌陷**

当父级元素没有设置高度时，高度会由文档流内容撑开。而当子元素浮动之后，脱离了文档流，所以父级高度不会被撑开，这对我们后续的布局结构会造成很多困扰。

对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
在父元素的末尾添加空的块元素。设置clear:both;清除浮动
为父元素设置overflow:hidden;解决高度为0

2.定位

定位postion属性，可以让我们将元素从文档流中取出，然后使用方位词属性（left top right bottom）精准的控制它的位置。

不同的定位值可以使元素拥有不同的表现形式，例如放在另外一个元素上面或者固定在浏览器的显示区某个位置。

相对定位relative

相对定位能让元素保持原文本流位置的同时，可以通过方位属性进行相对于原位置的偏移。

定位元素才有的方位属性： top | bottom | left | right，值一般使用px单位或%值。

特点：

不会脱离文档流
不影响元素本身的任何特性
如果不加方位词偏移那么没有任何影响

绝对定位absolute

绝对定位能让元素脱离文档流（原地起飞...），使用方位属性相对于最近的有定位的父级元素进行偏移；

特点：

脱离文档流
元素宽高默认值为0
找不到最近的定位父级则相对于body标签
一般配合相对定位使用（参照物）
会将元素转换有行内块元素特点
设置了绝对定位,没有设置层级;html后写居上
margin:auto 暂时失效

固定定位fixed

固定定位能让元素脱离文档流，使用方位属性相对于浏览器可视区进行偏移

特点

脱离文档流
元素宽高默认值为0
margin:auto失效

盒子居中

使用定位让元素在父级中居中的方式：

position: absolute;
top: 50%;
left: 50%;
margin-left: -自身宽度一半;
margin-top: -自身高度一半;

3.作业

第八章 position定位 Z-index层级案例

4.解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美人经</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }

        .box{
            position: relative;
            height: 50px;
            padding-top: 50px;
            margin-top: 50px;
        }


        .box1{
            height: 1px;
            background-color: black;
        }


        .box2{
            position: absolute;
            left: 50%;
            top: 0;
            width: 420px;
            height: 100px;
            margin-left: -210px;
            background: #fff url("https://static.zzhitong.com/lesson-files/html/img/10-1-images/1.jpg") no-repeat 20px -522px;
        }


        .yyds{
            position: relative;
            width: 1000px;
            height: 630px;
            margin: 20px auto;
        }

        .yyds1{
            position: relative;
            width: 1000px;
            height: 500px;
        }

        .yyds1 li{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 500px;
        }


        .yyds1-txt{
            position: absolute;
            bottom: -76px;
            left: 50%;
            margin-left: -444.5px;
            padding: 30px;
            width: 829px;
            height: 92px;
            background-color: rgba(0, 0, 0, .7);
        }

        .yyds1-txt a{
            color: white;
        }

        .yyds1-txt h3{
            float: left;
            width: 300px;
            padding-right: 20px;
            border-right: 1px solid #ccc;
            font-size: 24px;
            font-weight: 400;
            padding-top: 10px;
        }

        .yyds1-txt p{
            float: left;
            padding-top: 10px;
            width: 485px;
            padding-left: 20px;
            font-size: 13px;
        }

        .yyds2{
            position: absolute;
            top: 50%;
            width: 57px;
            height: 73px;
            background: url("https://static.zzhitong.com/lesson-files/html/img/10-1-images/3.png") no-repeat;
        }

        .left{
            background-position-y: -80px;

        }

        .right{
            right: 0;
            background-position-y: -140px;
        }



    </style>
</head>
<body>

    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>

    </div>

    <div class="yyds">
        <div class="yyds1">
            <ul>
                <li>
                    <div class="yyds1-img">
                        <a href="#">
                            <img src="https://static.zzhitong.com/lesson-files/html/img/10-1-images/2.jpg" alt="">
                        </a>
                    </div>
                    <div class="yyds1-txt">
                        <a href="#">
                            <h3>5分钟就能搞定的时髦派对妆 秒杀大红唇和烟熏眼</h3>
                            <p>
                                红唇与烟熏妆曾是派对妆的“标配”，这个过时的规则早就该打破了。今年秋冬的彩妆流行是简洁时髦的美感：一抹亮片眼影，一个出其不意的眼线，一只镇住全场的唇膏。既然能花5分钟就搞定的派对妆，为什么要花一个小时呢？</p>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="left yyds2"></div>
        <div class="right yyds2"></div>
    </div>


</body>
</html>

零度℃192

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础（五）------浮动与定位

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。属性：float文档流：浏览器在渲染显示网页内容的时候采用的一套排版规则块级元素：从上往下，垂直布局，独占一行行内元素或行内块元素：从左往右，水平布局，浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动任何的标签都可以添加浮动属性。浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示。内容围绕在浮动元素周围显示不给img加浮动情况下，图片的底端会与第一行文字的底端对齐。
复制链接

扫一扫