float
兼容性问题:
- 包裹性
- 块状化并格式化上下文
- 破坏文档流
- 没有任何 margin 合并
clear
clear 只对块级元素有效,而 :after 等伪元素默认是内联元素。clear:both 的本质是不让自己和 float 元素在一行显示,并不是真正意义的清除浮动。
BFC
block formatting context,格式化上下文。
触发 BFC 的情况:
- HTML 根元素
- float 的值不为 none
- overflow 的值为 auto、scroll、hidden
- display 的值为 table-cell、table-caption、inline-block 中的任何一个
- position 的值不为 relative 和 static
自适应布局
<style>
img {
float: left;
margin-right: 10px;
}
.animal {
overflow: hidden;
}
</style>
<div class="father">
<img src="img/chlid.jpg">
<p class="animal">
小猫1,小猫2
</p>
</div>
overflow
彻底清除浮动的影响,最合适的属性不是 clear 而是 overflow。
裁剪界限
当元素超出容器宽度和高度限制,裁剪的边缘是 border box 的内边缘。
overflow-x 和 overflow-y
- visible:默认值
- hidden:裁剪
- scroll:滚动条区域一直在
- auto:不足以滚动时没有滚动条,可以滚动时滚动出现
如果 overflow-x 和 overflow-y 的表现规则要比看上去更复杂,如果其中任何一个设置了 visible,而另一个不是 visible,那么 visible 会被当成 auto 来解析。
滚动条
HTML 元素和 textarea 默认产生滚动条,其 overflow 的值默认为 auto。
去除页面默认滚动条
html {
overflow: hidden;
}
IE 以上浏览器滚动条默认宽度都是 17px。
自定义
::-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;
}
依赖 overflow 的样式表现
实现单行文字溢出省略
.ell {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
多行文字隐藏
.ell-rows-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
锚点定位
触发条件:
- URL 地址中的锚链与锚点(非隐藏元素)与元素对应并有交互行为
- 可 focus 的锚点元素处于 focus 状态
锚点定位的本质是通过改变容器滚动高度或者宽度实现的。 overflow:hidden
的元素也会发生锚点定位。锚点定位本质上是改变了 scrollTop 或 scrollLeft 值。锚链定位的方式会触发窗体的定位,而 focus 的定位方式不会触发窗体的定位。
绝对定位
和 float:left/right 一样,position:absolute 具备“块状化”、“包裹性”、“破坏性”等特征。
包裹块
- 根元素(很多场景下可以看成是 )被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小。
- 对于其它元素,如果元素的 position 是 relative 或者 static,则“包裹块”由最近的块容器祖先盒的 content box 边界形成。
- 如果元素 position:fixed,则“包含块”是“初始化包含块”。
- 如果元素 position:absolute,则“包含块”由最近的 position 不为 static 的祖先元素建立。
- 祖先元素是纯 inline 元素
- 假设给内联元素的前后各生成一个宽度为 0 的内联盒子,则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”。
- 如果该内联元素被跨行分割了,那么“包含块”是未定义的,也就是 CSS2.1 没有明确定义,浏览器自己发挥。
- 非纯 inline 元素,“包含块”由祖先的 padding box 边界形成。
- 祖先元素是纯 inline 元素
“包含块”可以受 ::frist-line 的影响,但不受 ::frist-letter 伪元素的影响。
对于绝对定位的元素,height:100% 是第一个具有定位属性值的祖先元素的高度,而 height:inherit 则是单纯的父元素的高度继承。
包裹性造成的“文字最大可用范围”问题可以用 white-space:nowrap
解决。
具有相对特性的无依赖 absolute 绝对定位
absolute 其样式表现和行为不依赖于其它 CSS 属性就可以完成。不需要设置 relative 也能完成所需效果。
absolute 与 text-align
对于块状的 absolute 元素,text-align 是不会有效果的。非块状的元素因为有“幽灵空白节点”和“无依赖绝对定位”共同作用,会受 text-align 影响但不会是完全居中的行为。
右下角“返回顶部”以及“反馈”小按钮
<style>
.alignright {
height:0;
text-align:right;
overflow:hidden;
}
.alignright:before {
content:'\2002';
}
.follow {
position:fixed;
bottom:100px;
z-index:1;
}
</style>
<div class="alignright">
<span class="follow"></span>
</div>
absolute 与 overflow
如果 overflow 不是绝对定位元素,同时绝对定位元素和 overflow 容器之间没有定位元素,则 overflow 无法对 absolute 元素进行裁剪。
以下两个都不会被裁剪
<div style="overflow:hidden;">
<img src="1.jpg" style="position:absolute;">
</div>
<div style="position:relative;">
<div style="overflow:hidden;">
<img src="1.jpg" style="position:absolute;">
</div>
</div>
出现 transform 属性时对 overflow 裁剪绝对定位元素的数据
- overflow 元素自身 transform
- IE9 以上版本浏览器、Firefox 和 Safari(OS X、iOS)裁剪
- Chome 和 Opera 不裁剪
- overflow 子元素 transform
- IE9 以上版本浏览器、Firefox 和 Safari(OS X、iOS)裁剪
- Chome 和 Opera 裁剪
absolute 与 clip
clip 起作用元素必须是绝对定位或者固定定位。它的语法如下:
clip:rect(top, right, bottom, left)
// 或者
clip:rect(top right bottom left)
这四个值不能缩写,不支持百分比值。
fixed 固定定位的裁剪
overflow 属性往往不能裁剪固定定位的属性,必须使用 clip。
.fixed-clip {
position: fixed;
clip: rect(30px 200px 200px 20px);
}
最佳可访问性隐藏
“可访问性隐藏”指的是内容肉眼看不到,但是设备却能进行识别和访问的隐藏。
标识文字隐藏
<style>
.logo h1 {
position: absolute;
clip: rect(0 0 0 0);
}
</style>
<a href="/" class="logo">
<h1>CSS 世界</h1>
</a>
clip 的渲染
clip 隐藏仅仅决定了那一部分是可见的,非可见无法影响点击事件。视觉上虽然隐藏,但是元素的尺寸依然是原来的尺寸。在 IE 和 Firefox 下抹掉了不可见区域尺寸对布局的影响,Chome 却保留了。
absolute 的流体特征
当 absolute 的元素有 left、top、right、bottom 属性的时候,元素才真正变成绝对定位元素。绝对定位的元素“对立方向同时发生定位”的时候才会具有流体特征。
margin:auto 居中
绝对定位元素的 margin;auto 的填充规则和普通流体元素的一模一样:
- 如果一侧定值,一侧 auto,auto 为剩余空间大小。
- 如果两侧均是 auto,则平分剩余空间。
.element {
width: 300px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
相对定位
relative 对 absolute 的限制
relative 可以让元素依旧保持在正常的文档流中。
relative 与定位
relative 的定位有两个特征:
- 相对自身
- 无入侵
relative 定位的 left、top、right、bottom 的百分比是相对于包含块计算的,而不是自身。top 和 bottom 的百分比值计算和 height 的百分比值计算都是基于高度计算的。相对定位的 left、right 同时存在 right 失效,bottom、top 同时存在 bottom 失效。
最小影响原则
布局实战原则:
- 尽量不要使用 relative,如果想定位某些元素,看看能否使用“无依赖的绝对定位”。
- 如果场景受限,一定要使用 relative,则该 relative 务必最小化。
固定定位
不一样的“包含块”
position: fixed 的“包含块”是根元素,近似看成 HTML 元素。唯一可以限制它的只有 HTML 元素。
position:fixed 的 absolute 模拟
<div class="page">固定定位元素</div>
<div class="fixed"></div>
<style>
html,body {
height: 100%;
overflow: hidden;
}
.page {
height: 100%;
overflow: auto;
}
.fixed {
position: absolute;
}
</style>
参考
【1】CSS 世界@张鑫旭