CSS 世界 的那些实用技巧
CSS 世界 这是一本专门写css的书，书中并没有涉及 css3 的知识，但是它所展现的东西很多都是我从未知道或以前未重视的。这是一本能够开阔视野的书，我把这本书推荐所有从事前端的人。
下面都是我在看这本书所记录的一些新奇但实用的布局技巧。
max-width
max-系列的权重非常的高，甚至超越了 !important。如下代码 p 最后的宽度是 150px
p {
width: 200px !important;
max-width: 150px;
}
当 min-width 与 max-width 大小有冲突的时候会采用最大原则，即谁大取谁的值。如下代码最后的宽度是 1400px
.container {
min-width: 1400px;
max-width: 1200px;
}
当我们实现一个元素高度逐渐变大的效果，但是我们又不知道这个元素的具体高度，这个时候我们就可以用 max-height 的方式。我们不需要给以具体高度值就可以实现这个效果。当然这样做会出现元素高度达到实际高度但是动画还没结束。会有动画延迟的感觉。
.element {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s;
}
.element.active {
max-height: 666px; /* 一个足够大的最大高度值 */
}
content attr
类似于 img 的 alt。
.icon:before {
content: attr(data-title);
}
padding 与 margin
这种三道扛的效果我们经常要遇到，我们可以借助 background-clip 与padding 实现这种效果。不需要任何图片。
.icon-menu {
display: inline-block;
width: 140px;
height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
}
当我们要实现这种两端对齐的效果，我们给每一个列表都设置 margin-right 然后去掉最后一个的 margin-right。实现这种效果需要借助 css3 的新增选择器，有时候还需要 js，或者直接用 flex 布局。但我们利用给父级 margin 负值就可以轻松实现。
ul {
margin-right: -20px;
}
ul > li {
float: left;
width: 100px;
margin-right: 20px;
}
border
因为 ie6 下 border 设置虚线显示的是圆点。所有用这种方法可以在 ie6 下实现一个圆。
.box {
width: 150px;
height: 150px;
/* 超出区域隐藏，只显示一个圆 */
overflow: hidden;
}
.dotted {
width: 100%;
height: 100%;
border: 149px dotted #cd0000;
}
利用边框制作三角形其实是一个广为人知的方法，还是写一下吧。
注意：边框也是 css 标准的上右下左的设置顺序，需要上面方向的三角形就给它相反的方向设置想要的颜色，其他方向都设为透明色。
div {
width: 0;
border: 10px solid;
border-color: #f30 transparent transparent;
}
ex
ex 是一个被忽略的距离单位，它表示一个小写字母 x（x、y、z 的 x）的高度。是一个相对单位，它和父元素的字号有关系。
这种图标和字垂直居中的布局我们经常见到，只要这样设置就可以简单实现，而且还不会受字号，页面高度的影响。
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(xxx.png) no-repeat center;
}
vertical-align
可以利用 vertical-align 实现水平垂直居中，这种定位方法不用知道居中元素的宽高度，兼容ie6
下面模拟的是一个全屏的对话框。这种居中方法核心是父元素的 text-aglin:center，在写一个居中元素的兄弟元素给与 display: inline-block;height: 100%;vertical-align: middle; 三个属性，自身设置 display: inline-block; vertical-align: middle;
<div>
<div>....</div>//要居中的元素
<div></div>
</div>
#container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5), none;
text-align: center;
white-space: nowrap;
font-size: 0;
z-index: 99;
}
#dialog {
display: inline-block;
vertical-align: middle;
}
#assist {
display: inline-block;
height: 100%;
vertical-align: middle;
}
BFC
以前就知道 overflow:hidden 一种触发 BFC 的方法，其实以下都能出发 BFC。
- <html> 根元素；
- float 的值不为 none；
- overflow 的值为 auto、scroll 或 hidden；
- display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
- position 的值不为 relative 和 static。
overflow
滚动条是 html 所产生的所有想要页面禁止出现滚动条没必要拉着 body 一起设置 overflow:hidden，
当页面加载非常慢的时候会出现页面向左偏移的情况，因为滚动条占据了 body 的宽度导致 body 偏移。下述代码是让 body 占据整个 window 的宽度。这样不会出现页面加载慢时导致居中元素偏移的问题。(现在用户宽带大幅度提升基本上不会有这种情况了)
html {
overflow-y: scroll; /* for IE8 */
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
absolute
当我使用绝对定位的时候，总会老老实实的子决父相。但是无依赖的绝对定位效果会更好。无依赖的布局方，即不使用传统的子决父相的方式。不使用 left 和 top 控制，用 margin 或者 transform 来控制位置。
.icon-warn {
position: absolute;
margin-left: -20px;
width: 20px;
height: 20px;
background: url(warn.png) no-repeat center;
}
absolute 与 text-align 相配合实现水平居中。
<p > <img src="1.jpg" > </p >
p {
text-align: center;
}
img {
position: absolute;
margin-left: ...;
}
虽然本示例中图片位置确实受 text-align 属性影响，但是并不是 text-align 和 absolute 元素直接发生关系，absolute 元素的 display 计算值是块状的，text-align 是不会有作用的。这里之所以产生了位置变化，本质上是 幽灵空白节点 和 无依赖绝对定位 共同作用的结果
幽灵空白节点 是内联盒模型中非常重要的一个概念，具体指的是：在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个 空白节点 一样。这个 空白节点 永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。
当然我们是需要知道内联元素的宽度的。margin-left 的值与负的一般宽度。与父元素 position:relative 然后定位元素设置 left:50% 的方法类似。但不会有层级问题。
2. absolute 与 overflow
关于绝对定位元素是否会受到 overflow 的影响有如下判断
overflow 不是定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素如果 ，则overflow 无法对 absolute 元素进行剪裁。
根据上述所言。无依赖的 absolute 不会被父级的 overflow 所裁剪。
注意：由于 transform 在各个浏览器对overflow的支持不一样所以当元素还是被裁剪的话，试着找找是不是transform的原因
3. absolute 与流体自适应
当一个绝对定位元素的相对方向都有定位的时候该元素就会拥有一种和文档流相似的流体特性如
.box {
position: absolute;
left: 0; right: 0;
}
当一个绝对定位元素有如下的设置就能覆盖整个浏览器。注意它的宽度高度是一种 格式化宽度/高度，于 width:100% 完全不同。给与 margin 也不会出现超出屏幕。
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
根据上面所说可以使用 margin:auto 实现水平居中的效果,如果有没有 left: 0; right: 0; 这种能够激发流体特性的属性就不会有这种居中效果。当然想要用 margin:auto auto 实现垂直水平居中是不能的。毕竟在标准文档流也没有这种效果。
.element {
width: 300px;
height: 200px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
fixed
fixed 也可以用无依赖布局，如下实现一个在元素内部的固定定位
<div class="father" >
<div class="son" > </div >
</div >
.father {
width: 300px;
height: 200px;
position: relative;
}
.son {
width: 40px;
height: 40px;
position: fixed;
margin-left: -40px;
}
与绝对定位的无依赖一样不能使用 left 等定位属性。
获取滚动条宽度
如下代码可以获取滚动条宽度，避免了禁用滚动条之后的页面偏移现象。
//显示
var widthBar = 17,
root = document.documentElement;
if (typeof window.innerWidth == "number") {
widthBar = window.innerWidth - root.clientWidth;
}
root.style.overflow = "hidden";
root.style.borderRight = widthBar + "px solid transparent";
//隐藏
var root = document.documentElement;
root.style.overflow = "";
root.style.borderRight = "";
z-index
z-index 在css2 中只对定位元素有用但是在 css3 中加入了对 flex 的支持
font-size
这种效果也可以借助 vertical-align 和 font-size 实现。
p {
font-size: 16px;
line-height: 1.5;
}
p > img {
vertical-align: -25%;
vertical-align: 0.6ex；;
}
子元素 vertical-align 使用百分比可以实现图标与文字居中的问题而且不受字体大小的影响，但是会受到行高的影响。如果是 ex 不仅可以实现而且不会受到行高的影响。
text-decoration
在中文下 text-decoration 有可能与下一行的字出现重叠这时候我们用边框来作为下划线，边框不要设置颜色，它会默认的和字体一个颜色。
显示与隐藏
利用 visibility 和绝对定位来实现隐藏而且不占位置。或者透明度加绝对定位
.hidden {
position: absolute;
visibility: hidden;
}
.opacity {
position: absolute;
opacity: 0;
filter: Alpha(opacity=0);
}
visibility 与 display 的小区别
visibility 的子元素会被隐藏但是如果设置了 visibility:visible 就会显现出来，但是 display:none 的元素就没有这样的效果。
湘公网安备 43102202000103号