稀有猿诉

十年磨一剑，历炼出锋芒，说话千百句，不如码二行。

初级前端的专业的CSS技巧

这篇文章的读者应该是刚开始开发，或者准备开始开发前端的有经验的开发者，总结了一些非常有用的可以快速上手的CSS布局技巧。

HTML的布局特点

要理解默认的布局流，块级元素是从上到下，行内元素是从左到右。都是左对齐。

一切皆为框，块级元素与行内元素

HTML的元素分为二个种类，一个是块级元素，一个是行内元素。块级元素的特点是独自开启一行，且独自中据一行；行内元素的特点是在一行内显示，自己多大就占据多大空间。可以通过display属性来改变元素默认的显示属性。

常见的块级元素是：div, p, ol, ul, li

常见的行内元素是: a, img, span

元素和容器

对于常见的GUI框架，都有二种东西来做布局，一个是元素（通常叫Widget），另一个是布局管理器，也就是用于管理或者组合Widget用的。在安卓里就是View和ViewGroup。

使用布局管理器的目的也很简单，就是为了把部分变成整体，方便操作。

div是用来组合和管理块级元素的。而span是用来组合和管理行内元素。

建议多多使用div和span来组合和管理你的布局，就像使用ViewGroup来管理和组合View一样。

理解盒子模型

其实，有过其他GUI框架经验的人理解盒子模型很容易，margin是border外的间距，padding是border内间距，整体元素占据的空间就是margin+border+padding+元素本身的大小。

父元素的大小与子元素的关系

比如安卓，父元素的大小是受子元素影响的，父元素可是基于子元素大小来计算（wrap_content），当子元素超出父元素时，子元素是会被clip的。

CSS里却灵活的多，默认的，父元素的大小与子元素没有关系，需要分别单独指定，也无法让其wrap_content。当子元素的大小超过了父元素时，是通过overflow属性的决定如何显示的：hidden，表示clip；scoll表示用scrollbar来滚动。

对齐方式

左对齐或者右对齐也是布局中常见的需求。对于块元素可以通过float属性来控制，默认的float是left。当设置为right时，就可以把元素右对齐。通常后面跟一个clear: both来清除float属性。因为float会改变默认的布局流，后面所有的元素都将按此方式来排，当然这不是期望的。float的介绍以及关于float都是很好的文章。

当然，对于position不是static的，就要通过left/right来控制了。

居中方式

居中也是非常常见的一个需求。

让某一个元素在整个屏幕中完全居中

比如显示一个Dialog，肯定是要在屏幕中央显示的了。 让元素在整体屏幕居中，肯定要把元素从整体文档中拿出来，也就是不能用正常的文档流。所以这个元素应该是position: fixed，然后它的left和top要设置为50%，但是这样子后是元素的左上角是在屏幕正中，所以为了让元素居中还要把元素向左和向上移动其大小的50%，可以通过transform来实现，完整的CSS如下：

1
2
3
4
5
6
7

