了解HTML：
1，html概念（HyperText Markup Language）
超文本标记语言，是一种解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
html也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅解析页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
分析简单的HTML结构
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
2，html发展历程
版本 年份
HTML1.0~2.0 1989~1991
概念不明确
HTML3 1995
浏览器战争年代，Netscape和Microsoft都在试图争霸世界
HTML4 1998
浏览器大战结束，万维网联盟(W3C)解救我们，他们的计划是创建一个唯一的HTML标准。计划的关键是将HTML的结构和表现分解为两种语言，一种语言用于实现结构（HTML）一种语言用于表现（CSS）.
HTML4.01 1999
这段日子过得很惬意，HTML4.01在1999年闪亮登场，称为接下来很多年中HTML"必备"版本
XHTML1.0 2001
正当我们感觉安逸的时候一个新兴事物引起所有人注意，即XML。它让HTML开始心烦意乱，最终两者结合，XHTML1.0诞生。
XHTML承诺，由于它的严格，再加上它提供的一些新方法，只要遵循这个标准，WEB的所有争端将就此平息。但是，大多数人都很讨厌XHTML，Web开发人员对HTML的灵活性更感兴趣，而不是XHTML的严格性。
HTML5
html和xml由于没有得到大家的祝福，这场婚姻的结局并不好，很快被HTML的新版本取代，即HTML5.它支持HTML4.01标准的大部分特性，还提供一些新特性。随着时间的推移，将来HTML5注定成为大家公认的标准。
3，基本语法
1）后缀
可以使用.html与.htm作为html文件的后缀名（扩展名）
可以使用任意文本编辑器创建HTML
2）注释
<!-- 注释内容 -->
3）基本概念
标签：
标签用来标记内容，也是用标签来说明文本的意义。标签使用"<",">"包围。
标签分为成对标签和单标签
元素：
一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的
属性：
与元素相关的特性称为属性，属性由键值对组成。
<元素名 属性1=值1 属性2=值2></元素名>
大多数标签的属性：
id 唯一标识
class 标识一类元素
style 样式
title 描述信息
name 名字（可以重复）
规范：
元素名和属性都不区分大小写。
4）文档结构
文档类型声明:
使用DTD来指定文档类型
1）严格的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2）宽松的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3）frameset 框架文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
3）H5文档类型
<!DOCTYPE html>
html：
标识HTML文档，根元素
head
标识HTML文档的头部
可以包含该文档的标题，文档使用的脚本，样式定义，元数据等信息
body
标识HTML文档的体部
body中的内容可以显示到浏览器中。
例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
5）meta元素
定义文档元数据
1，定义元数据关键字
<meta name="Author" content="candice">
<meta name="Copyright" content="版权信息">
<meta name="Description" content="描述信息">
<meta name="keywords" lang="zh-cn" content="精品图书">
<meta name="keywords" lang="en-us" content="good book">
2，报头规范（给浏览器看的）
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
将会创建如下的消息头
Content-Type:text/html;charset=utf-8
<meta http-equiv="Content-Languaga" content="zh-CN">
将会创建如下的消息头
Content-Language:zh-CN
<meta http-equiv="Refresh" content="n;url=http://yourlink">
定时让网页在指定的时间n内跳转到页面http://yourlink
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
<meta http-equiv="Pragma" content="no-cache">
设置网页禁用浏览器缓存
将会创建如下的消息头：
Pragma:no-cache
<meta http-equiv="Cache-Control" content="no-cache">
设置网页禁用浏览器缓存
4. 颜色与大小
1）颜色
颜色由红(R)、绿(G)、蓝(B)组成，每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制字符。
3位十六进制 6位16进制 rgb 颜色
#000 #000000 rgb(0,0,0) 黑色 black
#F00 #FF0000 rgb(255,0,0) 红色 red
#FFF #FFFFFF rgb(255,255,255) 白色 white
2）大小
px 像素
5. 标签介绍
1)块级(block)标签
<div></div>
特点：
独占一行
h1~h6 标题
特点:
1)有字体大小的设置
2)文本有加粗强调设置
3)上下文之间有较大间距
p 段落
特点：
1)独占一行
2)上下文之间具有距离
ul li 无序列表
特点：
1) 配合使用
2) ul li都独占一行空间
3) ul 上下文之间有很大空间
4) li与列表的样式显示(默认点状)，并且由文本缩进
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
ol li 有序列表
特点：和ul类似
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
dl dt dd 自定义列表
特点：三个标签配合使用，一个dl下面可以有若干个dt，一个dt下面可以有若干个dd
1)dl dt dd独占一行空间
2)dl上下文之间有很大空间
3)dd有文本缩进
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
2)行内（内联inline）标签
span
特点：
1)最干净的内联标签（没有任何修饰）
2)不独占一行
a 超链接
特点:
1)不独占一行
2)点击可以发生跳转（或进行对应操作），语法颜色为绿色
3)文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示
decoration（装饰） 文本修饰标签
<u>下划线修饰</u>
<i>斜体修饰</i>
<b>加粗</b>
<em>强调</em>
<strong>加粗</strong>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>
img
src="图片地址"
绝对路径
http://www.baidu.com/car.jpg
http://www.baidu.com/demo/one.html
<img src="http://www.baidu.com/car.jpg">
相对路径 one.html ../a.jpg
3)超链接
从一个web资源到另外一个web资源的连接
绝对路径（服务器路径）：
每个网页都有一个唯一的地址，称为URL 统一资源定位符，也称为该网页的绝对路径。
相对路径：
相对于当前文档所在的路径
../imgs/a.jpg
./imgs/a.jpg
imgs/a.jpg
本地连接
file:///d:/html/index.html
超链接中不允许写本地连接
服务器路径
http://localhost:8888/test/index.html
3.1）a 超链接
连接状态：
未访问
已选择
已访问
<a href="">内容显示</a>
属性：
href 定义连接的目标URI
绝对路径：http://www.baidu.com
相对路径：b.html
邮件地址：mailto:test@briup.com
锚点 ：#mao
空连接 ：javascript:void(0);
锚点：
锚点可以让用户在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些锚点的连接，指向网页中的特定位置。
例如：
<h2 id="section1">1,什么是万维网</h2>
<p>万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过Internet访问另一台计算机上的信...</p>
<a href="#section1">查看第一部分内容</a>
3.2）link 文档关系连接
只能出现在head标签中，定义了当前文档和另一个资源之间的联系。
通常用于链接到外部样式表
<link rel="stylesheet" href="style.css" type="text/css">
属性：
href： 定义关系链接地址
rel: 定义当前文档与所连接文档之间的关系。
type: 文档类型
3.3）base 基准链接地址
设置页面中所有文档相对路径相对的基准URI。如果设定了基准链接地址，当前页面中的所有相对路径都基于该路径
注意：定义在head标签中
<base href="http://localhost:8888/web">
4）图片
1，图片类型
适合在网站上进行快速查看的图片格式
GIF （graphics interchange format,图形交换格式）
可以将背景设置为透明的，图片最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图片，如导航条，按钮，图标等。由于GIF图片中存储的颜色信息较少，因此占用空间极小，使用起来更方便。
JPEG（joint photographic experts group,联合图像专家组）
最适合摄影或连续色调图像的彩色照片，jpeg文件可以包含数百万中颜色，保证图片不失真。JPEG图片无法拥有透明的背景
PNG（portable network graphics,可移植网络图形）
PNG可以包含256种以上的颜色，并可以具有透明的背景。PNG文件可保留所有原始层，矢量，灰度，颜色和效果信息，并且在任何时候所有元素都是可以编辑的。
2，链入图片文字
<img src="" alt="">
属性：
src : 图片的源地址
title : 对图片的文字说明，当用户把鼠标放在图片上稍作停留，alt属性的值就会以浮动的形式显示出来。
width : 图片的宽度
height : 图片的高度
alt : 当图片文件找不到的时候显示的文本信息
border ：图片的边框
align ：图片和文字的对齐
当align值为left时，图片靠在最左方，周围的文字显示在右侧上方
当align值为right时，图片靠在最右方，周围的文字显示在左侧上方
当align值为top时，图片靠在最上方，周围的文字显示在上方
当align值为bottom时，图片靠在最上方，周围的文字显示在下方
hspace ：图片的水平间距
vspace ：图片的垂直间距
6、表格：
1）table
定义表格
常见属性：
border: 设置表格边框线条宽度
width: 设置表格宽度
align: 表格在页面中对其
bgcolor:表格背景色
cellspacing: 单元格间距
cellpadding: 单元格边界与单元内容之间的间距
2）tr
定义表格行
3）th/td
th 定义单元格
td 定义内容单元格
属性：
colspan 跨列
rowspan 跨行
align 单元格水平对其
left,center,right,justify 两端对其
4）caption
表格的标题
5）表格的分组显示
thead 表格头
tfoot 表格尾
tbody 表格主体
7、框架文档
一个框架文档由四部分组成，文档声明，html元素，head元素，frameset元素
1）frameset 框架集
rows
用来定义将框架水平分隔为子框架的数量和这些子框架的宽度
cols
用来定义将框架垂直分隔为子框架的数量和这些子框架的高度。
<frameset rows="10%,90%">
<frame src="页面1">
<frameset cols="15%,85%">
<frame src="页面2">
<frame src="页面3">
</frameset>
</frameset>
注意：html文件中只能同时包含body标签或者frameset标签其中之一
2）frame 框架窗口
属性
src: 设置框架的初始内容
name: 框架名称，作为该框架的标识,可以配合超链接的target属性来使用
<a href="" target=""></a>
target:值可以为
_blank
_parent
_self
_top
框架名
3）iframe 内联框架
iframe允许用户在一个文本中插入一个框架，iframe元素可以使用frame元素的所有属性，实现功能也相同。
<body>
<iframe src=""></iframe>
</body>
注意：iframe可以和body一起使用
8、表单
主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。表单时客户端和服务器端传递数据的桥梁，是实现用于与服务器互动的最主要方式。
1）form
表单控件的容器
属性
action 设定处理表单数据URI的地址
method 设定数据传送到服务器的方式
get 将输入的数据追加到action地址后面
post将输入的数据保存到HTTP协议的报文中
name 设定表单的名称
enctype 设定表单数据的内容类型
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
编码方式：
1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母的字符使用%HH（这里HH表示两个十六进制数字，代表该字符的ASCII码）进行转换，
2）控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。“名称”“值"使用”="分割，两个"名称/值"之间使用&隔开。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
数据分成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端，并且，每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的格式是：
Content-Disposition:form-data;name=“myControl”
text/plain 空格转换为 “+” 加号，但不对特殊字符编码。
accept-charset 设置服务器端可以处理的字符编码
2）input 基本表单控件
属性：
type 控件类型
text 单行文本框
textarea 多行文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件
hidden 隐藏域
image 图像按钮
button 普通按钮
name
控件名称，这个名称将与控件的当前值形参"名称/值"对 一同随表单提交
value
用于设定初始化，可选。
checked
单选框，复选框默认选中属性
size
当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目
maxlength
指定可以输入的字符的最大值。适用于控件类型为text,password。
3）button 按钮控件
属性
name 控件名称
value 控件初始值
type 控件类型
button 普通按钮
submit 提交按钮
reset 重置按钮
图片按钮
<button><img src="" alt=""></button>
4）select 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
属性
name: 控件名称
size: 列表框中行的显示数量
multiple: 是否允许多选
如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框）
如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框
selected: 默认选中
option 下拉列表选项
属性：
value: 定义控件的初始值。提交表单时，初始值会被提交给服务器。
optgroup 分组选项
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">东海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
5）textarea 多行文本框
属性
name: 控件名称
rows: 定义文本框行数
cols: 定义文本框列数
warp: 是否自动换行。
off 不自动换行
hard自动硬回车换行，换行元素一同被传送到服务器中
soft自动软回车换行，换行元素不会传到服务器中
6）label 为表单控件定义标签
一些表单控件内建有标签，当内建有标签时，一般使用value属性的值作为标签，而另外一些表单控件没有标签，则直接使用文本作为标签来说明控件的意义。每个label元素都要和表单控件关联到一起
<table>
<tr>
<td><label for="username">用户名：</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密码：</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
7）fieldset 为表单添加结构
一般与legend元素配合使用，fieldset元素可以包含其他的表单控件，在这些表单控件周围画一个方框，而legend元素可以显示一个标签说明被包含的这些表单控件。
8）其他控件特性
disabled 禁用
支持该属性的控件：button,input,optgroup,option,select,textarea
注意 禁止的控件的值不与表单一起被提交
readonly 只读
支持该属性的控件：input,textarea
注意 只读元素的值可以与表单一起被提交
9，CSS简介
CSS(cascading style sheet，层叠样式表)是描述文档怎么样被呈现的语言，使用CSS可以对HTML文档进行描述。
语法：
1)CSS属性和值之间用冒号分隔
2)CSS属性之间用分号分隔（建议每个属性后都书写分号）
3)CSS的值有多个的时候使用空格分隔
10，CSS在网页中的使用
1）内嵌式
每个HTML元素都包含有一个style属性，使用该属性可以直接指定样式
存在问题：
1.不方便修改
2.结构与显示不能很好的分离
3.建议在测试或个别情况下使用
2）嵌入式
CSS样式定义内容位于style元素之间，其type属性必须被定义为text/css
-
CSS基本语法规则
1）选择器
用于选择html中的元素
html选择器
即html标签，任何一个HTML元素的标签名都可以是css的选择器
p{ text-indent:10px} /段落第一行缩进10像素/
h1{ color:red}类选择器 class属性 .类名(类名不能使用数字开头，不能使用关键字来命名) .rr{ color :red} 使用class属性来调用类名称 <p class="rr">one</p> <p class="rr">two</p> <p class="rr">three</p> ID选择器 id属性 #id名 #two{background-color:green} <p class="rr">one</p> <p id="two" class="rr">two</p> <p class="rr">three</p> 关联选择器 用一个空格隔开的两个或者多个单一选择器组成的字符串 table a{color:red} 定义了table中的a样式，而多table外的a样式不做改变 组合选择器 使用逗号,隔开选择器，可以减少样式表的重复声明 h1,h2,h3,h4{color:red} 伪元素选择器 是指对同一个HTML元素的不同状态的一种定义方式 HTML标签:伪元素{} 例如： a:link{} 超链接没有任何动作前的状态 a:hover{} 光标移动到超链接上的状态 text-decoration:none 去掉下划线 a:hover { color: green; text-decoration:none; } 2）选择器优先级 多个CSS选择器同时作用于同一个html时，声明不同的属性具有继承的关系，如果声明的是相同的属性，则以优先级高的为主。 内嵌式 > 关联选择器(后代，子代，组合(且)) > ID选择器 > 类选择器 > HTML选择器 同级别的后者覆盖前者 就近原则 3）样式 样式是零个或多个以分号分割的【属性名：属性值】列表 4）规则 选择器 样式 选择器{属性名:属性值;属性名:属性值} 5）注释 /* 注释内容 */
12、CSS常见的样式属性和值
1）CSS 尺寸属性
height 设置元素高度。
width 设置元素的宽度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
2） 字体属性
font-family字体族科
宋体 SimSun 黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
font-size 字体大小
font-style 字体风格
normal 正常;italic 斜体;oblique 倾斜
font-weight字体加粗
normal 正常;bold 粗体;bolder 更粗;lighter 更细
text-decoration 规定添加到文本的修饰 ：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink 定义闪烁的文本。
3） 颜色
color 设定文本的颜色
opcity 设置透明度
所有浏览器都支持 opacity 属性。
注释：IE8 以及更早的版本支持替代的 filter 属性。
例如：filter:Alpha(opacity=50)。
一般两个属性一起写，保证兼容性
opacity：0.5;
filter:Alpha(opacity=50)
4） 背景
设置元素的背景颜色。background-color:#CCC;
background-image
设置元素的背景图像。
url(bgimage.gif);
background-repeat
设置是否及如何重复背景图像。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
fixed 固定
scroll 滚动
background-position
设置背景图像的开始位置。这个属性设置背景原图像（由 background-image 定义）的位置， 背景图像如果要重复，将从这一点开始。您需要把 background-attachment属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
横向关键字： left center right
纵向关键字： top center bottom
百分比：
左上角是 0% 0%。右下角是 100% 100%。
background
简写属性在一个声明中设置所有的背景属性。如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
5） 边框属性
border-style 设置4个边框的样式
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
none 定义无边框
...
如果4个值都给定了，分别应用于上，右，下;
左如果给定1个值，应用于各边;
如果给定2个值，第一个值应用于上下边，第二个值应用于左右边
border-width 设置4个边框的宽度
值为关键字或者长度 medium,thin,thick
border-color 设置边框颜色
border 在一个声明设置所有的边框属性。
border:1px solid #ff0000
6） 鼠标光标属性
cursor 属性规定要显示的光标的类型（形状）。
none 无
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针（一只手）
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
7） 列表属性
list-style 在一个声明中设置所有的列表属性。
list-style: square inside url('/i/eg_arrow.gif')
list-style-image 将图象设置为列表项标记。
list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标
记放置在文本以外，且环绕文本不根据标记对齐。
list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
8）表格
优先级：
td,th-->tr-->tbody,thead,tfoot-->table
color,font-size
text-align 文字对齐
background
border 边框，只能用于table,th,td
margin 间距，只能用于table,caption
padding 内间距，只能用于th,td
width 宽，只能用于table,td,th
height 高，只能用于table,td,th、可以用于tr并且优先级高于td
border-collapse:
separate 默认值，分开
collapse 边框合并
inherit 从父元素中继承该属性
table-layout 宽度类型：
fixed 固定宽度
auto 自动宽度
caption-side 标题位置：
top/left/right/botton
13、div+css
div+css是一种网页的布局方法。
标签div span无特殊含义，配合css才具有特殊的样式
网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框无，背景色透明，默认看不到盒子
1） 盒子模型
margin 外边距，定义区块外边界与上级元素距离的属性，值为长度
padding 内边距（填充），是设置区块的内边距的属性，是边框和元素内容之间的间隔距离
border 边框，在一个声明设置所有的边框属性。
width 盒子的宽度
height 盒子的高度
内容 盒子里面所包含的元素和内容
属性值：
1个：上下左右都是该值
2个：前者表示上下的值，后者表示左右的值
3个：前者表示上边的值，中间表示左右的值，后者表示下边的值
4个：上右下左，顺时针排序
2） !important的使用
p{
color:red !important;
color:blue;
}
当不加!important;的时候，后者覆盖前者，当加上之后说明第一个,样式优先级更高，采用前者，但是Ie6不支持!important;
3）其他属性
border-width 边框高度
border-color 边框颜色
border-style 边框样式
none 无样式
dotted 点线
dashed 虚线
solid 实线
double 双线
groove 槽线
ridge 脊线
inset 内凹
outset 外凸
4）关于填充和边框的常见问题
1. 大部分的html元素的盒子属性（margin,padding）默认值为0，有少数html元素的（marigin，padding不为0）例如：body,p,ul,li,form等标签，有时需要将其先设置为0
2. 相邻两个兄弟元素的外边框会发生合并，一般布局会设定他们的外边距
3. 如果没有设置父级元素的内边距或边框，那么它的子元素的边界会和其合并。
4. 设置一个块元素居中： margin:0 auto;
5. margin可以设置负值，padding不可以设置
6. 行内元素的margin值，只有左右值，没有上下值
5）行内元素与块级元素
行内元素
行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有:em,font,b,span,a,strong
块级元素
块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等
。
改变元素类型：
display
可以隐藏元素或者显示元素，或者将一个行级元素转换为块级元素，或者将块级元素转为行级元素等。
none 隐藏元素。不会被显示，不占空间
block 块级元素。独占一行空间
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 兼有块级和行级元素特性，在行内显示但是可以设定宽高
---------------------
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
14、和页面布局相关的CSS属性
1）定位属性：
绝对定位 absolute:
是元素完全脱离文档流，页面中的其他元素视它不存在，绝对定位元素不会影响到其他元素。绝对定位是参照距离他最近的父级并且【有定位属性】的元素，如果父级元素没有定位属性，则会参照文档
相对定位 relative:
是参照元素原来的位置进行移动，元素原来的空间位不变，元素在移动时会覆盖其他元素。
固定定位 fixed:
将元素固定在窗口中的某个位置，绝对定位是相对于元素的，固定定位是相对于窗口的，会随着窗口的一定而移动。在低版本IE中不支持该属性
默认定位 static:
默认属性，指定了元素按照常规的文档流进行定位，静态定位元素不允许使用top,left和类似其他属性定位。position的值为static为非定位元素，为其他值时候为定位元素，因为static元素不能自定义元素的位置，而其他可以
1361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
