2021-05-03

最新推荐文章于 2024-10-16 17:22:22 发布

飞行日记@

最新推荐文章于 2024-10-16 17:22:22 发布

阅读量293

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_52039976/article/details/116380118

版权

float 和定位

2.5种定位（选择器{position：定位属性}）

3.定位叠放顺序

float

1.定义和属性

float：用于创建浮动框，将其移到一边，直到边缘触及包含块或者另一个浮动框的边缘。

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

语法如图代码

<style>
    div{
        height:100px;
        width:100px;
        background-color: #fff;
        float:left;
    }
    </style>

tip1：如果将盒子转化为行内块元素使之变成一行，两个盒子之间会有间隙，而通过float两个盒子紧密相连。

2.float特性

前提知识---标准流

标准流或称普通流、文档流，就是指标签按照规定好的方式默认排序。例如，块级元素占一行，从上向下顺序排序，行内元素会按照顺序，从左到右顺序排序。

第一个特性：

脱离标准流的指定位置（脱标）浮动的盒子不再保留原来的位置

代码举例如图

当代码中没有添加浮动时

<style>
    .first{
        height: 100px;
        width: 100px;
        background-color:pink;
         }
    .second{
        height: 100px;
        width: 100px;
        background-color: rgb(128, 115, 115);
        }
</style>
<body>
    <div class="first">
        第一个盒子
    </div>
    <div class="second">
        第二个盒子
    </div>
</body>

显示图像结果为

当在first代码中添加浮动 float:left时图像产生叠加效果（也就是有了float 属性后，粉色盒子浮动，不再占有位置）

第二个特性：

当两个都有float：left属性时图像显示为

tip2：若想多个盒子一行显示，需要将所有盒子都设置float属性。当页面不足以装下一行多个盒子时候，多余的盒子另起一行继续显示。

tip3：如果浮动元素的上边是一个没有float属性的块元素，则浮动元素无法与之在同一行。

第三个特性：

浮动元素会具有行内块元素的特性

例如span元素是行内元素，不能直接设置宽高度，但是加上float属性后有了宽度和高度。

<style>
 span{
        height: 200px;
        width: 200px;
        background-color:lightseagreen;
        float:left;
        }
</style>
<body>
    <span>1</span>
    <span>2</span>
   
</body>

图像结果为

3.float元素使用场景

为了约束浮动元素位置，一般网页布局是先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

<style>
    .first {
        height: 100px;
        width: 700px;
        background-color: pink;
        margin: auto
    }
  .second {
        height: 80px;
        width: 200px;
        background-color: rgb(128, 115, 115);
        float: left;
        margin: 10px;
    }
</style>

<body>
    <div class="first">
        <div class="second">1</div>
        <div class="second">2</div>
        <div class="second">3</div>
    </div>

</body>

图像结果显示为：

此时可以用父元素的盒子来约束子盒子的位置（也就是通常先设置一个大盒子，然后再往里边加小盒子）

tip4 :文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。

float的注意事项：

一个元素浮动了，那么其他兄弟元素也应该浮动，否则容易出现问题。

清除浮动

使用场景：有些时候父元素的高度不一定，因此写父元素的div的时候不能写高度，但往往父元素高度会被设成0，从而影响下边标准流的写入，因此需要清除浮动。

如果父盒子本身有高度，不需要清除浮动。（父盒子没有高度，子盒子浮动）

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧的浮动

第一种方法：只需要在父元素加上清除浮动代码即可

   .first {
        
        width: 700px;
        background-color: pink;
        margin: auto;
        overflow: hidden;
    }

第二种方法：伪元素清除浮动

<style>
    .clearfix:after{
        content:"";
        display: block;
        height:0;
        clear:both;
        visibility:hidden;
    }
<div class="first clearfix">

其中clearfix可以修改成任意标记。

第三种方法：双伪元素清除浮动

<style>
    .clearfix:after,.clearfix:before{
        content:"";
        display: table;
        
    }
    .clearfix:after{
        clear:both;
    }
   <div class="first clearfix">/*父元素*/

定位

1.定义和组成

定义：定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并可以压住其他盒子。

定位组成：定位模式+边偏移（定位模式用于指定元素在文档中的位置，边偏移决定元素的最终位置）

定位模式

定位模式通过css的position属性来设置

值	语义
static	静态定位（默认）
relaitive	相对定位
absolute	绝对定位
fixed	固定定位

边偏移 (举例top： 50px;)

属性	描述
top	顶端偏移量，相对于父元素上边线的距离
left	左端偏移量，相对于父元素左边线的距离
right	右端偏移量，相对于父元素右边线的距离
bottom	底端偏移量，相对于父元素下边线的距离

tip5:这四个属性用来移动位置，只有定位盒子才存在，标准流和浮动不能使用。

4种定位（选择器{position：定位属性}）

第一种定位：

static静态定位

静态定位按照标准流摆放位置，没有边偏移。

