浮动与定位

zfh大约 4 分钟约 1280 字...

浮动

  • 要浮动,并排的盒子都要设置浮动
  • 浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流,一律能够设置宽度和高度

BFC

BFCBox Formatting Context,块级格式化上下文) 是一块独立渲染区域,内部元素的渲染不会影响边界以外的元素,反之亦然

如何创建 BFC

  1. float 的值不是 none

  2. positon 的值是 absloute 或者 fixed

  3. display 的值是 inline-block,flex,或者 inline-flex

  4. overflow的值不是visible

BFC 的作用

  1. 清除浮动
  2. BFC 可以取消盒子 margin 塌陷
  3. BFC可以阻止元素被浮动元素覆盖

清除浮动

浮动导致父元素高度塌陷
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
				p{
            float: left;
            width: 100px;
            height: 100px;
            background-color:orange;
            margin-right: 20px;
        }

子元素浮动则父元素高度塌陷,必然会影响后面元素布局和定位,所以需要去清除浮动的影响

因为盒子内容不知道的情况下不好设置高度,可采用下面几种方法:

  1. 让内部有浮动的父盒子形成 BFC,此时最简单的方法就是 overflow:hidden 属性

  2. 给后面的父盒子设置 clear:both 属性。(不太推荐,此时两个父盒子的高度仍然为 0,margin 失效

  3. 使用::after 伪元素给盒子添加最后一个子元素,并且给::after 设置 clear:both(margin 有效)

/*   给两个盒子加上clearfix类名*/
.clearfix::after {
  content: '';
  clear: both;
  /*  一定要转为块级元素,clear属性只对块级元素才有效  */
  display: block;
}
  1. 在两个盒子之间加一个div 盒子,设置 clear:both此时两个父盒子仍然没有高度,margin 失效,但是可以通过设置两个父盒子之间的盒子的高度实现缝隙效果

定位

相对定位

position:relative;

  • 盒子可以相对自己原来的位置进行位置调整,称为相对定位
  • 相对定位的元素,会在“老家留坑”,本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响,有可能会出现覆盖其他元素的情况

用途

  1. 微调元素位置
  2. 相对定位的元素,可以用作绝对定位的参考盒子

绝对定位

position:absloute;

盒子可以在浏览器中以坐标进行位置精准描述,拥有自己的绝对位置

绝对定位脱离标准文档流

  • 绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对它们进行压盖。
  • 脱离标准文档流的方法:浮动、绝对定位、固定定位

绝对定位的参考盒子

  • 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。这个盒子通常是相对定位的,所以这个性质也叫作“ 子绝父相
  • 如果所有的父元素都没有显式地定义position属性,绝对定位的盒子会根据浏览器视口来定位

绝对定位的盒子垂直水平居中

position: absloute;
/* 距离浏览器上边50%  */
top: 50%;
margin-top: -自己高度的一半;
left: 50%;
margin-left: -自己宽度的一半;

在不知道自身宽高的情况下,可以利用 translate()来进行水平垂直居中

position: absolute;
top: 50%;
left: 50%;
/* translate(-50%,-50%)作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。  */
transform: translate(-50%, -50%);

堆叠顺序 z-index 属性

z-index 仅能在定位元素上奏效,元素可拥有负的z-index属性值

z- index 数值大的能够压住数值小的

用途

  1. 压盖、遮罩效果
  2. css精灵图
  3. 结合 js 实现动画

固定定位

position:fixed

  • 固定定位与绝对定位相似,但固定定位是相对于浏览器视口本身。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素
  • 固定定位脱离标准文档流

用途

  1. 返回顶部
  2. 楼层导航

代码见: BOM 章节

粘性定位

position:sticky 粘性定位的几种巧妙应用open in new window

position: sticky;

在跨越特定阈值前(如视口顶部起 10 像素)为相对定位,之后为固定定位

 <h1>Sticky positioning</h1>

   <dl>
       <dt>A</dt>
       <dd>Apple</dd>
       <dd>Ant</dd>
       <dd>Altimeter</dd>
       <dd>Airplane</dd>
       <dt>B</dt>
       <dd>Bird</dd>
       <dd>Buzzard</dd>
       <dd>Bee</dd>
       <dd>Banana</dd>
       <dd>Beanstalk</dd>
       <dt>C</dt>
       <dd>Calculator</dd>
       <dd>Cane</dd>
       <dd>Camera</dd>
       <dd>Camel</dd>
       <dt>D</dt>
       <dd>Duck</dd>
       <dd>Dime</dd>
       <dd>Dipstick</dd>
       <dd>Drone</dd>
       <dt>E</dt>
       <dd>Egg</dd>
       <dd>Elephant</dd>
       <dd>Egret</dd>
   </dl>
    body {
        width: 500px;
        height: 1100px;
        margin: 0 auto;
      }

      dt {
          background-color: black;
          color: white;
          padding: 10px;
          position: sticky;
          top: 0;
          margin: 1em 0;
      }
上次编辑于:
本站勉强运行 小时
本站总访问量
網站計數器