CSS3、HTML5及Bootstrap

CSS3
CSS（Cascading Style Sheets）级联样式表，是一种计算机语言，用来控制HTML内容的显示效果。
CSS预先定义了众多和显示效果有关的样式属性，比如color、font-size等。
CSS的基本单位是样式声明propertyName:value;可以把样式声明写在CSS的选择器中，也可以直接写在HTML标签的
style属性中。

一个标签的最终显示效果，是由若干个样式属性层叠到一起形成的。

文本样式：用来控制文本的显示效果。
常用样式属性：
color：文本颜色
text-indent：文本缩进
text-align：文本对齐方式
word-spacing：单词间隔
letter-spacing：字符间隔
text-decoration：文本修饰

颜色值：
颜色名：red、blue等表示颜色的英文单词
RGB颜色：rgb(255,0,0)
RGBA颜色：rgba(255,0,0,0.5)
十六进制颜色：#FF0000

长度单位：
px：像素
%：百分比

em：一个字符的长度

字体样式：
font-family设置字体名称
font-size设置字体尺寸
font-style设置字体风格
font-weight设置字粗细

CSS选择器
基本选择器：
标签选择：通过标签名定位标签
id选择器：通过标签的id属性值定位标签
类选择器：通过HTML标签的class属性值定位标签
属性选择器：通过属性名、属性值等定位标签
伪类选择器：用来定位处在特定状态下的标签
复合选择器：选择器可以进行多种形式的组合

边框样式：
很多HTML标签都有边框，如img、table、td、div、input等
border-style边框样式
border-width边框宽度
border-color边框颜色
可以合并上面三个样式属性border:solid 2px red;
还可以分别控制上下左右边框的样式，如border-top-color样式属性
table元素使用border-collapse:collapse;可以合并单元格边框

背景样式：
很多HTML标签都可以设置背景样式(背景色、背景图片)，如body、div等
background-color:red;背景色，颜色值
background-image:url("bg1.jpg");
background-repreat:背景图片平铺方式
background-attachment：背景图片是否随内容滚动
background-position-x:center;背景图片水平方向位置
可以写在一起background:url("bg1.jpg") repreat;

盒子模型：
为了更好的控制页面样式，CSS定义了盒子模型。一个HTML标签就是一个盒子
	* 一个盒子在页面中占据的范围大小由外边距、边框、内边距、内容的总面积决定
	* 内边距和外边距只能指定宽度样式
	* 盒子的背景会对内边距和内容起作用
	* 外边距、边框、内边距可对上下左右部分分别进行样式控制
	* 设置盒子高度或宽度时只对内容起作用

块级元素：这类元素默认有换行效果，典型的如div

行内元素：这类元素默认没有换行效果，典型的如span

文档流：
HTML元素在页面上显示时，根据在源码中出现的次序，按照从上到下、从左到右、块级元素独占一行、行内元素不换
行的规则依次排序。文档流中的元素会对后续元素的位置产生影响。

相对定位：
元素在显示时，相对自己本来的位置向下或者向右偏移指定数值，但元素本身并不脱离文档流，也就是说后面的元素
还认为此元素在原来的位置，所以会排列在此元素原本位置的后面（但会造成覆盖）。

绝对定位：
以最近的已经定位的祖先元素为基准进行偏移（如果没有这样的祖先元素则以浏览器窗口为基准），元素本身脱离文
档流，也就说后面元素认为此元素不存在，所以会占据此元素原来的位置（但会造成覆盖，脱离文档流后就不具有块
级元素独占一行的性质了）。

固定定位：
和绝对定位类似也会脱离文档流，但总是以浏览器窗口为基准，而且位置不会随滚动条移动

z-index层级
由于元素定位后悔产生元素的叠加覆盖情况，为了灵活控制叠加部分的显示，CSS提供了z-index层级样式属性
z-index只能取整数，默认为0，可正可负
z-index值大的元素会覆盖值小的元素

浮动：
如果一个盒子向左浮动（float：left），这个元素会成为行内元素；它后面的块级元素会失去一半的独占一行的特
性，即左边紧靠在浮动元素后面，右边延伸到行尾。
向右浮动和向左浮动效果类似。
可以使用clear:both;清除浮动效果对后面盒子的影响。

元素坐标：
HTML所有标签都具以后5个只读属性：
offsetLeft：元素边框距页面左边界的距离
offsetTop：元素边框距页面上边界的距离
offsetWidth：元素的宽度（左右边框的跨度）
offsetHeight：元素的高度（上下边框的跨度）
of