.center {
   display: block;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

详细的解释请参阅这篇文章。

块级元素的居中方式

把margin设置为auto一般情况下可以把块级元素居中，但需要指定元素的宽和高，这样浏览器才能计算出来，比如：

1
2
3
4
5

.title {
   margin: auto;
   width: 1rem;
   height; 0.4rem;
}

元素内的文字居中

上面的方法只能让p元素在其父元素内居中，但是它内部的文字仍然不居中，比如当有四个文字时，调好了，居中，但是当只有一个文字时却又不能居中了。这里就要用到一个新的显示属性flex，是flexible的缩写，意思是灵活的布局。比如：

1
2
3
4
5
6
7
8
9
10
11

.title {
   display: flex;
   justify-content: center; /* align horizontal */
   align-items: center; /* align vertical */
   /* the following are for Browser compatibility */
   display: -webkit-box;
   display: -webkit-flex;
   -webkit-box-align: center;
   -webkit-flex-align: center;
   -webkit-align-items: center;
}

具体解释可以参考原文以及这里。

定位方式

默认的流式布局，块级元素从上往下排，一个接着一个的。如果想要让某个元素固定在某个位置，或者想要层叠元素怎么办。现在的Web越来越像客户端，有顶部菜单栏，有侧面菜单栏，有弹出式菜单，在层叠式菜单等等。这些常用且又好用的交互方式又是如何实现的呢? 这就要用到position属性了。position也就是给元素定位，确定其在文档(document)中的位置，默认值是static，也就是从上到下，一个挨着一个。

  • relative – 相对于这个元素在正常文档流中的位置，正常流中的位置仍然保留。
  • absolute – 这个元素会从自觉流中移除，就好像它不存在一样。这个元素的定位会相对于它的第一个定位不是static的父元素，也就是从它的父元素向上找，找到第一个定位属性不是static的元素，如果找不到就使用根元素（html）。
  • fixed – 固定在窗口中，从正常流拿出来，其他元素布局就好像属性为fixed的不存在一样，不会随着文档滚动页滚动，可以重叠，用z-index来指定谁在上面，谁在下面。流行的侧面菜单，顶部菜单等都是用此方式实现。

relative，absolute以及fixed属性都要同时使用top/right/left/bottom来为元素指定位置，它们的含义是元素距离父元素上/右/左/下的距离。

大小的度量单位

元素的宽和高，以及字体大小的单位：

  • px – 像素，像素就是一个屏幕可显示的是小单元，通常视觉给出的标注都是以像素为单位
  • em – 相对于父元素的大小，通常这个值会是继承自父元素。所以如果以它为单位，会随着元素的深入这个单位会变得越来越大。
  • rem – 根元素字体高度，通常就是HTML的字体高度。这个值更为通用，因为对于一个Document来说这个值是黑固定的，适配性和通用性更好。
  • pt – 是点的意思(point)，是在打印设备中常用的单位，一个pt等于1/72英寸。它跟像素（px）一样，都是绝对单位，通用性和适配性不好，一般用的比较少。

对于这些单位的详细解释可以参考这篇文章和这篇以及这篇。

用相对单位控制图片的大小

不要用img元素的属性width和height，而是用CSS的width，height，因为img属性width和height仅能使用px作为单位，适配性要差一些，而CSS中的width和height是可以使用rem这种相对单位，适配性要好。

1
2
3
4

.icon img {
   width: 1rem;
   height: rem;
}

横向显示一个列表

把<li>的display属性设置为inline-block即可：

1
2
3
4

.nav ol li {
   display: inline-block;
   text-align: center;
}

控制元素的可见性

有二种方式，一种是把display设置为none，这会让浏览器忽略此元素就好像它不存在一样，在渲染时；另一种方式就是通过visibility属性：

1
2
3
4
5
6

.show {
   visibility: visible;
}
.hide {
   visibility: hidden;
}

注意兼容性

对于一般的属性或者值最好要注意一下子它的兼容性，一般就是在前面加上-webkit-前缀，因为现在四分之三的浏览器都是Webkit系。

工具

欲想事，必先利其器。工具对于开发的重要性对于有经验的人不用多说，是事半功倍的。

开发工具

开发工具首选Webstorm。这是JetBrains的作品，IDEA IntellJ，PyCharm都是深受广大开发者喜欢的作品，也是我首选的IDE（NotePad和Vim偏执狂请走开），虽然我也喜欢Vim的简洁和高效，但是对于堆代码来说IDE是最高效的。跟IDEA和PyCharm不一样，WebStorm没有社区版本，这意味着试用了30天后就必须想办法了。。

调试工具

到今天，几个流行的浏览器都已经有了调度功能，Firefox的Firebugs，Opera的DragonFly，以及Chrome的devtools，Safari也内置了调试工具，至于IE，我还不知道。它们的功能基本上都是一致的：都能实时查看并修改元素，以及元素的CSS属性；能设置JavaScript的断点，单步调试；能查看Console，以及查看Network网络请求以及storage的使用情况。

可能最受欢迎的还是Chrome的devTools，至少，我是喜欢它。它内置，使用方便，不用装其他的东西，不用什么开发者模式。

详细的可以看官网介绍（自备梯子）。

在调试的时候多使用使用感受一下子就好了。多用”审查元素“找到元素，然后在devtools中修改样式，得到合适的样式的值，然后再去修改源码，能大大提高效率。

移动端的工具

如今移动端的流量已经超越PC，而且势头还在增长。一大半的前端都是为移动端而生的。

Chrome DevTools的移动设备模拟器Emulator

打开DevTools后，可以在左上角看一一个PC和移动设备的小Icon，点了后就进入了移动设备模拟器，它有各种模拟器：iPhone5, 6, 6s, Nexus 5, 6，iPad， iPad Mini等等，还可以模拟网络条件，良心工具啊。

可以到官方查看更多信息。

Chrome远端调试

Chrome和Android都是Google的产品，所以难免结合紧密。对于4.3以上的设备，用Chrome可以像调试PC网页那样来调试设备上的网页。只要在PC的Chrome上打开chrome://inpsect，选择网页就可以了。详细信息也请参考官方网站。

参考

应该经常访问的网站

Comments