CSS基础

选择器

子选择器（第一代后代）：>
后代选择器（所有子后代）： 空格
伪类：a:hover
分组选择符（多个标签元素设置同一个样式）：,

都匹配到相同标签时，取权值高的
标签的权值为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，所以可以理解为继承的权值最低。

层叠
多个css样式具有相同权重值
后面的样式会覆盖前面的样式

!important
为某些样式设置具有最高权值
注意：!important要写在分号的前面

CSS格式化排版

字体：font-family:"Microsoft Yahei";
字号、颜色：font-size:12px;color:#666
粗体：font-weight:bold;
斜体：font-style:italic;
下划线：text-decoration:underline;
删除线：text-decoration:line-through;
缩进：text-indent:2em; (2em的意思就是文字的2倍大小。)
行间距（行高）：line-height:2em;
中文字间距、字母间距：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;
块状元素转换为内联元素：display:inline;
将元素设置为内联块状元素：display:inline-block;

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型

块级标签都具备盒模型的特征

边框
1、border-style（边框样式）常见样式有：
dashed（虚线） dotted（点线） solid（实线）
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin、 medium、 thick（但不是很常用），最常还是用象素（px）。

宽度和高度
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

填充
填充也可分为上、右、下、左(顺时针)

边界
padding和margin的区别，padding在边框里，margin在边框外。

css布局模型

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

流动模型

流动（Flow）是默认的网页布局模式。
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

浮动模型

float:left; float:right;

层模型

层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

绝对定位
将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

相对定位
通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
偏移前的位置保留不动
虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响
固定在右下角：position:fixed;bottom:0;right:0;

Relative与Absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位
相对其它元素来进行定位（如将文字定位到图片下方），必须遵守下面的规范：
1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用left、right、top、bottom来进行偏移定位了

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

长度值

目前比较常用到px（像素）、em、%百分比，要注意其实这三种单位都是相对单位。

1、像素
像素指的是显示器上的小点（CSS规范中假设90像素=1英寸）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em
就是本元素给定字体的font-size值，如果元素的font-size为14px，那么1em=14px；如果font-size为18px，那么1em = 18px。
当给font-size设置单位为em时，此时计算的标准以父元素的font-size为基础。

<p>以这个<span>例子</span>为例。</p>

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

css样式设置小技巧

水平居中

行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center来实现的。

定宽块状元素
定宽块状元素：块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置左右margin值为auto来实现居中的。

div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

不定宽块状元素方法
不定宽块状元素：块状元素的宽度width不固定。
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1. 加入table标签
   利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
2. 设置display: inline方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left: -50%来实现水平居中。

垂直居中

父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height与font-size的计算值之差，在CSS中成为行间距。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

父元素高度确定的多行文本（方法一）
使用插入table(包括tbody、tr、td)标签，同时设置vertical-align：middle。

父元素高度确定的多行文本（方法二）
在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为 table-cell（设置为表格单元显示），激活vertical-align属性，但注意IE6、7 并不支持这个样式, 兼容性比较差。
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

隐性改变display类型

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