跳至主要內容

浮动与定位

Mr.Chen前端基石CSS3大约 6 分钟约 1758 字

浮动

最本质功能：实现并排

浮动使用的要点

  • 要浮动，并排的盒子都要设置浮动
  • 父盒子要有足够的宽度，否则子盒子会掉下去

浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素

浮动顺序贴靠性
浮动顺序贴靠性

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是 span 或者 a 标签

利用浮动实现网页布局

  • 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动
  • “大盒子带着小盒子跑”，一个大盒子中，又是一个小天地内部可以继续使用浮动

BFC 规范和浏览器差异

BFC（ Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

一个盒子不设置 height，当内容子元素都浮动时，无法撑起自身我们就说这个盒子没有形成 BFC

See the Pen by zhangfanhang on CodePen.

如何创建 BFC

  1. float 的值不是 none
  2. positon 的值不是 static 或者 relative
  3. display 的值是 inline-block,flex,或者 inline-flex
  4. overflow:hidden

::: tip overflow:hidden 的三个作用

  1. 溢出隐藏:给一个元素中设置 overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。
overflow: hidden; /*溢出隐藏*/
white-space: nowrap; /*规定文本不进行换行*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/
  1. 清除浮动(即形成BFC)
  2. 解决外边距塌陷(即形成BFC)

:::

BFC 的作用

  1. 清除浮动
  2. BFC 可以取消盒子 margin 塌陷
  3. BFC 可以可以阻止元素被浮动元素覆盖(没有实战意义，本身是一种错误的现象，要浮动都浮动)

清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响

清除浮动的方法

父盒子没有设置高度，就会出现下图的问题:

清除浮动
清除浮动
    <style>
    *{
        margin:0;
        padding:0;
    }
        p{
            float: left;
            width: 100px;
            height: 100px;
            background-color:orange;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

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

  1. 让内部有浮动的父盒子形成 BFC，它就能关闭住内部的浮动。此时最好的方法就是 overflow:hidden 属性

  2. 给后面的父盒子设置 clear:both 属性。clear 表示清除浮动对自己的影响，both 表示左右浮动都清除（不太推荐，此时两个父盒子的高度仍然为 0,margin 失效）

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

/*   给两个盒子加上clearfix类名    */
.clearfix::after {
  content: '';
  clear: both;
  /*  一定要转为块级元素  */
  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;

  • 粘性元素根据滚动位置在相对relative和固定fixed之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置
  • 粘性定位元素不会脱离文档流，依然占据文档流的指定位置
See the Pen by zhangfanhang on CodePen.
上次编辑于:
Copyright © 2018-present Mr.Chen