上一篇:《CSS世界》笔记三:内联元素与对齐
下一篇:《CSS世界》笔记五:CSS层叠规则及元素隐藏
写在前面
原本博客名为“浮动与定位”,但是《CSS世界》第六章节的内容不仅有浮动定位,很大一部分篇幅都在讲BFC和overflow。更吸引人的是,作者将float/absolute/relative形容为“魔界三兄弟”,将原本枯燥的理论知识硬生生变成了玄幻小说。
absolute
和float
可以看作是“同父异母”的兄弟关系。它们的父亲是同一个人,是CSS世界的大魔王,属于魔界;但母亲不是一个人,absolute
的母亲来自魔界,而float
的母亲来自人界如果说
float
和absolute
是同父异母的兄弟关系,那么relative
则是absolute
的亲大哥当年魔界圣母
position
生了好几个儿子,其中一个就是法力很强也很霸道的absolute
,考虑到日后absolute
会找float
的麻烦而去正常流世界,以其个性和霸道的能力,一定会影响正常流世界的秩序,于是圣母position
让其性格敦实的大儿子relative
直接在正常流世界生活,帮忙盯着absolute
,不要让absolute
这个小魔鬼到处惹是生非
一、浮动float与BFC
1.1 浮动
浮动本质:实现文字环绕效果
现阶段使用浮动一般是用来实现盒子水平显示(左右两栏布局),但是往往会造成浮动元素父盒子的塌陷;那么应该如何清除浮动的影响呢?
网上随意百度即可查询到清除浮动的方法:
- 父元素设置overflow属性来清除浮动
- 使用额外标签法
- 伪元素清除
上面2、3两种方法都是用clear进行清除,而clear清除浮动属性本质:clear 属性是让自身不能和前面的浮动元素相邻,从而做到了清除浮动的效果。例子如下:
/* ul>li*7 */
li {
width: 20px;
height: 20px;
background-color: #ccc;
margin: 5px;
float: left;
}
li:nth-of-type(3) {
clear: both;
}
结果如下:
而“父元素设置overflow属性”的方式则是利用了BFC的特性(下面将会详细讲解)
1.2 结界BFC
BFC
全称为block formatting context
,中文为“块级格式化上下文”。相对应的还有IFC
,也就是inline formatting context
,中文为“内联格式化上下”
BFC表现原则:如果一个元素具有 BFC,内部子元素再怎么翻江倒海、翻云覆雨,都不会影响外部的元素。所以,BFC 元素是不可能发生 margin 重叠的,因为 margin 重叠是会影响外面的元素的;BFC 元素也可以用来清除浮动的影响,因为如果不清除,子元素浮动则父元素高度塌陷,必然会影响后面元素布局和定位,这显然有违 BFC 元素的子元素不会影响外部元素的设定
如何触发BFC:
-
<html>
根元素 - float 的值不为 none
- overflow 的值为 auto、scroll 或 hidden
- display 的值为 table-cell、table-caption 和 inline-block 中的任何一个
- position 的值不为 relative 和 static
因此:只要满足上面任何一条(触发了BFC),元素就不会发生margin重叠和float带来的“高度塌陷”问题
张大大布拉布拉用了大量的篇幅对比了实现BFC的各种方式,最后得出结论:overflow:hidden
是触发BFC最理想副作用最小的方式
1.3 float+BFC实现健壮的两栏布局
<div class="father">
<img src="1.jpg">
<p class="bfc">我是帅哥,好巧啊,我也是帅哥,原来看这篇博客的人都是帅哥~</p>
</div>
.father {
max-width: 200px;
border: 1px solid #444;
}
.father img {
float:left;
width: 60px;
margin-right: 10px;
}
.bfc {
overflow: hidden;
}
展示如下:
原理:利用BFC的结界特性避免了文字环绕(浮动),实现左侧固定,右侧自适应的两栏布局
二、overflow属性
再次声明:overflow:hidden是触发BFC的最佳结界
2.1 overflow与滚动条
滚动条相关知识
移动端的屏幕尺寸本身就有限,滚动条一般都是悬浮模式,不会占据可用宽度,但是在PC端,尤其Windows操作系统下,几乎所有浏览器的滚动栏都会占据宽度,而且这个宽度大小是固定的
如何获取浏览器滚动栏宽度:
<div class="box">
<div id="in" class="in"></div>
</div>
.box { width: 400px; overflow: scroll; }
console.log(400 - document.getElementById("in").clientWidth);
自定义滚动条属性:
- 整体部分,::-webkit-scrollbar;
- 两端按钮,::-webkit-scrollbar-button;
- 外层轨道,::-webkit-scrollbar-track;
- 内层轨道,::-webkit-scrollbar-track-piece;
- 滚动滑块,::-webkit-scrollbar-thumb;
- 边角,::-webkit-scrollbar-corner。
平时开发中比较常用的三个属性:
::-webkit-scrollbar { /* 血槽宽度 */
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb { /* 拖动条 */
background-color: rgba(0,0,0,.3);
border-radius: 6px;
}
::-webkit-scrollbar-track { /* 背景槽 */
background-color: #ddd;
border-radius: 6px;
}
小技巧:处理页面滚动条晃动问题(一般出现在加载数据后超过一屏)
html {
overflow-y: scroll; /* for IE8 */
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
2.2 overflow与文本溢出点点点
单行文本溢出:
.ell {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
多行文本溢出(此处为2行):
.ell-rows-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
2.3 overflow与锚点定位
两种情况可以触发锚点定位行为的发生:
(1)URL地址中的锚链与锚点元素对应并有交互行为;
<a href="#1">发展历程></a>
<h2 id="1">发展历程</h2>
利用上面的结构,点击a标签,能够使页面滚动到h2处
(2)focus 锚点定位,可focus的锚点元素处于focus状态
“focus 锚点定位”指的是类似链接或者按钮、输入框等可以被 focus 的元素在被 focus 时发生的页面重定位现象。举个很简单的例子,在 PC 端,我们使用 Tab 快速定位可 focus 的元素的时候,如果我们的元素正好在屏幕之外,浏览器就会自动重定位,将这个屏幕之外的元素定位到屏幕之中
锚点定位的两个小案例,以供参考:
注意!注意!注意!元素设置了 overflow:hidden 声明,里面内容高度溢出的时候,滚动依然存在,仅仅滚动条不存在!,所以我们能用锚点定位或者js控制滚动
三、绝对定位absolute
3.1 absolute的包含块
(1)块级元素:相对于第一个position不为static的祖先元素,直到html
(2)行内元素:
- 单行:假设给内联元素的前后各生成一个宽度为 0 的内联盒子(inline box),则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”
- 多行:未定义行为,我们以chrome表现为主(由第一行开头和最后一行结 尾的内联盒子共同决定)
直接看概念一般是一头雾水,上图吧(红色虚线区域为包含块)
案例:基于行内元素定位的tips实现
<div class="tip icon" data-title="删除"></div>
.icon {
margin: 50px 0 0 50px;
display: inline-block;
width: 20px;
height: 20px;
background: url(http://demo.cssworld.cn/images/6/delete.png) no-repeat center;
}
.tip {
position: relative;
&::before,
&::after {
position: absolute;
transform: translateX(-50%);
left: 50%;
visibility: hidden;
}
&::before {
content: attr(data-title);
top: -33px;
padding: 2px 10px 3px;
line-height: 18px;
border-radius: 2px;
background-color: #333;
text-align: left;
color: #fff;
font-size: 12px;
/* 必须加,否则一柱擎天 */
white-space: nowrap;
}
&::after {
content: "";
border: 6px solid transparent;
border-top-color: #333;
top: -10px;
}
&:hover::before,
&:hover::after {
transition: visibility .1s .1s;
visibility: visible;
}
}
最终实现效果:
3.2 absolute无依赖定位
注意:absolute 是非常独立的 CSS 属性值,其样式和行为表现不依赖其他任何 CSS 属性就可以完成,正是基于这一点才有了无依赖定位的强大
首先思考一个问题:如果一个标准流元素后面接着一个absolute元素(未设置left等方位属性),此时如何显示?定位元素后又接着一个标准流元素,此时又该如何显示?
<div class="demo">
哈哈,我在定位元素前面
<span class="poa"></span>
呐!我还在定位元素后面呢
</div>
.poa {
position: absolute;
width: 20px;
height: 20px;
background: rgba(255, 0, 0, .5);
}
展示结果:
仅设置绝对定位时,定位元素仍会保持在html结构位置,且不占据空间。由此,我们可以使用margin相对于原始位置定位该元素以实现各种功能。下面是几个案例:
(1)案例1:简单图标定位
.icon-hot {
position: absolute;
width: 28px;
height: 11px;
margin: -6px 0 0 2px;
}
(2)案例2:校验表单
/* 邮箱报错小图标 */
.icon-warn {
position: absolute;
margin-left: -18px;
width: 16px; height: 20px;
background: url(/images/6/warn.gif) no-repeat center;
}
/* 定位在盒子外部的红色星号 */
.regist-star {
position: absolute;
margin-left: -1em;
font-family: simsun;
color: #f30;
}
(3)案例3:input中的icon和下拉
/* 搜索按钮的无依赖绝对定位 */
.search-btn {
width: 20px; height: 20px;
border: 9px solid #fff;
background: #ddd url(search.png) no-repeat center;
position: absolute; margin: 1px 0 0 -40px;
}
/* 下拉列表的无依赖绝对定位 */
.search-datalist {
position: absolute;
width: 248px;
border: 1px solid #e6e8e9;
background-color: #fff;
}
3.3 absolute + text-align用法
text-align 居然可以改变 absolute 元素的位置
<p><img src="1.jpg"></p>
p { text-align: center; }
img { position: absolute; }
原理:img前的“幽灵空白节点”受text-align:center;
的影响居中,图片的“无依赖绝对定位”在“幽灵空白节点”后面
<div class="constr">
<div class="alignright">
<span class="follow">
<img src="circle.png">
<img src="backtop.png">
</span>
</div>
</div>
.constrcons {
width: 80%;
margin: auto;
background-color: #f0f3f9;
}
.alignright {
height: 0;
text-align: right;
overflow: hidden;
}
.alignright:before {
content: "\2002";
}
.follow {
position: fixed;
bottom: 100px;
z-index: 1;
}
.follow > img {
display: block;
margin: 10px;
}
优势:icon相对于主体内容定位,而不是相对于html
3.4 absolute + clip用法
剪裁属性 clip 要想起作用,元素必须是绝对定位或者固定定位,也就是 position 属性值必须是 absolute 或者 fixed
最佳可访问性隐藏
.clip {
position: absolute;
clip: rect(0 0 0 0);
}
采用这种方法隐藏的元素原本的行为特性也很好用。例如,依然可以被 focus,而且非常难得的是就地剪裁,因为属于“无依赖的绝对定位”
3.5 absolute流体特性
当 absolute 遇到 left/top/right/bottom 属性的时候,absolute 元素才真正变成绝对定位元素
absolute流体特性的条件是:对立方向同时发生定位的时候
- 如果设置
left:0; right:0;
表现为格式化宽度,水平方向保持流动性 - 如果设置
top:0; bottom:0;
表现为格式化高度,垂直方向保持流动性
绝对定位元素的margin:auto
的填充规则和普通流体元素的一模一样:
- 如果一侧定值,一侧 auto,auto 为剩余空间大小;
- 如果两侧均是 auto,则平分剩余空间。
.element {
width: 300px;
height: 200px;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
}
四、总结
- 浮动float以及clear属性
- BFC触发条件及利用BFC实现更为健壮的布局
- overflow属性
- 内联盒子绝对定位的包含块
- absolute无依赖定位
- absolute裁剪及流体特性
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。