浮动与定位

Frank
  • 前端基石
  • CSS3
  • 浮动
  • 定位
大约 6 分钟约 1762 字...

浮动

本质功能:实现并排

浮动使用的要点

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

浮动的顺序贴靠特性

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

浮动顺序贴靠性

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

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

利用浮动实现网页布局

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

BFC 规范和浏览器差异

BFCBox 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

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.
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1