css概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
css规则由两个主要部分构成：选择器，以及一条或多条声明
selector选择器 declaration声明
选择器通常是需要改变样式的html元素
每条声明由一个属性（property）和一个值（value）组成
每个声明之间是分号（；） 间隔
属性（property）是设置样式的属性（ style attibute）。每个属性一般有一个值或多个值，属性和值被冒号（：）分开.
语法解释：
css样式有四种：
1. 行内式（也叫内联式）
行内式是标记在html标签里style属性中设定css样式。这种方式没有体现出css的优势，不推荐使用(具体的使用，还是要看实际的不同的应用环境)
2. 嵌入式（也叫html内部样式）
嵌入式是将css样式几种写在网页的<head></head>标签对<style></style>标签对中。格式如下：
3. l链接式
将一个css代码放在单独一个css文件，通过link方式引入到html文件中，推荐(经常)使用，:格式如下：
4. 导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，——<style>——标记也是写在——<head>——标记中，不是很常用，使用的语法如下：
链接式与导入式的区别
- 导入式会在整个网页装载完后再装载CSS文件（因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。）,这是导入式的缺陷
- 使用链接式时它会以网页文件主体装载前装载CSS文件(因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
1. 内联样式（在 HTML 元素内部）
2. 内部样式表（位于 ——head> ——签内部）
3. 外部样式表(link方式）
4. 浏览器缺省设置
其中1的元素最高，依次顺序
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
分为两种：
通用元素选择器(*)
html标签选择器
id 选择器特点:
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式(注：id唯一性，不可设置相同id值)。
id 选择器以 "#" 来定义。
元素也可以基于它们的id而被选择：
代码示例
类选择器特点：
在 CSS 中，类选择器以一个点号显示
元素也可以基于它们的类而被选择
注意：类名的第一个字符不能使用数字！
clss的值可以重复使用
代码示例:
组合选择器中的多元素选择器代码示例
组合选择器中的后代选择器，代码示例:
不常用的子元素选择器，和毗邻选择器就不举例了
属性选择器用中括号表示 [attribute]
属性选择器代码示例：
css伪类用于向某些选择器添加特殊的效果
语法:
css伪类可以与类搭配使用
常用伪类:
锚伪类
注：
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。
锚伪类代码示例:
伪元素
CSS 伪元素也是用于向某些选择器设置特殊效果。
常用伪元素
css优先级：
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
css的继承性
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
附加说明:
!important代码示例
注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。
通过css样式自定义ul和ol的显示方式
在html中分为块标签和内联标签，他们之间都有自已的特点
在css中的display属性中，
可以让内联标签可以变块级标签，块级标签可以变内联标签，可以自定义块级标签和内联标签的宽度和高度等等
常用的display属性值：
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
css框模型描述：
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框) 围绕在内边距和内容外的边框。
element(元素) 盒子的内容，显示文本和图像。
重要：
当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.
练习： ——300px*300px的盒子装着100px*100px——的盒子，分别通过margin和padding设置将小盒子 移到大盒子的中间
关于样式重叠
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。
设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场
用div举列：
1. 兄弟div:上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
2. 父子div
如果父级div中没有border，padding，inline content(文本信息),子级div的margin会一直想向上找，知道找个某个标签包括border，padding，inline content 中的其中一个，然后按此div(按子级找到的那个div)进行margin,与兄弟的div之间没关系
注：都是在父级div中添加
解决方式：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float属性的常用值：
定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
注意 当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
浮动的表现
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
浮动现象测试
(1)左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。
解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。
(2)上下结构div盒子重叠现象
例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。
解决方法：
1、要么给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题。
2、要么清除浮动
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
clear属性常用的值：
方式1（推荐）
方式2：
overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。
如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动.
css定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 ——<a> ——元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待。
css定位机制
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60288.shtml
