css基础

W3C(World Wide Web Consortium[kn'stm])
由万维网联盟制定的一系列标准，包括：
结构化标准语言：html/xml
表现标准语言：css
行为标准语言：DOM/ECMAScript

css排版
下划线：text-decoration:underline;
删除线：text-decoration:line-through;
斜体:font-style:italic;
段落缩进:text-indent:2em; //文字前空两格

white-space




中文字间距 和 字母之间的间距 letter-space:2px;
英文单词，词与词之间的间距:word-spacing:2px;

font样式缩写
font：12px/25px "宋体",sans-serif 至少要指定 font-size 和 font-family 属性

长度值
em：就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
百分比：p{font-size:12px;line-height:130%} 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

内联元素：display:inline
内联块状元素：display:inline-block
块级元素：display:block

css层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。(就近原则)
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

css权值计算
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

水平居中
行内元素：给父元素设置text-align:center
定宽块级元素：设置宽度，并且margin:0 auto;
不定宽块状元素：3种方法
第一种：table把它包围，text-align:center;
第二种：使用display:inline 设置成行内元素，按行内元素的方法做
第三种：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

垂直居中
父元素高度确定的单行文本：height:25px;line-height:25px;
父元素高度确定的多行文本：两种方法
第一种：table把元素包围,然后设置vertical-align
第二种：（不推荐）设置块级元素的display:table-cell 这样就可以激活vertical-align属性 但是ie6,7不兼容

隐性改变display类型
元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

三列布局两边固宽中间自适应
如果是3列布局，左右固定宽，中间自适应，可以如下：
左边：position:absolute; left:0;top:0;width:300
右边：position:absolute; right:0; top:0;widht:200px;
中间：margin:0 200px 0 300px;

横向两列布局一列是固宽，另一列自适应宽方法：一列设置固定宽度值，另一列父元素设置position:relative 自己position:absolute 但要注意固定宽度列的高度>自适应宽度的列

css三种定位机制
标准文档流(normal float) 从上到下从左到右 position:static 也被认为是普通流(标准文档流)

浮动(float)

绝对定位(position:absolute)





清除浮动两种方法
clear:both(常用) clear:left clear:right

width:100%;overflow:hidden;缺一不可