前端基础学习分享
用a标签制作一个按钮为主线，然后围绕这个按钮，做一些效果样式等操作。附件中可以下载CSS参考手册。
一、工具
工欲善其事必先利其器。我们首先需要准备好调试工具，这里我就简单介绍几种，firefox、chrome以及IE。
1.firefox
我们用到的是firebug，非常好用，工具-》附加组件。这里有一篇firebug教程。
安装好后按F12就可以直接调试了：
2.chrome
chrome的调试工具默认就是自带的，也是按F12就可以出来，但这个调试工具还带了个手机的模拟器，可以用来调试手机页面。
3.IE
IE有许多版本，而一台电脑上面默认安装的只能是一个版本的IE，这个时候就需要IETester来协助了，它能模拟多个版本的IE，不过后面我在调试的时候发现，CSS模拟的还不错，但JS有时候模拟的就不对，所以用这个调试CSS还可以，以后如果要调试JS的话，就自己装个虚拟机来调试吧。里面也带了个调试工具，但不是很好用。
IE8以后，浏览器也会自带调试工具，那个就好用很多了，也能实时修改CSS属性。
4.fiddler
它是一个非常强大的http(s)协议分析工具。如果你需要查看在手机上打开页面时，查看所产生的http请求，那么用这个工具是不错的选择，《使用Fiddler调试手机页面请求 》介绍配置fiddler，让其也能监测手机的请求。
二、基础CSS
先推荐几个以后常用的网站：
- 可以在caniuse上查询各种兼容性。
- html5test可以检测当前访问的浏览器对HTML5特性的支持程度。
- html5readiness以时间纬度展示所有浏览器HTML5特性的可用性。
- HTML5 Boilerplate，最流行的web开发前端模版
- Mozilla开发者网络(MDN)，在这里能够查到最新最全的资料，有些页面是英文的
1.不添加任何样式，朴素的效果如下：
蓝色，下划线，这些都是a标签默认的样式，很多情况下，标签的默认样式是需要重置的。有网友整理了浏览器标签的默认样式，《HTML标签CSS属性默认值汇总》。在我写的另外一篇文章中，展示了一段重置的CSS代码，查看reset.css。
一则，重置后浏览器的兼容性能更好
二来，有些默认属性是很多余的，例如下面的这个下划线，很多地方都不需要这个样式
HTML代码如下，标签都会自己的特有属性，例如下面的href。
<a href="#" title="点击按钮">按钮</a>
在w3school网站上可以看到各个标签的详细属性，有些属性是支持HTML5的浏览器才能使用的，例如下图所示，有个
icon的就是HTML5独有的。
2.去除默认样式，改变字体颜色大小，背景等
CSS代码如下：
.btn{ text-decoration:none; color:#FFF; font-size:20px; line-height:30px; background-color:#27a9e3 }
几个常用属性，奥妙无穷。从CSS参考手册中可以查看到：
color可以有多种指定方式：Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent。
font-size的单位可以是px、em、pt或者是rem。这里《CSS中强大的EM》比较详细的介绍了em。
background在CSS3中又多了几个新属性background-clip、background-size等
一个简单属性的赋值可以是多种的，不同场合用哪种方式比较合适，这是需要调试的，这里只做一个简单的抛砖引玉，有兴趣的可以去按需深入研究下。
3.让按钮更美观——补白
上面那张图中的按钮比较丑，字跟边都帖在一起啦。得内补白一下。
.btn2{ padding:10px }
效果如下所示，虽然只加了一个属性，但是效果明显要好很多了。
补白是在页面布局中经常用到的属性，分为外补白【margin】和内补白【padding】。
下面这张图我是加了margin的，上下左右四个方向都加了，但是上面的外边距在我的firefox中失效了。
这里就要提一下，一些属性在某些场合是失效的，有些情况是不同内核的浏览器显示的不一样，有些可以，有些不行；有些情况是所有浏览器都不行。
这种时候就要通过搜索引擎来搜索了，网上肯定有很多人碰到过相关的问题。
.btn2{ padding:10px; margin:10px }
网上找了张比较立体感的示意图：
这里顺便提下CSS hack技术：
如果你仅仅是要一种浏览器显示正确，那可以完全忽略这段介绍，如果不是，那你可以阅读下。
由 于不同厂商的流览器或某浏览器的不同版本（如IE6- IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现 效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
这是一种比较次的方法，只有在万不得已的情况下才使用。很多时候是可以避免出现这种情况的。
有网友整理了一套hack方法——《CSS hack方式一览》。
从statcounter上获取到的最新浏览器统计记录：
4.来个两行按钮，每行显示三个按钮
.btn3{ padding:10px; margin:10px }
的确是两行，三列了，但是明明加了margin了，上下还是贴在一起了。这里就涉及到一个知识点。
html中有块级元素与行内元素之分，a标签默认是行内元素，而行内元素的一些特性导致了上面的结果。
这里有篇介绍两者区别的文章《行内元素与块级元素的区别和常用标签》
我先简单的介绍下两者的特点：
1.块级元素【Block-level element 】
块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。
2.内联元素【Inline element】
文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。
1）通过属性display可以将元素变成块级、内联或内联块元素等。这三个比较常用，它还有好几个值可以选择。
.btn3{ padding:10px; margin:10px; display:inline-block }
立刻立竿见影，好看了许多。
2）页面在一行上面，经常是用float浮动来做的
.btn3{ padding:10px; margin:10px; float:left }
与上面的比起来，有个细微的差别，那就是按钮之间的右艰巨小了一点。
这个是由于inline-block造成的，因为inline-block元素之间是有间隙的，有些布局的情况是不允许有间隙的，宽度间距都是算好的，突然来个不能计算的间隙很容易让布局变形。网上有很多具体的解决方法，例如《inline-block元素间间隙产生及去除详解》
float浮动的用法也是很有讲究的，我这里只是做个简单展示，很多情况下，浮动完后是需要清除的。清除的方法也有很多，网上也是一大堆，例如《些年我们一起清除过的浮动》
5.把按钮放到靠左30px，离上面40px的位置
果断用position定位，这东西有些地方妙用一下，还是很有用处的。
首先要将按钮的父标签设置为position:relative，然后a标签设置为position:absolute。
网上有个关于position的系列文章《CSS 相对|绝对(relative/absolute)定位系列》可以参考下。
.container2{ position:relative; height:100px } .btn4{ position:absolute; top:40px; left:30px; padding:10px; }
下面的图片布局样式很普通，左边一张图，右边一些说明文字。
我以前布局的话就会用float浮动，给图片和文子两块区域设置为float:left来布局，最后还得做清除浮动。
现在的话我可以用position定位，把图片设置为position:absolute，这样右边的文字区域就能简单的用margin-left来指定位置，避免使用浮动。
顺带说下，下图中的旅行两个字也是用定位来设置的。
6.给按钮做个移上去变色的效果
这里涉及到CSS选择器的概念，将使用:hover来达到效果。
.btn5:hover{ background-color:#faa732 }
我以前写过一篇随笔，记录了这些选择器，《CSS选择器的一些记录》。
顺带说下，你可以在css3.info网站上面可以测试当前浏览器对CSS选择器的兼容程度。测试不包括:hover，:active， :focus，:selection，:visited，:link。
fortawesome是一个字体库，里面的CSS代码中就大量用了选择器。例如下面的那个手指icon，CSS我只摘取了部分。
.icon-hand-down:before { content: "\f0a7"; } [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; display: inline; width: auto; height: auto; line-height: normal; vertical-align: baseline; background-image: none !important; background-position: 0% 0%; background-repeat: repeat; }
:before与:after这两个选择器，使用的场景也非常多。在网上搜索下，会有一大堆相关资料，挑自己感兴趣的研究吧。
三、CSS3与HTML5
接下来讲一些CSS3与HTML5的特性，最近这个东西特别的火。
1.给按钮加个圆角
如果是以前，那就得切图啦，切几个圆角，然后贴在指定的位置，特费神费事。但自从有了border-radius，让这一切变的so easy。
.btn6{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:10px; }
-webkit与-moz这是私有前缀，早期的firefox或chrome浏览器只认这些私有前缀的CSS3属性。
-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer
2.给按钮加个阴影
丑是丑了点，这里只做个演示，给个思路。
.btn7{ -webkit-box-shadow: 0 0 10px 10px #000000; box-shadow: 0 0 10px 10px #000000; padding:10px; }
现在网上有很多在线调试CSS3代码的小工具，这个就是在线调试的。例如CSS3 Generator。
这里顺带便再分享几个在线调试工具：
