浮动与定位
大约 4 分钟约 1280 字...
浮动
- 要浮动,并排的盒子都要设置浮动
- 浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流,一律能够设置宽度和高度
BFC
BFC
( Box Formatting Context
,块级格式化上下文) 是一块独立渲染区域,内部元素的渲染不会影响边界以外的元素,反之亦然
如何创建 BFC
float
的值不是none
positon
的值是absloute
或者fixed
display
的值是inline-block
,flex
,或者inline-flex
overflow
的值不是visible
BFC 的作用
- 清除浮动
BFC
可以取消盒子margin
塌陷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;
}
子元素浮动则父元素高度塌陷,必然会影响后面元素布局和定位,所以需要去清除浮动的影响
因为盒子内容不知道的情况下不好设置高度,可采用下面几种方法:
让内部有浮动的父盒子形成
BFC
,此时最简单的方法就是overflow:hidden
属性给后面的父盒子设置
clear:both
属性。(不太推荐,此时两个父盒子的高度仍然为 0,margin
失效)使用
::after
伪元素给盒子添加最后一个子元素,并且给::after
设置clear:both
(margin
有效)
/* 给两个盒子加上clearfix类名*/
.clearfix::after {
content: '';
clear: both;
/* 一定要转为块级元素,clear属性只对块级元素才有效 */
display: block;
}
- 在两个盒子之间加一个
div
盒子,设置clear:both
(此时两个父盒子仍然没有高度,margin
失效,但是可以通过设置两个父盒子之间的盒子的高度实现缝隙效果)
定位
相对定位
position:relative;
- 盒子可以相对自己原来的位置进行位置调整,称为相对定位
- 相对定位的元素,会在“老家留坑”,本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响,有可能会出现覆盖其他元素的情况
用途
- 微调元素位置
- 相对定位的元素,可以用作绝对定位的参考盒子
绝对定位
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
数值大的能够压住数值小的
用途
- 压盖、遮罩效果
css
精灵图- 结合
js
实现动画
固定定位
position:fixed
- 固定定位与绝对定位相似,但固定定位是相对于浏览器视口本身。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素
- 固定定位脱离标准文档流
用途
- 返回顶部
- 楼层导航
代码见: BOM 章节
粘性定位
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;
}