CSS语法-浮动与定位

已于 2022-05-12 00:07:50 修改
阅读量255 收藏 1
点赞数
分类专栏： 前端 文章标签： css3
于 2022-05-12 00:06:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BLee_0123/article/details/124721117
版权

一、浮动
浮动是用来实现并排
浮动是要把固定格式从上到下改变成并排
在这里插入图片描述

2.浮动使用要点
1）要浮动，并排的盒子都要设置浮动
2）父盒子要有足够的宽度，否则盒子会掉下去
3）浮动元素不在区分块级和行内元素，它们一律能够设置宽度和高度，即使是span与a标签

二、定位
1.什么是相对定位（参照本身元素的位置）
盒子可以相对自己原来的位置，进行位置调整，称之为相对定位。
语法是：position: relative;

position: relative;
top: 50px;
left: 50px;

在这里插入图片描述
1）位置描述符，有以下四种：

位置描述
left: 100px;向右移动100px
right: -50px;向右移动50px（为负数表示向相反方向移动）
top: 100px;向下移动100px
bottom: 100px;向上移动100px

2）相对位置本质
相对定位的元素，会在“老家留坑”，本质上仍然在原来的位置，只不过渲染在新的地方而已，渲染的图像可以比喻成“影子”，不会对页面上的其他元素产生任何影响。

2.什么是绝对定位（参照浏览器）
盒子可以在浏览器中，以坐标进行位置精准描述，拥有自己的绝对位置。
语法是：position: absolute;

1）脱离标准文档流
绝对定位的元素，会脱离标准文档流，释放自己原来的位置，对其他元素不会产生任何干扰，二是对它们进行压盖。
除绝对定位外，浮动（float）、固定定位，都会脱离标准文档流。

2）参考盒子
绝对定位的盒子，并不是永远以浏览器作为基点。
绝对定位的盒子，会以自己祖先元素中，离自己最近的，拥有定位属性的盒子，作为基准点。这个盒子通常是相对定位的盒子，所以这个性质也叫作：“子绝父相”。

3.固定定位
不管页面如何滚动，它永远固定在那里。
语法是：position: fixed;
注：固定定位只能以页面作为基准点，没有“子固父相”性质。

4.定位使用的场景
相对定位：微调元素位置、用作绝对定位的参考盒子
绝对定位：用来制作：压盖、遮罩效果、结合js实现动画
固定定位：返回顶部、楼层导航等

三、CSS案例
浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动1</title>
<style>
    /*
        浮动是用来实现并排的，本例：实现三个块级元素（div）能够并排显示。
    */
    .box {
        width: 1000px; /*父盒子要有足够的宽度，否则浮动会掉下去*/
        border:blue 1px solid;
        margin: 20px;
        height: 100px;    /* 清除浮动方式1,后面会讲*/
    } 
    .box1 {
        width: 100px;
        height: 100px; 
        float: left;
        background-color: red;
    }
    .box2 {
        width: 100px;
        height: 100px; 
        float: left;
        background-color: blue;
    }
    .box3 {
        width: 800px;
        height: 100px; 
        float: right;
        background-color: yellow;
    }

</style>
</head>
<body>
        
    <div class="box">
        <div class="box1 ">div盒子1</div>
        <div class="box2 ">div盒子2</div>
        <div class="box3 ">div盒子3</div>
    </div>    

   
</body>
</html>

清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动2</title>
<style>
      /*
        浮动的目的：浮动是用来实现并排的，即：浮动是为了解决左边图片，右边文字的需求
        浮动的实现：子元素在父元素内浮动，只需要对子元素设置float: left/right 即可
        浮动可能会带来的问题：如果父元素不设置高度（有时候不好计算父元素的高度），子元素浮动后，会导致父元素高度塌陷变为0
        解决父元素高度塌陷变为0的方法，叫浮动清除（注意：是清除带来的问题，而不是删除浮动）。
        浮动清除的方法：
        方法1：设置父元素的高度
        方法2：给父元素添加：overflow:hidden; 样式
        方法3：在父元素内，添加冗余元素：clear:both;
    */
    .box {
        width: 1000px;
        border:blue 1px solid;
        margin: 20px;
        height: 100px;    /* 清除浮动方式1*/
        overflow:hidden;  /* 清除浮动方式2*/
    } 
    .box1 {
        width: 100px;
        height: 100px; 
        float: left;
        background-color: red;
    }
    .box2 {
        width: 100px;
        height: 100px; 
        float: left;
        background-color: blue;
    }
    .box3 {
        width: 800px;
        height: 100px; 
        float: right;
        background-color: yellow;
    }
    /* 清除浮动方式3 */
    .clear {
        clear:both;
    }

  

