静态定位（文档流）、浮动定位、清除浮动、相对定位、绝对定位、绑定定位、静态布局、响应式布局

最新推荐文章于 2023-07-18 18:18:06 发布

Chains-X ♔

最新推荐文章于 2023-07-18 18:18:06 发布

阅读量352

点赞数

分类专栏： WEB前端文章标签： web前端浮动定位

本文链接：https://blog.csdn.net/mk1843109092/article/details/100171254

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

浮动

文档流

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动的特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

7、浮动元素之间没有垂直margin的合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div{
            width: 200px;
            /*height: 200px;*/
        }
        .box1{
            background: green;
            /*浮动
                左浮动: float:left;
                右浮动:float:right;
                1.浮动会让元素脱离文档流,后面不浮动的元素会占据原来的位置
                2.停止浮动:
                    a.碰到父级元素的边界会停止
                    b.碰到前面有浮动的元素(紧跟在浮动元素之后排列)
                    c.当碰到没有浮动的元素
                3.浮动会把元素转换成行内快元素(让我元素并在一行)
                4.当父元素没有设置固定高度时,子元素都浮动,父级元素的高度就无法被撑开
                    给父级元素添加overflow:hidden;
                5.当父级元素不够时,浮动元素会换行显示
            */
            /*float:left;*/
            /*float:right;*/
        }
        .box2{
            width:220px;
            background:red;

            /*float:left;*/
            /*float:right;*/
        }
        .box3{
            width: 220px;
            background:yellow;
        }
        .box4{
            background: blue;
            /*float:left;*/
        }

        .wrap{
            width:500px;

            border:1px solid red;
            overflow: hidden;
        }
        .item1{
            width:100px;
            height:100px;
            background: #369;
            float:left;
        }
        .item2{
            width:100px;
            height:100px;
            background: #123;
            float:left;
        }
        .item3{
            width: 200px;
            height:100px;
            background: red;
            float:left;
        }
        .item4{
            width:200px;
            height:100px;
            background: blue;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>

    <div class="wrap">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div>
</body>
</html>

清除浮动

父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}

清除浮动的使用方法：

.con2{... overflow:hidden}
或者

<div class="con2 clearfix">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        
        .wrap{
            border:1px solid red;
            /*清除浮动 解决父级元素高度无法撑开问题
                注意: 是给浮动元素的父级添加
            */
            /*overflow: hidden;*/
        }
        .cl{
            /*clear:both;*/
        }
        .wrap:after{
            content:'';
            display:table;
            clear:both;
        }
        .box1{
            width: 200px;
            height: 200px;
            float:left;
            background: #222;
        }
        .box2{
            width: 200px;
            height: 200px;
            float:left;
            background: #909;
        }
        .box3{
            width: 200px;
            height: 200px;
            float:left;
            background: #090;
        }
        .box4{
            width: 200px;
            height: 200px;
            float:left;
            background: #034;
            /*清除浮动 left:清除左浮动 right:清除有浮动 both:清除左右两边的浮动*/
            /*clear:both;*/
            clear:right;
        }
        .box5{
             width: 200px;
            height: 200px;
            float:left;
            background: #987;
        }
        .box6{
            width: 200px;
            height: 200px;
            float:left;
            background: #598;
        }
        .box7{
            width: 200px;
            height: 200px;
            float:left;
            background: #745;
        }


    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="cl"></div>
    </div>

</body>
</html>

定位

关于定位

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性

relative 相对定位,不脱离文档流,相对于自己本身的位置进行定位,
absolute 绝对定位,脱离文档流,位置相对于已定位的父级,
    如果没有父级,或父级没有定位,那么相对于文档的00点 (body)
fixed 固定定位,脱离文档流,位置相对于浏览器窗口 进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        /*清除默认的内外边距*/
        *{margin:0;padding:0}
        .box1{
            width:200px;
            height:200px;
            background: red;
            /*margin:0 200px;*/
            /*通过position:设置元素的定位
                relative: 相对定位
                    以元素本身位置为参考点进行偏移
                    不会脱离文档流
            */
            position:relative;
            left:300px;
            top:100px;

            /*设置定位的层级 谁在后面定位谁就在上面
                改变层级使用 z-index:
            */
            z-index:2;
        }
        .box2{

            width: 200px;
            height: 200px;
            background: green;
            /*设置绝对定位
                position:absolute;
                    以有定位属性的父级为参考点进行偏移,
                    如果父级元素没有定位属性,继续向上一级元素找,
                    如果找到就以上上一级元素为参考进行偏移,
                    如果找不到一直想向上一级寻找,
                    如果都没有那就以body为参考点进行偏移
                会脱离文档流,不占文档位置
            */
            position: absolute;
            left:300px;
            top:100px;
        }

        .wrap{
            width: 500px;
            height: 500px;
            margin:0 100px;
            border:1px solid red;
            /*添加定位属性*/
            /*position: relative;*/
        }
    </style>
</head>
<body>
    <div class="box1">1</div>

    <div class="wrap">
        <div class="box2">2</div>
        <!--<div class="box1"></div>-->
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定定位</title>
    <style>
        div{
            height:500px;
            border:1px solid red;
        }
        .box1{
            width:80px;
            height: 30px;
            background: red;
            /*绑定定位
                以浏览器窗口为参考进行定位
                主要用在:固定在头部的导航栏 返回顶部,网页的侧边栏菜单

            */
            position:fixed;
            bottom:20px;
            right:20px;
        }
    </style>
</head>
<body style="height:5000px">
    <div class="box1">返回顶部</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</body>
</html>

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素的层级

定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级

页面布局

静态布局

静态布局：元素不变的布局。
布局特点：窗口缩小后内容被遮挡时，拖动滚动条显示布局
PC：居中布局，所有样式使用绝对宽度，高度
移动设备：另外建立移动网站，以m.域名为域名

响应式布局(了解)

响应式布局：创建多个布局，分别对应一个屏幕分辨率范围

特点：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配

响应式布局就是使用媒体查询的方式,创建多个元素宽度是相对的的布局理想的响应式布局是指的对PC/移动各种终端进行响应的

响应布局的伪代码如下：

.a{
   height: 200px;
   display: inline-block;
}
/*当浏览器窗口小于=960时*/
@media (max-width:960px){
    .a{width:50%;}
}
/*当浏览器窗口小于=640时*/``_****_``
@media (max-width:640px){
    .a{width:100%;}
}
/*当浏览器窗口大于等于960时*/
/*@media (min-width:960px){
    .a{width:25%;}
}*/

Chains-X ♔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
静态定位（文档流）、浮动定位、清除浮动、相对定位、绝对定位、绑定定位、静态布局、响应式布局

浮动文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。浮动的特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来3、相邻浮动的块元素可以并在一行，超...
复制链接

扫一扫