哪些专业的CSS技巧是初级web前端开发工具

xman

这篇文章的读者应该是刚开始开发，或者准备开始开发前端的有经验的开发者，总结了一些非常有用的可以快速上手的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如下：

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

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

　　块级元素的居中方式

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

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

　　元素内的文字居中

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

• .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这种相对单位，适配性要好。

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

　　横向显示一个列表

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

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

　　控制元素的可见性

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

• .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，选择网页就可以了。详细信息也请参考官方网站。

　　参考

• https://css-tricks.com/all-about-floats/
• https://css-tricks.com/rems-ems/
• http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css
• https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
  
  

　　应该经常访问的网站

• http://www.w3schools.com/
• http://www.w3school.com.cn/index.html
• http://www.css3maker.com/index.html
• https://developer.mozilla.org/en-US/
• https://css-tricks.com/