</style>
</head>
<body>
        
    <div class="box">
        <div class="box1 ">div盒子1</div>
        <div class="box2 ">div盒子2</div>
        <div class="box3 ">div盒子3</div>
        <div class="clear"></div>  <!--清除浮动方式3  -->
    </div>    

   
</body>
</html>

简单实现一个网页的头部：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动3</title>
<style> 
    .headerA {
        width: 1000px; 
        margin-top: 20px;
        overflow:hidden; 
    }
    .logo {
        float: left;
        width: 200px;
    }
    .title {
        float: left;
        width: 380px;
        margin-left: 20px;
        font-size: 24px;
        color:blue;
    }
    .search {
        float: left;
        width: 400px;
    }

    #navbar{
        overflow:hidden;
        margin-top:30px;
    }

</style>
</head>
<body> 
    <div class="headerA" style="">
        <img src="image/fj.png" class="logo" width="200px" height="80px">
        <h3 class="title">XX省XXXXXX管理系统</h3>
        <form class="search">
            <div>
                全文搜索：<input type="text">
                <input type="button" value="确定">
            </div>            
        </form>
    </div>

    <div id="navbar">
        导航区
    </div>

</body>
</html>

相对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style> 

        /*
         相对定位：相对定位的元素，会在“老家留坑”，本质上仍然在原来的位置，只不过渲染在新的地方而已，
                  渲染的图像可以比喻成“影子”，不会对页面上的其他元素产生任何影响
         特点：它相对的是自己原来的位置。         
         使用场景：微调元素位置、用作绝对定位的参考盒子
        */
        * {
            padding: 0px;
            margin: 0px;
        }
        
       .box1 {
           border: 3px dashed #000;
           width: 150px;
           height: 150px;
       }

       .box2 {
           background-color: pink;
           width: 150px;
           height: 150px; 
       }

       .relative {
           position: relative;    /*相对定位*/
           top: 50px;
           left: 50px;
       }

    </style>
</head>
<body>
    
     <div class="box1">
         <div class="box2 relative">
             这个div相对于原来的位置偏移了
         </div>
     </div>
     <div class="box1">这个div不受到影响，内容只是被压盖</div>

</body>
</html>

绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style> 
        /*
            绝对定位：绝对定位的元素，会脱离标准文档流，释放自己原来的位置，对其他元素不会产生任何干扰，二是对它们进行压盖

            特点：正常情况下，绝对定位以浏览器作为基点

            使用场景：用来制作：压盖、遮罩效果、结合js实现动画
        */
        * {
            padding: 0px;
            margin: 0px;
        }
        
       .box1 {
           border: 3px dashed #000;
           width: 150px;
           height: 150px;
       }

       .box2 {
           background-color: pink;
           width: 150px;
           height: 150px; 
       }

       .absolute {
           position: absolute;/*绝对定位*/
           top: 50px;
           left: 50px;
       }

    </style>
</head>
<body>
    
     <div class="box1">老家没有留坑，这里可以写内容。
         <div class="box2 absolute">
           绝对定位
         </div>
     </div>
     <div class="box1">这个div不受到影响，内容只是被压盖</div>
</body>
</html>

子绝父相：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相</title>
    <style> 
        /*
           子绝父相
           绝对定位的盒子，会以自己祖先元素中，离自己最近的，拥有定位属性的盒子，作为基准点。
           这个盒子通常是相对定位的盒子，所以这个性质也叫做 “子绝父相”
        */
        * {
            padding: 0px;
            margin: 0px;
        }
        
       .box1 {
           border: 3px dashed #000;
           width: 150px;
           height: 150px; 
       }

       .box2 {
           background-color: pink;
           width: 150px;
           height: 150px; 
       }

       .ralative {
           position: relative;/*相对定位*/
       }
       .absolute {
           position: absolute;/*绝对定位*/
           top: 50px;
           left: 50px;
       }

    </style>
</head>
<body>
    
     <div class="box1">盒子1 </div>

     <div class="box1 ralative">
        <div class="box2 absolute">
            子绝父相
      </div>
    </div>
</body>
</html>

固定定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style> 
        /*
            固定定位：不管页面如何滚动，它永远固定在那里。语法是：position: fixed;
            特点：固定定位只能以页面作为基准点，没有“子固父相”性质
            使用场景：返回顶部、楼层导航等
        */
        * {
            padding: 0px;
            margin: 0px;
        }

       .box2 {
           background-color: pink;
           width: 80px;
           height: 30px; 
       }
 
       .fixed {
           position: fixed;/*固定定位*/
           right: 50px;
           bottom: 50px;
       }

    </style>
</head>
<body>
    <div>
        <p >拉拉拉</p>
        <p >拉拉拉</p>
    </div>
    <div class="box2 fixed">
        返回顶部
    </div>
