初识CSS

文字排版

名称	代码
字体	font-family
大小	font-size
颜色	color
粗体	font-weight:bold
斜体	font-style:italic
下划线	text-decoration:underline
删除线	text-decoration:line-through

段落排版

缩进	text-indent:2em
行间距（行高）	line-height:1.5em
中文字间距、字母间距	letter-spacing:50px
单词间距	word-spacing:50px;
对齐（块状元素）	text-align:center

元素分类

经常使用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

经常使用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

经常使用的内联块状元素有：

<img>、<input>

什么是块级元素

设置display:block能够将元素显示为块级元素

块级元素特色：

一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

二、元素的高度、宽度、行高以及顶和底边距均可设置。

三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。

固然块状元素也能够经过代码display:inline将元素设置为内联元素

内联元素特色：

一、和其余元素都在一行上；

二、元素的高度、宽度及顶部和底部边距不可设置；

三、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素（inline-block）就是同时具有内联元素、块状元素的特色，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特色：

一、和其余元素都在一行上；

二、元素的高度、宽度、行高以及顶和底边距均可设置。

盒子模型

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

一、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）

二、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

三、border-width（边框宽度）中的宽度也能够设置为：

thin | medium | thick（但不是很经常使用），最常仍是用像素（px）

css布局模型

一、流动模型（Flow）
二、浮动模型 (Float)
三、层模型（Layer）

流动模型

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，由于在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

浮动模型

float

什么是层模型

如何让html元素在网页中精肯定位，就像图像软件PhotoShop中的图层同样能够对每一个图层可以精肯定位操做。CSS定义了一组定位（positioning）属性来支持层布局模型。

一、绝对定位(position: absolute)

二、相对定位(position: relative)

三、固定定位(position: fixed)

层模型--绝对定位

若是想为元素设置层模型中的绝对定位，须要设置position:absolute(表示绝对定位)，这条语句的做用将元素从文档流中拖出来，而后使用left、right、top、bottom属性相对于其最接近的一个具备定位属性的父包含块进行绝对定位。若是不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

层模型--相对定位(保留自身位置)

若是想为元素设置层模型中的相对定位，须要设置position:relative（表示相对定位），它经过left、right、top、bottom属性肯定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(而且元素像层同样浮动了起来)，而后相对于之前的位置移动，移动的方向和幅度由left、right、top、bottom属性肯定，偏移前的位置保留不动。

从效果图中能够明显的看出，虽然div元素相对于之前的位置产生了偏移，可是div元素之前的位置仍是保留着，因此后面的span元素是显示在了div元素之前位置的后面。

层模型--固定定位

fixed：表示固定定位，与absolute定位类型相似，但它的相对移动的坐标是视图（屏幕内的网页窗口）自己。因为视图自己是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，所以固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。如下代码能够实现相对于浏览器视图向右移动100px，向下移动50px。而且拖动滚动条时位置固定不变。

Relative与Absolute组合使用

参照定位的元素必须是相对定位元素的前辈元素：

参照定位的元素必须加入position:relative;

盒模型代码简写

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
margin:10px;/*上设置为10px、右设置为10px、下设置为10px、左设置为10px*/
margin:10px 20px;/*上设置为10px、右设置为20px、下设置为10px、左设置为20px*/
margin:10px 20px 30px;/*上设置为10px、右设置为20px、下设置为30px、左设置为20px*/

字体缩写

body{
    font:12px/1.5em  "宋体",sans-serif;
}

颜色

16进制	颜色
000
f00
0f0
00f
0ff
f0f
ff0
fff(白)
ccc

长度

px:像素点

em:参照文字大小单位,好比如今的字体大小是16px,那么1em=16px

百分比:参照文字大小,好比50%=16px*50%=8px