第二种定位：

relative相对定位

相对于自身移动，与父元素和浏览器无关

当没有relative定位属性时

当添加定位属性时

 <style>
        div{
            background-color: blueviolet;
            position:relative;
            height:100px;
            width:100px;
                left：50px;
               
        }
    </style>
</head>
<body>
    <div>relative</div>
</body>

图像为

当相对属性为right时，图像为

其中有一部分图像被截掉，可以得出结论相对定位属性为left时，图像向右移动。与父元素无关。以自己原来位置作为参照点

三个盒子没有相对定位属性时

当前两个盒子有相对属性，并作出移动

<style>
        .di{
            background-color: blueviolet;
            position:relative;
            height:100px;
            width:100px;
            top:30px;
            left:20px;
            
        }
        .se{
            background-color: pink;
            position:relative;
            height:100px;
            width:100px;
                right:20px;
                top:20px;
            
        }
        .th{
            background-color:rosybrown;
            
            height:100px;
            width:100px;
            
        }
    </style>
</head>
<body>
    <div class="di">relative</div>
    <div class="se">第二个盒子</div>
    <div class="th">第三个盒子</div>
</body>

图像为

当三个盒子都有relative属性时

原来在标准流的位置继续占有，后面的盒子仍然以标准流方式对待它。

也就是说，上边的盒子移动，下边的盒子不会补上去。只会以自己原来的位置移动。

第三种定位

绝对定位是相对于它祖先元素来说的

第一个特点：如果没有父元素或者父亲没有定位，则以浏览器文档为准进行对齐

  <style>
        .di{
            background-color: blueviolet;
            position:absolute;
            height:100px;
            width:100px;
            right:20px;
            top:200px;
        }
        
    </style>
</head>
<body>
    <div class="di">relative</div>
 
</body>

图像为

第二个特点：

如果父元素有定位，则以最近一级的有定位祖先元素作为参考点移动位置。

  <style>
        .father{
                   height:200px;
                   width:200px;
                   background-color:pink;
                   position:absolute;
                   

        }
        .son{
            height:100px;
            width:100px;
            position:absolute;
           bottom:0;
            background-color:black;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>

图像显示为

注意以父元素为参照点，并不是只能包含在父元素中，如上图设置top:150px; 子元素也超出了父元素的范围

第三个特点：

绝对定位脱标的不占有原来位置（脱离标准流）

  <style>
        .father{
                   height:200px;
                   width:200px;
                   background-color:pink;
                   position:absolute;
                   

        }
        .son1{
            height:100px;
            width:100px;
            position: absolute;
           top:20px;
           left:20px;
            background-color:yellowgreen;
        }
        .son2{
            height:50px;
            width:50px;
            
           
            background-color:plum;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
    </div>

第四种定位

固定定位fixed

固定定位是元素固定于浏览器可视区的位置，主要作用是在浏览器页面滚动时元素的位置不会改变。

特点

1.以浏览器的可视窗口作为参照点移动元素。

<style>
        .image{
            position:fixed;
            right:0;
            top:0;
        }
    </style>
</head>
<body>
    <div class="image">
        <img src="images/鞠翼铭.jpg" >
    </div>

图像为

第二个特点：跟父元素没有任何关系。

第三个特点：不随滚动条滚动。

固定定位小技巧：固定在版心右侧位置。

<style> 
.fixed{
             position:fixed;
             left:50%;
             top:250px;
             margin-left: 250px;
             height:50px;
             width:50px;
             background-color: black;
         }
         .big{
            height:500px;
             width:500px;
             background-color:rgb(0,0,0,0.3);
               margin-left: auto;
               margin-right: auto;
         }
      </style>
  </head>
  <body>
      <div class="big">
             <div class="fixed">big</div>
      </div>

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合 sticky

特点1.以浏览器的可视窗口为参照点移动元素。

2.粘性定位占有原先的位置。

3.必须添加top bottom left right其中一个才会有作用。

效果：刚开始随着页面的滚动而滚动，当某个位置就不会动了。

<style>
        .image {
            position: sticky;
            width:700px;
            height:80px;
            top: 10px;
            background-color: black;
        }
    </style>

这个代码的意思就是当图片距离顶部10px的时候，会固定在页面上。

3.定位叠放顺序

在使用定位布局时候，可能出现盒子重叠的情况，此时用z-inex来控制盒子的先后次序

第一个特点：

数值可以是正整数，负整数，0.默认是auto,数值越大，盒子越靠上。如果相同，后来者居上。

<style>
       .first{
           background-color: red;
           width:50px;
           height:50px;
           top:15px;
           position:absolute;
           z-index: 2;
       }
       .second{
           background-color: yellow;
           width:50px;
           height:50px;
           position:absolute;
           z-index: 1;
       }
       
      </style>
  </head>
  <body>
     <div class="first">first</div>
     <div class="second">second</div>
     
  </body>

没有加z-index属性时，图像为