</body>
</html>

背景颜色及绘制区：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景绘制区</title>
    <style>
        /*
            background-color属性用来设置背景颜色，padding 区域，是有背景颜色的
            background-clip 属性，用来指定背景的绘制区域（俗称：背景裁剪）
                            border-box：背景绘制在边框及以内（默认）
                            padding-box：背景绘制在padding及以内
                            content-box：背景绘制在内容区

        */
        div {
            padding:35px;
        }
        /* 1. 背景绘制在边框及以内（默认） */
        #example1 {
            border: 10px dotted black;
            background-color: yellow;
            /* 默认：border-box*/
            /* background-clip:border-box; */  
        }
        /* 2. 背景绘制在padding及以内 */
        #example2 {
            border: 10px dotted black;
            background-color: yellow;
            background-clip: padding-box;
        }
        /* 3. 背景绘制在内容区 */
        #example3 {
            border: 10px dotted black;
            background-color: yellow;
            background-clip: content-box;
            background-size:10px 10px;
        }
    </style>
</head>
<body>
    <h1>背景裁剪</h1>
    <h2>1、background-clip:border-box（默认）</h2>
    <div id="example1">
        <p>背景绘制在边框及以内（默认）</p>
    </div>

    <h2>2、background-clip: padding-box</h2>
    <div id="example2">
        <p>背景绘制在padding及以内</p>
    </div>

    <h2>3、background-clip: content-box</h2>
    <div id="example3">
        <p>背景绘制在内容区</p>
    </div>
</body>
</html>

背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片及平铺</title>
    <style>
        /*
            background-image   属性用来设置背景图片，语法格式如下background-image: url(图片路径)
            background-repeat  背景平铺属性
                               1.repeat  表示xy都平铺（默认）
                               2.no-repeat  表示xy都平铺（默认）
                               3.repeat-x  表示xy都平铺（默认）
                               4.repeat-y  表示xy都平铺（默认）
            background-size    用来设置背景图片的尺寸，默认值为auto                   
        */
        div{
            height: 300px;
            padding:35px;
        }
        /* 1.默认x,y都平铺 */
        #example1 {
            border: 10px dotted black;            
            background-image: url(image/fj.png);      
            /* 默认repeat */
            /* background-repeat: repeat; */
        }
        /* 2.不平铺 */
        #example2 {
            border: 10px dotted black;
            background-image: url(image/fj.png) ;
            background-repeat: no-repeat;
        }
        /* 3.x方向平铺 */
        #example3 {
            border: 10px dotted black;
            background-image: url(image/fj.png);
            background-repeat: repeat-x;
        }
        /* 4.y方向平铺 */
        #example4 {
            border: 10px dotted black;
            background-image: url(image/fj.png);
            background-repeat: repeat-y;
        }

        /* 5.背景图片大小 */
        #example5 {
            border: 10px dotted black;
            background-image: url(image/fj.png);
            background-repeat: no-repeat;
            background-size: 100px 100px;
        }

    </style>
</head>
<body>
    <h1>背景图片</h1>
    <h2>1、背景平铺</h2>
    <div id="example1"></div>

    <h2>2、背景不平铺</h2>
    <div id="example2"></div>

    <h2>3、x方向平铺</h2>
    <div id="example3"></div>

    <h2>4、y方向平铺</h2>
    <div id="example4"></div>

    <h2>5、图片大小</h2>
    <div id="example5"></div>

