2020-11-29浮动和定位

最新推荐文章于 2024-08-02 10:25:30 发布

the弄潮儿_

最新推荐文章于 2024-08-02 10:25:30 发布

阅读量225

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/m0_52247852/article/details/110292983

版权

这周学习了视觉格式化模型中后两个内容：浮动和定位
那就先来写浮动吧

浮动

应用场景

文字环绕
横向排列

使用效果：

文字环绕效果

效果展示
横向排列

<style>
    div{
       width: 500px;
       height: 500px;
       background-color: darkseagreen;
    }
    .box{
      width: 50px;
      height: 50px;
      background-color: darkslateblue;
      float: left;
      border:10px deeppink dashed;
      font-size: 1em;
    }
  </style>
<body>
  <div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
  </div>
</body>

在这里插入图片描述

浮动的基本特点

修改float属性值为：

left: 左浮动，元素靠上靠左
right:右浮动，元素靠上靠右

默认值为 none

当一个元素浮动后，元素必定为块盒(更改display属性为block)
浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

宽度为auto时，适应内容宽度
高度为auto时，与常规流一致，适应内容的高度
margin 为auto时，为0
边框、内边距、百分比设置与常规流一致

盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子靠上靠右排列
浮动盒子在包含快中排列时，会避开常规流盒子

在这里插入图片描述

常规流块盒在排列时，无视浮动盒子

在这里插入图片描述

行盒在排列时，会避开浮动盒子
外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒

高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及css属性：clear

默认值：none
left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
right:清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both:清楚左右浮动，该元素必须出现在前面所有浮动盒子的下方

高度坍塌的现象：

<style>
  .contianer{
    background-color: deepskyblue;
    padding: 30px;

    
  }
  .item{
    width: 50px;
    height: 50px;
    background-color: forestgreen;
    border: gold solid 1px;
    float: left;
  }
</style>
<body>
  <div class="contianer">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="end"></div>
  </div>

在这里插入图片描述
解决高度坍塌问题的方法：

一、在浮动盒子的后面加常规流盒子（并清除浮动）
在这里插入图片描述
二、

<style>
  .contianer{
    background-color: deepskyblue;
    padding: 30px;

    
  }
  .item{
    width: 50px;
    height: 50px;
    background-color: forestgreen;
    border: gold solid 1px;
    float: left;
  }
  
  .clearfix::after{
     content:"";
     display: block;
     clear: both;
  }
  
</style>
<body>
  <div>
    <div class="contianer  clearfix">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
  </div>

在这里插入图片描述

以上就是我学到的浮动方面的有关知识，接下来写定位吧

定位

定位：手动控制元素在包含块中的精准位置

涉及的css属性:position

position属性

默认值：static,静态定位(不定位)
relative :相对定位
absolute:绝对定位
fixed: 固定定位

一个元素只要position的取值不是static,认为该元素是一个定位元素

定位元素会脱离文档流(相对定位元素除外)

文档流中的元素摆放时，会忽略脱离了文档流中的元素
文档流中，元素计算自动高度时，会忽略脱离了文档流中的元素

相对定位

不会导致元素脱离文档流，只会让元素在原来位置上进行偏移(通常用来为绝对定位的元素提供包含块)

相对定位不会改变盒子的特征，比如之前是行盒，设置相对定位后仍然为行盒

可以通过四个css属性对其进行偏移

left
right
bottom
top

盒子的偏移不会对其他盒子造成影响

举个例子吧

<style>
    div{
      height: 30px;
      background: blueviolet;
      border: cornflowerblue solid  3px;
    }
    .item1{
      position: relative;
      left: 30px;
      top: 20px;
      
    }
  </style>
<body>
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>

在这里插入图片描述

绝对定位

宽高为auto,适应内容
包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块,若找不到，则它的包含块为整个网页

固定定位

其他情况和绝对定位完全一样。

包含块不同：固定定位的包含块为视口(浏览器的可视窗口)

<style>
    .box1 {
      position: relative;
      width: 300px;
      height: 300px;
      padding: 20px;
      border: seagreen solid 10px;
    }

    .box2 {
      width: 200px;
      height: 200px;
      margin: 20px;
      border: turquoise solid  10px;
    }

    .box3 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 40px;
      height: 40px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3"></div>
    </div>
  </div>
</body>

在这里插入图片描述
如果绝对定位元素找不到祖先元素中的定位元素，则会出现下面的情况：

<style>
    .box1 {
      width: 300px;
      height: 300px;
      padding: 20px;
      border: seagreen solid 10px;
    }

    .box2 {
      width: 200px;
      height: 200px;
      margin: 20px;
      border: turquoise solid  10px;
    }

    .box3 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 40px;
      height: 40px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3"></div>
    </div>
  </div>
</body>

在这里插入图片描述

固定定位

其他情况和绝对定位完全一样。

包含块不同：固定定位的包含块为视口(浏览器的可视窗口)

这里也举个例子吧.
在这里插入图片描述

定位下的居中

某个方向居中：

定宽(高)
将左右(上下)距离设置为0
将左右(上下)margin设置为auto

绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

<style>
  .container{
    width: 500px;
    height: 500px;
    background: aqua;
  }
  .box{
    width: 100px;
    height: 100px;
    background:   red;
    position: fixed;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    top: 0px;
    bottom: 0px; 
    margin: auto;
  }
  /* 注：固定元素的包含块为可视口 */
</style>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

在这里插入图片描述

多个定位元素重叠时(即谁在前谁在后的问题)

堆叠上下文

设置 z-index,通常情况下该值越大，越靠近用户

只有定位元素设置z-index有效

z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖

补充

绝对定位、固定定位元素一定是块盒

绝对定位、固定定位元素一定不是浮动

没有外边距合并

the弄潮儿_

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-11-29浮动和定位

这周学习了视觉格式化模型中后两个内容：浮动和定位那就先来写浮动吧浮动应用场景文字环绕横向排列使用效果：文字环绕效果效果展示横向排列<style> div{ width: 500px; height: 500px; background-color: darkseagreen; } .box{ width: 50px; height: 50px; backg
复制链接

扫一扫