《css世界》的那些实用技巧

时间 2019-11-29

标签 css世界那些实用技巧栏目 CSS 繁體版

原文原文链接

下面全部的内容都来至张鑫旭所著的《css世界》。css

《css世界》这是一本专门写css的书，书中并无涉及css3的知识，可是它所展示的东西不少都是我从未知道或之前未重视的。这是一本可以开阔视野的书，我把这本书推荐全部从事前端的人。html

下面都是我在看这本书所记录的一些新奇但实用的布局技巧。前端

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。css3

.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 实现水平垂直居中，这种定位方法不用知道居中元素的宽高度，兼容ie6flex

下面模拟的是一个全屏的对话框。这种居中方法核心是父元素的text-aglin:center，在写一个居中元素的兄弟元素给与display: inline-block;height: 100%;vertical-align: middle;三个属性，自身设置display: inline-block; vertical-align: middle;动画

<div id="container">
  <div id="dialog">....</div>//要居中的元素
  <div id="assist"></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。ui

<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的元素就没有这样的效果。

这些就是我阅读《css世界》所学到的技巧，更多内容请阅读原书

引用：《css世界》