</body>
</html>
每 天 早 睡
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 浮动(float)注意点
soindy
03-20 2905
浮动布局 浮动是一种半脱离标准流的排版方式 没有居中对齐 使用 margin: 0 auto; 没有作用 不区分块级元素/行内元素/行内块级元素,因为这标准流中的概念 浮动的排序规则 相同方向的浮动元素,先浮动的显示在前面.因为浮动只会盖住标准流. 不同方向的浮动元素,左浮找左浮,右浮找右浮 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定. 贴靠现象: 如果浮动的最后一个元素超过
CSS定位与浮动
m0_49034593的博客
08-18 2137
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
CSS布局（定位、浮动）
li17835756262的博客
09-18 671
（2）父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。
CSS 布局 (三) 浮动、定位、多列布局
最新发布
chinusyan的专栏
09-20 908
CSS 布局 (三) 浮动、定位、多列布局
CSS浮动与定位
qq_50936276的博客
10-28 1065
CSS浮动与定位
langlangDental::man_health_worker: HTML5_CSS3基础学习项目 - 朗朗口腔
08-04
熟练掌握常规属性，CSS3 选择器，定位 position，浮动 float，弹性布局 flex，过渡，圆角，阴影，以及 CSS3 新特性属性等； 应用学习：vscode，phpstudy，photoshop，ftp，koala sass 预编辑等； 学习成效：读懂布局...
CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题
01-20
首先我阐述一下什么是定位，定位就是将盒子定在某一位置，自由的漂浮在其他盒子的上面（这些盒子包括标准流和浮动），定位的语法为：定位=定位模式+边位移。那么什么是固定定位了，固定定位是一种特殊的绝对定位，不...
Web前端开发工程师笔试题-CSS+Javascript.doc
12-14
1. CSS布局方式：绝对定位、相对定位、浮动布局等 2. CSS样式属性：width、height、background-color等 3. CSS样式表的继承和override规则 六、Web前端开发工程师笔试题 1. 在一个框架的属性面板中，不能设置下面...
CSS网页布局全精通
12-10
答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的方法上,在此每一种方法都能做出两栏布局,同时具备页首和页尾. 我的愿望是:你能以本章作为指引开始构建...
CSS清除浮动float的三种方法小结
01-19
语法 float常跟属性值left、right、none float:none 不使用浮动 float:left 靠左浮动 float:right 靠右浮动 二、浮动的用途 可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果...
CSS-浮动与定位
花城的博客
08-28 4705
CSS浮动. 父标签的塌陷问题及解决方法、溢出属性、CSS定位. 定位方法. 修改位置. 是否脱离文档流、z-index属性、透明度
CSS 浮动和定位
qq_42671834的博客
10-11 444
CSS Position(定位) CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 position 属性指定了元素的定位类型。 position 属性的五个值： static：默认值，没有定位，元素出现在正常的流中，静态定位的元素不会受到 top, bottom, left, right影响。 absolute：绝对定位，相...
css渐变和浮动
wangboyujiayou的博客
11-03 327
1、渐变 1、线性渐变 background-image:linear-gradient(angle,color-point,color-point); ex: background-image:linear-gradient(to bottom,#f9f9f9,#cdcdcd); 2、径向渐变 background-image:radial-gradient([size at position]...
CSS浮动和定位
gxjis_Z的博客
07-01 642
属性值：none:元素不浮动left:元素左浮动right:元素右浮动浮动元素的特征 标准流：指的是在不使用其他的与排列和浮动、定位相关的特殊CSS规则时,各种元素的排列规则。脱流：使用了浮动、定位相关的特殊规则脱离了标准流的控制浮动到了指定位置。1.浮动的盒子不再保留原先的位置2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。3. 浮动元素会具有行内块元素特性浮动只能实现元素水平布局的效果，不能实现让元素实现复杂的布局效果。定位的组成偏移量语法规则 定位模式1....
css基本知识点3（浮动、定位）
wujiancai1163的博客
11-27 243
一、文本属性 （一）设置文本水平位置 1、text-align属性：属性值有 left/right/center/justify (1)left 是让文本在左边显示 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Gener...
CSS定位
巧克力很苦的小博客
02-18 275
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人...
css的浮动和定位
TDFSFSF的博客
09-12 321
一、脱离标准文档流 就是文档的“默认”状态，就是标签占用文档的位置。 标准文档流中，标签分为两种：块级元素、行内元素。 块级元素： 一定是霸占一行的，能设置宽、高，不设置宽度默认就是占满父亲。div、p、h、li 行内元素： 和其他行内元素并排，不能设置宽、高，默认宽度就是文字宽度。span、a、b、i、u 标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。 1、浮动 行级元素转换成块...
快速掌握css中的浮动和定位
weixin_39671853的博客
03-14 364
开头提醒 在刚接触css时，会对页面布局中的浮动和定位容易弄混，在此首先要牢记一句话， 浮动：设计页面大体布局 --->定整体 定位：移动元素到指定位置 --->修细节 块级、行内、行内块元素和盒子模型 在此之前我们先了解一下块级元素、行内元素和行内块的区别： 块级元素： 可以独占一行 ，并且可以设置宽高， 宽度没有指定说明，则充满该行 行级元素： 不能独占一行，并且设置宽高无效 ，宽高是由内容的
地址描述符结构ARDS
xiaominthere的专栏
12-22 1864
作者：huybin_wang 原作网址：http://blog.csdn.net/huybin_wang/article/details/2158602 Address Range Descriptor Structure   Offset Name Description 0 BaseAddrLow 基地址的低32位 4 Base
css语法文字在一行显示
03-25
可以通过以下方式将CSS语法文字在一行显示： 1. 使用 `white-space: nowrap;` 属性可以防止文字换行，使其在一行显示。 2. 使用 `display: inline-block;` 属性可以将元素设置为内联块元素，使其能够在一行显示。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每 天 早 睡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值