标签：
文字样式：
文字颜色：color
文字大小：font-size:
文字粗细：font-weight:
文字斜体：font-style:
文字字体：font-family:
文字修饰：text-decoration
行高：line-height:
首行缩进：text-indent:
字符间距：letter-spacing:
单词间距：word-spacing:
文字垂直对齐：vertical-align:
盒子模型初步：
观念：几乎所有标签都可以看过是一个盒子——具有如下特性的矩形区域
margin：外边距（边界）
border：边框
padding：内边距（补白）
内容部分：可以设置width，height
两种盒子：
块盒子：可以设置盒子的任何方面的特性（属性），基本表现（特征）是“独占一行”
行内盒子：除了上下margin，上下padding，宽高之外，其他也可以设置。基本表现是“行内显示直到末尾再自动换行”——类似文字的表现——行内盒子的内容一般就是文字或图片（实际上图片本身就是行内盒子）。
布局初步：
将网页以逐步细化的方式分割成横向或纵向的几个独立区域。对于纵向区块，则可以使用div盒子自然而成。对于横向区块，则需要使用浮动才能实现。但浮动或导致父盒子失去“正确的高度”（自然高度）——因此又要考虑父盒子高度的修正：
1， 设置固定高度，保证可以包住子盒子
2， 对父盒子设置overflow:hidden样式，可以获得“自然高度”。
3， 在父盒子内部添加一个清除浮动的空div: <div style=”clear:both;”></div>
浮动作用与特性：
float:left, float:right
作用：使一个块盒子可以跟其他块盒子“并列”放置。
特性：使其“浮”在别的标签之上，别的标签视它不存在而正常排列出来。
1、 在“当前版面”分出几个相对独立的区块（区块只分两种情况：纵向与横向）；
2、 如果分出的是纵向区块，则每一个区块写出一个div就可以了（因为div本身就是自占一行的，则自然每个div就是一个纵向的区块了）；
3、 如果分成的是横向区块，则：
a) 同样每个区块首先写出一个div，且每个div都进行浮动（通常是一左一右，或两左一右，或一边倒）；
b) 设置各个div需要的宽度及相关区域（padding，border，margin），但总和不超过当前父盒子的宽度；
c) 有必要也设置各自高度，以及颜色背景或边框，以出现明显的视觉效果，这样有助于排错；
d) 使用如下3个方法之一来保证父盒子可以正确包住其所有子盒子：
4、 在上述每个分出的区块中，又当做“当前版面”做同样的分析与设计（重复1-3步）
html元素表现的差异性：虽然html被称为一种标准，但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。
最终，通常的做法是：我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。
比如很多标签有初始的margin，或padding，或字的大小或粗细，斜体等等效果，则我们使用一些css设置将这些初始表现全部“清空”，比如：
*{
font-size:12px;
margin:0;
padding:0;
font-weight:normal;
font-style:normal；
list-style-type:none;
}
这样之后，所有的每个标签所需要的表现，都需要我们自己来使用css设置。
实际应用中，我们一般都是使用一个通用的css文件来完成此工作。
1， 行内样式：
a) <标签名 其他标签属性……. style=”css属性1：值1；css属性2：值2； …… ” >内容部分</标签名>
b) 只对当前标签有效：通常不推荐使用，或偶尔临时使用。
2， 页内样式：
a) <style>
选择器1{ ….. }
选择器2{ ….. }
。。。。。。。。
</style>
b) 只对当前网页有效：常见。
3， 外部样式：
a)
css文件中：
选择器1{ ….. }
选择器2{ ….. }
。。。。。。。。
b)
网页文件中：
<link rel="stylesheet" type="text/css" href="css文件路径url" />
c) 对所有引入该css的网页有效：常见。
盒子的尺寸构成：
一个盒子的宽度构成：
左外边距 + 左边框宽 + 左内边距 + width值 + 右内边距 + 右边框宽 + 右外边距
一个盒子的高度构成：
上外边距 + 上边框宽 + 上内边距 + height值 + 下内边距 + 下边框宽 + 下外边距
margin外边距细化：
margin还可以细分为4个方向，每个方向都可以单独控制，如下：
margin-top: 上外边距
margin-right: 右。。。
margin-bottom:下。。。。
margin-left: 左。。。
margin其实是表示上述4个属性的一个“综合属性”：其实它代表的就是指“一下子设置了4个方向的margin”，其详细使用形式和含义如下：
margin: 一个值； ——设置上，右，下，左4个方向均为该值；
margin：值1 值2； ——设置上下margin为值1，左右margin为值2；
margin:5px 10px; 表示上下margin是5px，左右margin是10px
margin:0 auto; 表示上下margin是0，左右margin是auto——auto对标准浏览器就解析为两边相等
margin：值1 值2 值3；——设置上margin为值1，左右margin为值2， 下margin为值3；
margin：值1 值2 值3 值4；——分别设置上，右，下，左4个方向的值；
padding内边距细化：
同上。
border边框细化：
边框指的是边框线。
线有3个方面的特性：线型，线宽，线色，每个特性都可以单独控制。
边框也有4个方向，每个方向都可以单独控制。
于是：
我们立即就有了12个对边框线的控制属性：
border-top-style: 顶部边框的线型。常见线型：solid , dashed, dotted
border-top-width: 顶部边框的线宽；
border-top-color: 顶部边框的线色；
border-right-style, border-right-width, border-right-color: 。。。。。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
以上就是12个：
除此之外，我们还有3个设置线的某方面特性的综合属性：
border-style: 可以使用1-4个值，用来设置4个方向的线的线型，其规则同margin值的设置。
比如：border-style:solid dashed; 表示上下边框为实线，左右边框为虚线；
border-width: 同理，可以设置1-4个值，表示4个方向的线宽。
border-color：同理。
还有：4个设置每个方向边框的所有特性的综合属性：
border-top: 线型 线宽 线颜色；
border-right: 线型 线宽 线颜色；
border-bottom: 线型 线宽 线颜色；
border-left: 线型 线宽 线颜色；
最后，一个最大的综合属性：一次性设置4个方向的3个特性：
border: 线型 线宽 线颜色；
盒子还有背景属性。
背景分两种：
背景颜色：只能是纯色，全平铺——css3里面已经可以设置过度色。
mso-line-height-rule:exactly"> 背景图片：需要设置图片路径，还可以设置是否重复（平铺），怎么重复，怎么定位。
background-image:url(图片路径);
background-repeat: repeat // no-repeat // repeat-x // repeat-y;
重复 // 不重复 // 仅x方向重复//仅y方向重复
background-position: 水平定位方式 垂直定位方式；
水平定位方式有： left // center // right // 离左边的像素值；
垂直定位方式有： top // center // bottom // 离顶部的像素值；
背景综合属性：可以一次性设置有关背景的多个数据值：
background：背景色值 背景图值 背景图重复性值 背景图定位值；
以上4个值，几乎可以任意省略（也就是任意使用其中某些）。
其实块盒子和行内盒子的所谓初始表现，并不是什么决定的东西，而只是一个属性的初始值问题：
对块盒子，其display属性的值默认是block
对行内盒子，其display属性的值默认是inline；
实际上，我们完全可以将html盒子的初始表现使用该属性来设置其其它值——即块盒子和行内盒子可以相互转换。
div{ display: inline;} ——此时div就跟span一样。
span{ display: block;} ——此时span就跟div一样。
display: inline // block // none: 显示为：行内盒子//块盒子//不显示
布局简述：
布局就是将“当前区域”进行一定合理划分：
1， 上下结构：直接使用几个独立的盒子，自然而成
2， 左右结构：使用几个独立盒子，浮动使之实现横向排列，并仔细考虑他们的宽度和高度。此时必须再严重考虑他们的父盒子的高度，办法有3：
a) 设定父盒子为固定高度（此时需保证父盒子的高度足够保住子盒子）
b) 设置父盒子的样式为：overflow:hidden;
c) 在父盒子的内部末尾加上一个清除浮动的空div: <div style=”clear:both” ></div>
css初始化：
<link …… href=”css初始化文件” />
样式分类：
行内样式：<标签 style=”css属性名:值； …… ” > ….
内部样式：<style> 选择器{ … } 。。。。。。。 </style>
外部样式：网页文件中：<link …… href=”css文件” /> css文件中：直接写各种选择器。
盒子细化：
margin-top：5px；
margin-right：10px；
margin-bottom:
margin-left:
è margin: 可以使用1-4个值。
padding-top：5px；
padding-right：10px；
padding-bottom:
padding-left:
èpadding: 可以使用1-4个值。
border-top-style； border-top-width； border-top-color；
border-right-style； border- right -width； border- right -color；
border-bottom-style； border- bottom -width； border- bottom -color；
border-left-style； border- left -width； border- left -color；
è border-style； 可以设置4个方向的边框的线型，可以使用1-4个值，用法同margin
è border-width: 可以设置4个方向的边框的宽度，同上
è border-color: 可以设置4个方向的边框的颜色，同上
è border-top: 3个值，分别表示顶边框的线型，线宽，线色，这3个值没有顺序问题（随便写）
è border-right, border-bottom, border-left: 同border-top
è border: …..
背景：
mso-line-height-rule:exactly"> background-image: url(背景图的路径);
background-repeat: 设置背景图的重复特性，有：repeat(默认值），no-repeat，repeat-x, repeat-y
background-position: 需要两个值：水平位置 垂直位置。
è background:综合属性可以设置背景的所有特性，包括上述所有。
一个常见错误：
background-image: url( images/abc.gif ) no-repeat center center;
——background-image是独立属性，只能设置背景图，不能设置其他值了。
块元素和行内元素的转换：
display: inline; ——元素就“变”为行内元素了
display:block; ——元素就“变”为块元素了
列表样式可以设置其列表符号，列表图片（代替列表符号），列表符号的位置。
list-style-type: 设置列表符号，可以是我们之前学的无序列表符或有序列表符。
list-style-image:设置列表的图片（此时list-style-type自动就无效了，被代替了）
list-style-position: 指将列表符放在li的里面还是外面：outside(外面，默认值），inside(里面)
è list-style: 这是综合属性，可以设置上述几个。
定位就是指把元素（标签）放在哪个位置。
实际上，每个元素都有个定位属性：position。其有4个值：
1， position:static ——静态定位；——所有元素的初始定位方式就是静态（没有额外使用position或浮动的时候）
2， position:relative; ——相对定位：其实就是指一个元素在其父盒子中本来该放的位置（静态位置）的一个相对值（错位值）。必须使用left和top配合来设置该值。
a) 举例：position:relative; left:10px; top:15px;
3， position:absolute; ——绝对定位；指该元素相对于其上级具有非静态定位的元素的一个绝对位置。如果上级没有非静态定位设置，则会相对网页主体（html标签）。常常绝对定位就是用于在整个网页上进行“绝对位置设定”——就是相对网页主体来说。
4， position:fixed; ——固定定位；有点类似绝对定位，但其是相对于整个“可视窗口”来设置的定位，（绝对定位是相当于网页的版面的绝对值）。固定定位的盒子是以“窗口”为参照系，而绝对定位和相对定位的盒子是以网页为参照系。
流：水流的流——所有“水”（物体）往一个方向“流过去”——挤压。
标准流：就是原始的html标签在网页中的原始表现——在遵循块元素和行内元素的基础上，全都往“右上角”挤靠过去。
非标准流：使用position的非静态定位方式影响的元素位置，或者使用浮动而影响的元素的位置。
基本优先级：
!important 〉 行内样式 > id选择器 > 类选择器|伪类选择器 > 标签选择器 > 通用选择器 > 继承属性
综合优先级（只讨论选择器）：
则下列选择器的优先级如何呢？
.a1 div{}
.a1 .a2{}
.a1 div .a2 span{}
#d1 div {}
#d1 .a1 {}
则他们比较优先级的原则是：
1， 比较最高的优先级选择器的多少，多者胜；
2， 最高的数量相等的时候，比较次高，多者胜；
3， 依次类推
前提： 父盒子固定大小（宽高），其里面的“内容”在水平和垂直方向的居中对齐的常见做法：
内部居中：
水平居中：
A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置text-align:center;
B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同文字（Ａ）
C：“内容”为块元素： margin:0 auto;
垂直居中：
A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置line-height为父盒子的高度；
B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同块元素（Ｃ）
C：“内容”为块元素： 在块元素上设置：position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值
外部居中：
img与textarea与其紧挨着的文字垂直居中对齐：设置其vertical-align:middle;
input与紧挨着的文字自然垂直居中
列表样式：
list-style-type: 列表项目符
list-style-image:列表项目图片（相当于自定义列表项目符）
list-style-position:设定列表项目符的位置（放在li里面还是外面，默认是外面）
list-stype:综合属性
定位方式：
position: static; 静态定位，是默认值。
position: relative; 相对定位；需要设定left/top值。
position: absolute; 绝对定位；需要设定left/top值。
position: fixed; 固定定位；需要设定left/top值。
css优先级：
!important 〉 行内样式 > id选择器 〉类（伪类）选择器〉标签选择器〉通用选择器〉继承样式。
对于层级选择器（复合选择器），则他们的优先级由最大的那项的数量决定。如果最大优先级的选择器的数量相同，则再比较下一级的数量，依次类推。
#id1 .c1 .cc1 div{}
netscape浏览器发展之初，为了解决一些使用体验的问题，在其中又内嵌了一个脚本语言——livescript
傍上了java这个独领风骚，改名为javascript——ecmascript（其实是一个标准）——jscript（微软的产品）——actionscript（adobe公司，flash中应用）
注释：
//单行注释
/*多行注释*/
一条语句使用一个分号结束；
严格区分大小写；
firebug的使用
现实世界有各种各样的数据——人名，年龄，学历，学生数，php的学费，北京的人口，。。。。
软件就是用来描述现实世界的。
在软件中，我们使用编程语言来实现“现实世界的模拟运行”
在程序中，我们使用一种称为“变量”的符号来表示现实世界的“数据”
这些符号我们基本上都是自己去定义其名字——这就是变量名——简称为变量。
ａ＝１； ／／用ａ这个“符号”来代表现实世界的数学领域的一个数字“１”。
变量在计算机中，也可以看做是一个临时存放数据的“内存空间”——
变量是一个符号，我们用此符号来在内存的“小格子”中“存取数据”。
定义变量的标准形式为：
var 变量名; //这表示让计算机给你一块“空间”来供你使用，这块空间的名字是你自己取。
//var就是定义变量的关键字
往变量（或其所代表的空间）中存入数据的形式为：
变量名 = 数据值； //此数据值可以是直接数据，也可以是计算结果的数据，比如1+2
实际常见的情形是：定义变量的时候同时赋值，则其语法是：
var 变量名 = 数据值； //此时其实可以省略var这个关键字
//后面在使用该变量的时候就不要再写var了。举例：
var i = 10; //将10这个数据装到i这个变量所代表的空间中去，此时i中数据就是10
var k = 20;
var s = i + k;
i = i + i; //特别注意：这里的等号不是数学上的等号，而是叫做“赋值”：将等号右边的“数据值”放到等号左边的变量中去。此时相当于将（１０＋１０）的结果值（２０）装入ｉ这个变量所代表的空间（格子，抽屉，箱子）中去，则此时ｉ中原来的值（１０）就没有了——重要观念一个变量只能装（存储）一个数据！
var a = 10; //数字数据值
var b = “abc”; //字符串数据值
var c = “123”; //字符串数据值
甲：某乙，你吃早饭了吗？
乙：吃了//是//确定// —— 也可能表示否定的回答：没有吃//没有//
——表示“真假”数据
甲：你吃什么了？
已：包子
——表示“字符”数据
甲：吃了几个？
乙：12个
——表示“数字”数据
甲：。。。。
已：你有完没完？。。。
描述现实世界，就这3种基本数据类型：
boolean类型： 布尔类型，此类型表示一个“真假”状态，其数据只有两个：true，false
举例： var v1 = true;
var v2 = false;
string类型： 字符（串），此类型表示一个“连续的字符”，形式是使用单引号或双引号引起来
举例： var v3 = “abcde”;
var v4 = “12345”;
var v5 = ‘北京’;
var v6 = ‘北京是个充满梦想的城市’;
var v7 = “a”;
var v8 = “”;
其数据无穷无尽。。。。。
number类型： 数字类型，表示一个数学意义上的数字，可以是整数或小数
举例： var s1 = 1;
var s2 = 22.2;
var s3 = 33.3e3; //这是科学计数法，含义是33.3乘以10的3次方
其数据无穷无尽。。。。。
但在计算机世界中，还有其他表示数据的形式上或含义上的类型，有如下：
特殊数据类型：
null类型： 空类型，表示一个变量中的数据是“空”的，即没有任何有效数据，它跟空字符串是不一样。这只是计算机中为了表示“空值”这种状态而“生造”的一个类型，该类型只有一个数据：null
undefined类型：未定义类型，表示一个变量的数据还没有“定义”，即没有给值。该类型也只有一个值：undefined.
以上两种数据类型不常用，也不推荐“主动使用”，他们只是软件（语言）中表示某个特殊情形的含义上的类型——他们通常在我们程序出错的时候会主动找我们
复合类型：
数组类型：将多个数据放在一起以有序的方式排列成一个整体，此整体就被称为数组类型
var a1 = [1, 2.2, “abc”, true, “中国” ]; //a1就是一个变量名（这里也是数组名）
对象类型：将多个数据放在一起组成一个整体，此整体就被称为对象类型
var obj = { a:1, b: 2.2, cc: “abc”, vvm: true, s:”中国” };
//obj也是一个变量名，这里也可以说是一个对象名，其中大括号中的a，b，cc等等是这个对象中的各个数据（1，2.2, “abc”）的名字。
声明：此命名规则基本上适用以下各种情形（但不限于这些情形）：
js中的：变量名，函数名，
php中：变量名，函数名，类名
html中： name名，id名， class名
规则如下：
1， 只能使用字母，数字，下划线这几种字符
2， 只能使用字母或下划线开头
3， 第一个字符之后可以跟0个以上的其他字符。
4， 不能使用系统中的关键字，比如alert，document, window, if, else ….
数学上，也有运算符，也他们的优先级问题，比如：
3 + 4x5 - 6/10
加： +
减： -
乘： *
除： / 注意：这个除号基本上跟我们数学上的除法一样，而跟c语言中的“/”号不同。
var v1 = 6 / 2; //3；
var v2 = 6 / 8； //0.75; //c语言中是0。这里不是。
var v3 = 9 / 2; //4.5; //c语言中是4
取余（取模）： %: 只用于整数数据，表示一个数除以另一数之后的余数，举例：
var v1 = 12 % 5; //结构是2
var v2 = 12 % 6; //0
var v3 = 12 % 7; //5
还有两个： 自增运算(++)， 自减运算(--)：
++运算符是对“自身”变量进行一个自加操作，可以写在变量的前面，也可以写在变量后面。如果自加运算（＋＋）出现在赋值运算（＝）的右边中，那么此时相当于需要做两个运算：自加和赋值，则自加符号的位置就会对赋值的结果又影响：
＋＋在变量后： 先赋值，后自加。
＋＋在变量前： 先自加，后赋值。
自减运算（――）是对变量自身减一，其规则同自加运算符。
＞ ：大于
＜ ：小于
＞＝ ：大于等于
＜＝ ：小于等于
＝＝ ：等于
！＝ ：不等于
=== ：严格等于：只有数据和内容都完全一样的时候才成立（相等）
!== ：不严格等于：只要数据和内容有一点点不一样，都算“不严格相等”
比较运算符其实就是比较两个数据（通常是数字，也可以是其他，比如字符串）的大小关系，如果关系成立，则这些运算符的运算结果就是“true”这个布尔变量，否则就是“false”这个布尔变量。
var a =5;
var b = 10;
var c = a > b; //结果c是 false ，是布尔类型值
var d = a < b; //结果d是true；
var e = a >= 5; //true
var f = a <= 5; //true
var g = a == 5; //true, 要理解为：“a等于5”的比较结果是true，然后把true赋值给g
var h = 5>a; //false;
但，通常，大多数时候，其实比较运算符并不是在这种场合使用，而是在判断语句中使用，比如：
if( a > b){…..}
if ( a >= 5 ) {…..}
一种特殊情况的比较：
var v1 = 1;
var v2 = “1”;
if(v1 == v2 ){…} //此时是成立的——结果是true，也就是if后面的语句可以执行
if(v1 === v2){….} //此时是不成立的——结果是false，也就是if后面的语句不会执行
两种“相等”的辨析：
==: 通常被称为是“模糊相等”（数据内容相等），只要两个数据“看起来”相等，就会成立
===: 通常被称为“严格相等”，只有两个数据的数据内容和数据类型都一样的时候才成立。
字符出只有一种运算： 连接运算，就是将两个字符串“串联在一起”，成为一个“更长的字符串”，其运算符是： +
那么此时，怎么去区分一个加号（+）到底是算术运算的“加法”还是字符串运算“连接”呢？
——区分放很简单： + 两边只要有一个是字符串，就么就必然使用字符串连接运算。如果另一边不是字符串，也会自动将其转换为字符串之后再连接运算。
var v1 = 1 + 2; //3;
var v2 = “ab” + “cd”; //”abcd”;
var v2a = “ab” + “cd” + “efg”; //”abcdefg”
var v3 = “ab” + 2; //”ab2”
var v4 = 2 + “ab”; //”2ab”;
var v5 = 1 + “2”; //”12”
var v6 = “1” + “2” + “3”; //”123”
var v7 = 1 + 2 + “3”; //”33”;
var v8 = 1 + “2” + 3; //”123”
document.write(v8); //输出”123”
document.write(1 + “2” + 3); //输出”123” //这里要理解为：先将括号中的运算做完，在输出此结果
首先，要先建立一个观念：逻辑运算符只对两个数据进行运算：true，false，只有3个运算符（&&, || !）。
第一个：逻辑与运算：
符号： &&
含义： 表示两个条件进行“并列”判断，如果两个条件都成立，则表示运算结果是成立的。
条件1：穿白衣服的举手：
条件2：穿白鞋子的举手：
找出：既穿白衣服又穿白鞋子的同学,举手。
细化：算来算去，其实只有4个可能情况：
true && true è true
true && false è false
false && true è false
false && false è false
总结一句话： 逻辑与运算，只有两个 运算数据 都是true的时候，结果才是true
则可以做出以下“真值表”——类似99乘法表：
var A = true / false;
var B = true / false;
|
A && B |
B = true |
B = false |
|
A = true |
true |
false |
|
A = false |
false |
false |
标签：
原文地址：http://www.cnblogs.com/zhenghongxin/p/4321582.html
