前端之旅——CSS篇

      我觉得CSS其实没有什么可以说的，对于现在的我来说，在还不知道它的规则的时候还是挺困难的。那么接下来我所写的东西，大佬看见了不要笑：“哈哈哈，这么简单还拿出来说。”我记得我以前在培训C++的时候看见一个新人写静态，里面用了满屏的id。所以，就算是简单的东西，也略微提一下，这算是针对新手的文章吧。又不能太基础，那样就会变得像一个教程，这并不是。

日常瞎搞

      CSS的规则很简单，一个“.”就可以让页面变个样。CSS样式里面的“.”对应HTML中的class属性，“#”对应HTML中的id属性。先说下为什么不用id写样式，id是唯一的容易打架，所谓的层级关系就是在胡闹，基于它的唯一性，通常和JS配合使用。

      静态页面只用class就可以掌控全局，对于一个完全新手，一个样式一个名字完全没问题。只不过这样会存在很多问题，比如两个样式差不了多少要提取相同部分，再比如要对DOM结构做精确样式。这样就需要知道样式更多复杂的规则——选择器，依靠选择器来达到更为精确的样式控制，更轻松地对DOM进行样式控制。但这还不够，为了html达到语义化、结构更清晰合理，这就要用一些CSS的伪类伪元素来达到目的，比如:first-child、:nth-child、:after、:before等等。举个例子，最常见的清除浮动。

.clearfix:after {
  content: '';
  display: table;
  height: 0;
  clear: both;
}

      CSS本身不复杂，前面提到的东西可以诠释为：层级关系、优先级、样式冲突及抽离。这些属于基础的理论，而某些属性在理论中未必能知道的，比如元素的显示隐藏。显示隐藏有三种方式：display、visibility、opacity。display:none隐藏元素后不再占用位置且不能被点击；visibility:hidden隐藏元素后会继续占用位置且不能被点击；opacity:0隐藏元素后会继续占用位置且可以被点击。还有一种隐藏元素的方式是将width或者height的值设置为0，还要加上overflow:hidden来避免内部元素溢出显示，很显然这样操作也是不可点击也不会占据展示位置。

      在CSS中有很多这样的细节需要在应用中发现的，比如display:inline-*系列，好处就是可以做为块级元素在行内展示，方便同时它会带来一个莫名其妙的边距。它还不算是兼容问题，处理兼容在早期的浏览器中是相当痛苦的事，浏览版本的差异，浏览器厂商的差异，通常需要一些hack才能处理，包括现在还会应用到诸如-webkit-tap-highlight-color之类的独占属性。

时代发展

      随着浏览器的广泛兼容，CSS还隐藏一个骚操作——函数，如linear-gradient()，clac()，var()等等。不管他怎样的骚操作，现在都出现了更为骚操作的模式——动态样式——less、sass之流。有了这些语言能让样式更为合理化掌控，但即便这些语言的诞生，也免不了要CSS的基础，免不了要做兼容处理。市场上大多浏览器都是与时俱进，对CSS3支持得很好，只有少数的靠着系统称王称霸的浏览器也只能等着它被完全赶出市场。CSS3在兼容上比较标准化，通常靠着前缀就能解决，如-webkit-，-ms-，-o-，-moz-。如此一来，就没有之前的hack那么复杂，就是同一厂商，它的玩法都是花式的。因为它是标准化的，所以Autoprefixer就可以帮我们完成这些重复的操作。

      在这种花式玩法面前，WAP端还算幸运的，做PC端还是不得不了解一些hack写法。对于这些hack写法本文就再赘述，这些问题基本上是在某一个厂商出现，其余厂商基本上会引导用户进行更新。当然，还在用需要hack兼容的浏览器的用户也就剩机关单位了，要做这些兼容就问度娘吧，就懒得整理了，毕竟时代是要发展的。

      兼容是CSS的难点之一，这是在实战中积攒的，或者说只有到了那个时候才会用上的概率的东西，CSS初学者的难点主要是定位和浮动。先说浮动，浮动很多人都会用，但很多人都不爱清除浮动，特别是新手，经常用完浮动就跑了。有些时候不清除没有事，比如前面有浮动，留给后面的元素不足以浮动上去，这时候看着是没问题的，实际上它是没有高度的。通常用完浮动就清除掉，这儿说的是用完。比如上传图片，上传控件是单独的，上传之后的图包裹在与上传控件同一层的DOM中，图片是浮动的。此时图片包裹层是不需要清除，清除之后上传组件就不能占据图片组空缺的位置，这就需要在他们的父级去清除浮动。

<div class="wrapper">
  <div class="images">
    <!-- 上传后图片插入此处 -->
  </div>
  <div class="upload">
    <!-- 上传控件处理 -->
  </div>
</div>

.wrapper:after {
  content: '';
  display: table;
  height: 0;
  clear: both;
}
.images > *, .upload {
  width: 100px;
  height: 100px;
  float: left;
}

      再说说定位。static和relative不复杂。static没有定位，也就是免疫top、bottom、left、right、z-index。relative——相对定位，对static免疫的东西都有效，针对自身的位置产生偏移。产生偏移后仍占据该位置，也就是未脱离文档流。absolute和fixed则是脱离文档流的存在，不会在文档对应的位置占坑。absolute生成绝对定位是相对于父元素，换句话说，它认relative作为父。fixed生成绝对定位是相对于浏览器可视窗口而言的，因而它会随着窗体移动，absolute则不会。值得一提的是：fixed位置是对于窗口产生，而z-index则是对于父级定位元素（relative、absolute）产生！

真枪实弹

      真枪实弹？开玩笑，哪有枪？！对于老鸟，用纯CSS写个动画，纯CSS画个三角，这些都不是事儿。即便真是在面试中，CSS能玩出花我也只能说这公司没正事干，趁早回家别浪费时间。既然文章写到这儿，会有人认为我只会整点稀的，我只好整点干的来撑一下门面。

      1、一个div内部需要并列展示一些元素。

// 使用浮动
.container {
  width: 1000px;
  height: 200px;
  overflow: hidden;
}
.container:after {
  content: '';
  height: 0;
  display: table;
  clear: both;
}
.container > * {
  height: 100%;
  float: left;
}

// 使用flex
.container {
  display: flex;
}

// 使用inline-block
.container {
  font-size: 0;
  white-space: nowrap;
}
.container > * {
  display: inline-block;
  vertical-align: middle;
}

// 视情况而定，最后一种多数情况都能满足
// 还有一种JS动态计算

      2、元素居中

// flex
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 定位50% 负边距定长的50%
.center {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  margin-left: -50px;
}

// transfrom
.transfrom-center {
  width: 100px;
  height: 100px;
  position: relative;
  left: 50%; 
  top: 50%;  
  transform: translate(-50%, -50%); 
}

// table
.table-center {
  display: table;
}
.table-center > * {
  display: table-cell; 
  text-align: center;
  vertical-align: middle;
}

      好了，就这到这儿吧，确实没什么营养，CSS真的没什么难度。当我学会了这些黑操作，我就发现自己一点不像程序员，幸好Nodejs来了！

转载于:https://my.oschina.net/u/3830333/blog/3084257