HTML

互联网的原理

上网的时候，是有真实的、物理的文件传输的！所以我们经常感觉第二次打开网页，比第一次快，这是因为第一次打开网页的时候，所有的图片都已经存过来了。所以现在也能够解释，为什么每次都用360能清理一堆垃圾，释放很多硬盘空间。

网页不是一个文件，而是一堆文件。服务器上存放着网页的相关文件，包括html文件、css文件、js文件、图片等。当我们打开浏览器，输入网址，我们的计算机就会对这些文件发出HTTP请求。

服务器收到请求之后，会把这些文件通过HTTP协议，传输到我们的计算机中（保存到了刚才那个临时文件夹中）。这些文件，将在我们计算机本地的浏览器中，进行渲染、呈递。

HTTP

超文本传输协议，Hypertext Transfer Protocol。

这是一个文件的传输协议，我们上网的时候，所有的文件都是通过HTTP这个协议，从服务器上传输到客户的电脑里面的。

现在我们必须要树立一个思想，就是每一个网址，都对应着确定的服务器上的文件。

比如网址： http://www.icdjs.com/1.html 就是服务器上面的1.html文件.

‘http://www.icdjs.com/’ 看似没有精确到一个文件，但是有一个规定，就是index.html是默认的首页文件。

http://www.icdjs.com/aaa/b.html 服务器上面有一个aaa文件夹，这个文件夹里面有一个b.html文件。

HTML初步认识

HTML、CSS、JS都是纯本文的。

HTML是英语HyperText Markup Language的缩写，超文本标记语言。.html就是网页的格式。

纯文本txt文件是不能描述文档的语义的，文档中不知道谁是主标题，谁是副标题，谁是段落。所以html应运而生。

下面就是一个html文件的演示，就是通过html标签对儿，来给文本增加语义：

<h1>Angelababy简介</h1>

<h2>基本信息</h2>

<p>杨颖（Angelababy），1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p>

<p>2009年主演电影《全城热恋》。2012年，凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”；同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖；4月，Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版；同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿。2015年5月参演好莱坞电影《独立日2》；7月，主演电影《摆渡人》。
</p>

<h2>早年经历</h2>

<p>1989年2月28日，Angelababy出生在上海，中文名杨颖。杨颖自小随家人到上海定居，在上海的演艺学校学演戏及跳舞。13岁时，杨颖回香港加入了Talent Bang，还担任Viva Club Disney主持。</p>

<h2>个人生活</h2>

<p>2015年5月27日，黄晓明和Angelababy（杨颖）在青岛民政局领证完婚。</p>

<p>2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点，Angelababy工作室曝光了一两人的婚纱照，照片中，两人以巴黎地标建筑为背景，浪漫亲吻。</p>

html提供了很多标签对儿，可以给文本增加不同的语义。比如：

<h1> </h1>标签对儿，主标题。

<h2> </h2>标签对儿，二级标题。

<p> </p> 标签对儿，普通段落。

现在的业界的标准，网页技术严格的三层分离：

html就是负责描述页面的语义；
css负责描述页面的样式；
js负责描述页面的动态效果的。

所以，html不能让文字居中，不能更改文字字号、字体、颜色。因为这些都是属于样式范畴，都是css干的事儿；html不能让盒子运动起来，因为这些属性行为范畴，都是js干的事儿。 html只能干一件事儿，就是通过标签对儿，给文本增加语义。这是html唯一能做的。

HTML骨架

骨架抽象出来：

<html>
	<head>

	</head>
	<body>

	</body>
</html>

网页的最外层的标签对儿是<html></html>标签对儿，里面有两部分，分别是head和body。

head标签中，描述网页的配置；
body中的内容，才是用户可以看见的内容。

完整的骨架：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>哈哈哈</title>
	</head>
	<body>
		<h1>我是一个主标题</h1>
        <p>我是一个小段落</p>
	</body>
</html>

第1行，就是网页的声明头，这行语句，千万不要背诵，谁背谁傻。术语叫做DocType Defintion，文档类型定义，简称DTD。这行语句非常的复杂，里面暗含了一个网址。W3C就是出web规范的组织机构。html、css、js的规范都是W3C定义发布的。world wide web coalition , 国际万维网联盟。网页声明头可以告诉浏览器，这是一个什么标准的页面。

第2行，是最大的html标签，所有的网页内容，都要包裹在这个标签对儿里面。我们发现，html标签中，有两个属性： xmlns=”http://www.w3.org/1999/xhtml” 命名空间，就是一个规范； xml:lang=”en” 语言是英语

第3行，就是head标签，就是配置。

第4行，字符集的配置

第5行，哈哈哈网页的标题，可以显示在浏览器的标签栏中。

第7行，body标签就是网页的内容，用户能够看见。

1 文档声明头

任何一个标准的HTML页面，第一行一定是一个以 <!DOCTYPE …… 开头的语句。

这一行，就是文档声明头，DocType Declaration, 简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

到底有哪些规范呢？

首先我们先确定一件事儿，我们现在学习的是HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰，所以这几年网页还是应该用HTML4.01来制作。后面将知道手机、移动端的网页，就可以使用HTML5了。

HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下面）：

HTML4.01里面规定了普通、XHTML两大种规范。

HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？<H1></H1>

所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。

大规范	小规范
HTML4.01	Strict 严格的，体现在一些标签不能使用，比如u
	Transitional 普通的
	Frameset 带有框架的页面
XHTML1.0严格体现在小写标签、闭合、引号	Strict 严格的，体现在一些标签不能使用，比如u
	Transitional 普通的（我们学习的版本）
	Frameset 带有框架的页面

strict表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。比如，u标签，就是可以让一个本文加上下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。

怎么给文本增加下划线呢？今后的css将使用css属性来解决。

Transitional表示“普通的”，这种模式就是没有一些别的规范。

Frameset表示“框架”，在框架的页面使用。

我们学习的就是XHTML1.0中的transitional版本。因为我们的页面中偶尔要使用一些类似u这种标签（当做CSS钩子）。

sublime输入的html:xt x表示XHTML，t表示transitional

HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自己打脸了）： <!DOCTYPE html>

2 字符集

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。

中文能够使用的字符集两种：

第一种：UTF-8

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

第二种：gb2312

<meta http-equiv="Content-Type" content="text/html;charset=gb2312">

也可以写成gbk

<meta http-equiv="Content-Type" content="text/html;charset=gbk">

有两个字库UTF-8和gb2312。

UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。

我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）

注意，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多。

UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。

保存大小： UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）

总结：

UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；

gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。

列出2个使用情形：

1）你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。

2）你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。

qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
新华网藏语频道，使用的是UTF-8，保证字符集的数量。

3 关键字和页面描述

meta除了可以设置字符集，还可以设置关键字和页面描述。

设置页面描述：

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

只要设置的Description页面面熟，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。

抽象一下：

<meta name=”” content=”” />

name就是“名字”的意思，content是“内容”的意思。

也就是说，我们定义了一个名字是“Description”（描述）的meta。内容是网易是中国领先……

定义关键词：

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。 Keywords就是“关键词”的意思。

4 title标签

<title>网页的标题</title>

title也是有助于SEO搜索引擎优化的：

<title>传智播客官网-传智播客提供java培训、web前端培训、php培训、C/C++培训、iOS培训、网页设计培训、平面设计培训、UI设计培训、游戏开发培训、网络营销培训服务</title>

网页的head标签里面，表示的是页面的配置，有什么配置？字符集、关键词、页面描述、页面标题。今后我们还能看见一些配置：IE适配、视口、iPhone小图标等等……

HTML的基本语法特性

1 HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。

百度为了追求极致的显示速度，所以HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了.

2 空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

代码：里面有空格、缩进、换行

<p>我爱

						          陈伟</p>

显示的时候，折叠了：

我爱陈伟

3 标签要严格封闭

标签不封闭是灾难的：

<title>欢迎<title>

多说一嘴，HTML、CSS就是写代码，不能算“编程”，因为这里面没有业务逻辑，加减乘除，与或非。说白了，就是用代码画画。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>习大大专著</h3>
	<ul>
		<li>
			<h4>习近平谈治国理政</h4>
			<p>¥49.00</p>
			<p>《习近平谈治国理政》谈中国、论世界，为各国读者开启了一扇观察和感知中国的窗口。阅读这本书，可以了解以习近平同志为总书记的党中央治国理念和执政方略，品味悠长醇厚的中国历史文化，感受当</p>
		</li>
		<li>
			<h4>习近平用典</h4>
			<p>¥23.60</p>
			<p>人民日报社社长杨振武主持编写并作序，人民日报社副总编辑卢新宁组织撰写解读文字，旨在对习近平总书记重要讲话（文章）引用典故的现实意义进行解读，对典故的背景义</p>
		</li>
		<li>
			<h4>摆脱贫困</h4>
			<p>26.00</p>
			<p>追本溯源 融会贯通	深入学习贯彻习近平总书记系列重要讲话精神	推动学习贯彻向广度深度拓展	习近平总书记**部个人专著	时隔22年后重印发行</p>
		</li>
	</ul>
</body>
</html>

甚至于可以再放一个ul：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>去超市要买的东西</h3>
	<ul>
		<li>
			吃的
			<ul>
				<li>饼干</li>
				<li>面包</li>
				<li>
					巧克力
					<ul>
						<li>德芙</li>
						<li>费列罗</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			用的
			<ul>
				<li>笔记本</li>
				<li>圆珠笔</li>
			</ul>
		</li>
		<li>
			喝的
			<ul>
				<li>牛奶</li>
				<li>可乐</li>
			</ul>
		</li>
	</ul>
</body>
</html>

5.2 有序列表

ordered list 有序列表，用ol表示。

<ol>
	<li>小苹果</li>
	<li>月亮之上</li>
	<li>最炫民族风</li>
</ol>

浏览器会自动增加阿拉伯序号。

也就是说，ol和ul就是语义不一样，怎么使用都是一样的。

ol里面只能有li，li必须被ol包裹。li是容器级。

ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

<ul>
	<li>1. 小苹果</li>
	<li>2. 月亮之上</li>
	<li>3. 最炫民族风</li>
</ul>

5.3 定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：

dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿

dt、dd只能在dl里面；dl里面只能有dt、dd。

<dl>
	<dt>北京</dt>
	<dd>国家首都，政治文化中心</dd>
	<dt>上海</dt>
	<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
	<dt>广州</dt>
	<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>

表达的语义是两层：

1) 是一个列表，列出了北京、上海、广州三个项目

2）每一个词儿都有自己的描述项。

dd是描述dt的。

定义列表用法非常灵活，可以一个dt配很多dd.

dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义。

6 div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。 CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。

<div>
	<h3>中国主要城市</h3>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
</div>

<div>
	<h3>美国主要城市</h3>
	<ul>
		<li>纽约</li>
		<li>洛杉矶</li>
		<li>华盛顿</li>
		<li>西雅图</li>
	</ul>
</div>

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。 span里面是放置小元素的，div里面放置大东西的：

<p>
	简介简介简介简介简介简介简介简介
	<span>
		<a href="">详细信息</a>
		<a href="">购买</a>
	</span>
</p>

div标签是最最重要的布局标签，至于class是什么意思，下午说：

<div class="header">
	<div class="logo"></div>
	<div class="nav"></div>
</div>
<div class="content">
	<div class="guanggao"></div>
	<div class="dongxi"></div>
</div>
<div class="footer"></div>

所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

7 表单

表单就是收集用户信息的，就是让用户填写的、选择的。

<div>
	<h3>欢迎注册本网站</h3>
	<form>
		所有的表单内容，都要写在form标签里面
	</form>
</div>

form是英语表单的意思。form标签里面有action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		<h3>欢迎注册本网站</h3>
		<form action="1.php">
			<p>
				请输入您的姓名:
				<input type="text" value="默认有的值，(*^__^*) 嘻嘻……" />
			</p>
			<p>
				请输入您的密码：
				<input type="password" />
			</p>
			<p>
				请选择你的性别：
				<input type="radio" name="xingbie" /> 男
				<input type="radio" name="xingbie" /> 女
				<input type="radio" name="xingbie" checked="checked" /> 保密
			</p>
			<p>
				请选择你的学历：
				<input type="radio" name="xueli" /> 幼儿园
				<input type="radio" name="xueli" /> 小学
				<input type="radio" name="xueli" /> 初中
				<input type="radio" name="xueli" /> 高中
				<input type="radio" name="xueli" /> 大学
				<input type="radio" name="xueli" /> 硕士
				<input type="radio" name="xueli" /> 博士
				<input type="radio" name="xueli" /> 更高
			</p>
			<p>
				请选择你的爱好：
				<input type="checkbox" name="aihao"/> 睡觉
				<input type="checkbox" name="aihao"/> 吃饭
				<input type="checkbox" name="aihao"/> 足球
				<input type="checkbox" name="aihao"/> 篮球
				<input type="checkbox" name="aihao"/> 乒乓球
				<input type="checkbox" name="aihao"/> 打豆豆
			</p>
			<p>
				请选择你的技能：
				<input type="checkbox" name="jineng" /> HTML
				<input type="checkbox" name="jineng" /> CSS
				<input type="checkbox" name="jineng" /> JS
			</p>
			<p>
				请选择你的籍贯：
				<select>
					<option>北京</option>
					<option>河北</option>
					<option>河南</option>
					<option>山东</option>
					<option>山西</option>
					<option>湖北</option>
					<option>安徽</option>
				</select>
			</p>
			<p>
				签名：
				<textarea rows="4" cols="30">哈哈哈</textarea>
			</p>
			<p>
				普通按钮：
				<input type="button" value="我是一个普通按钮" />
			</p>
			<p>
				提交按钮：
				<input type="submit" />
			</p>
			<p>
				重置按钮
				<input type="reset" />
			</p>
		</form>
	</div>
</body>
</html>

7.1 文本框

<input type="text" value="默认有的值" />

input表示“输入”，指的是这是一个“输入小部件”，
type表示“类型”，
text表示“文本”，指的是类型是一个文本框的输入小部件。
value表示“值”，value属性就是默认有的值，文本框中已经被填写好了。

这是一个自封闭标签，自此，我们学习的自封闭标签有：

<meta name=”Keywords” content=”” />
<img src=”” alt=”” />
<input type=”text” />

7.2 密码框

<input type="password" />

7.3 单选按钮

只能选一个，术语叫做“互斥”。

<p>
	请选择你的性别：
	<input type="radio" name="xingbie" /> 男
	<input type="radio" name="xingbie" /> 女
	<input type="radio" name="xingbie" /> 保密
</p>

radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。

默认被选择，就应该书写checked=”checked”

<input type="radio" name="sex" checked="checked">

7.4 复选框

也是input标签，type是checkbox。

<p>
	请选择你的爱好：
	<input type="checkbox" name="aihao"/> 睡觉
	<input type="checkbox" name="aihao"/> 吃饭
	<input type="checkbox" name="aihao"/> 足球
	<input type="checkbox" name="aihao"/> 篮球
	<input type="checkbox" name="aihao"/> 乒乓球
	<input type="checkbox" name="aihao"/> 打豆豆
</p>

复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

7.5 下拉列表

select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

<p>
	请选择你的籍贯：
	<select>
		<option>北京</option>
		<option>河北</option>
		<option>河南</option>
		<option>山东</option>
		<option>山西</option>
		<option>湖北</option>
		<option>安徽</option>
	</select>
</p>

7.6 多行文本框（文本域）

text就是“文本”，area就是“区域”。

<p>
	签名：
	<textarea rows="4" cols="30"></textarea>
</p>

这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。

cols属性表示columns“列”，rows属性表示rows“行”。值就是一个数，表示多少行，多少列。

7.7 三种按钮

按钮也是input标签，一共有三种按钮：

7.7.1 普通按钮

<input type="button" value="我是一个普通按钮" />

button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

7.7.2 提交按钮

<input type="submit" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。

7.7.3 重置按钮

<input type="reset" />

会将当前表单的所有数据初始化。

7.8 label标签

本质上讲，“男”、“女”这两个汉字，和input元素没有关系。

<p>
	请选择你的性别：
	<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
	<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
</p>
<p>
	<input type="checkbox" id="kk" />
	<label for="kk">10天内免登陆</label>  
</p>
<p>
	<label for="xingming">姓名：</label>
	<input type="text" id="xingming" />
</p>

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。

CSS

现在的互联网前端三层：

HTML 超文本标记语言从语义的角度描述页面结构。
CSS 层叠式样式表从审美的角度负责页面样式。
JS JavaScript 从交互的角度描述页面行为。

简介

css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思，我们将慢慢的去理解。 css的最新版本是css3，我们学习的是css2.1。因为css3和css2.1不矛盾，必须先学2.1然后学3。

我们写css的地方是style标签，就是“样式”的意思，写在head里面。

后面的课程你将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。

<style type=”text/css”> </style>

type表示“类型” ， text就是“纯文本”。css也是纯文本的。

css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

选择器{
	k:v;
	k:v;
	k:v;
	k:v;
}
选择器{
	k:v;
	k:v;
	k:v;
	k:v;
}

常见的属性

字符颜色：color:red;

color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制.

字号大小：font-size:40px;

font就是“字体”，size就是“尺寸”。px是“像素”。单位必须加，不加不行。

背景颜色：background-color: blue;

background就是“背景”。

加粗：font-weight: bold;

font是“字体” weight是“重量”的意思，bold粗。

不加粗：font-weight: normal;

normal就是正常的意思。

斜体：font-style: italic;

italic就是“斜体”。

不斜体：font-style: normal;

normal就是正常的意思。

下划线：text-decoration: underline;

decoration就是“装饰”的意思。

没有下划线：text-decoration: none;

none就是“没有”的意思。

选择器

css怎么学？很简单有两个知识部分：

选择器，怎么选；
属性，样式是什么

1 基础选择器

1.1 标签选择器

标签选择器就是标签的名字。

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input。
无论这个标签藏的多深，一定能够被选择上。
选择的所有，而不是一个。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			background-color: yellow;
		}
		span{
			color:red;
		}
		p{
			color:blue;
		}
	</style>
</head>
<body>
	<h1>前端与移动开发<span>1期班</span>基础班</h1>

	<ul>
		<li>
			<ul>
				<li>
					<ul>
						<li>
							<ul>
								<li>
									<p>我是很深的p</p>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>

	<p>我是另一个段落</p>
</body>

1.2 id选择器

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。

这个标签的名字，可以任取，但是：

只能有字母、数字、下划线
必须以字母开头
不能和标签同名。比如id不能叫做body、img、a

一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

1.3 类选择器

.就是类的符号。类的英语叫做class。

所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。

class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：

<p class="teshu">我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>

css里面用.来表示类：

.teshu{
	color: red;
}

同一个标签，可能同时属于多个类，用空格隔开：

<h3 class="teshu zhongyao">我是一个h3啊</h3>

所以要总结两条：

class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
同一个标签可以同时携带多个类。

注意：

不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

就是一个标签，可以同时被多种选择器选择，标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签，从而影响样式，这就是css的cascading“层叠式”的第一层含义。

2 高级选择器

2.1 后代选择器

<style type="text/css">
	.div1 p{
		color:red;
	}
</style>

空格就表示后代，.div1 p 就是.div1的后代所有的p。

强调一下，选择的是后代，不一定是儿子。

空格可以多次出现。

<style type="text/css">
	.div1 .li2 p{
	 	color:red;
	 }
</style>

就是.div1里面的后代.li2里面的p。  后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

后代选择器，描述的是祖先结构。

2.2 交集选择器

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		h3.special{
			color:red;
		}
	</style>
</head>
<body>
	<h3>我是标题</h3>
	<h3 class="special">我是标题</h3>
	<h3 class="special zhongyao">我是标题</h3>
	<p class="special">我是段落</p>
	<p>我是段落</p>
	<p>我是段落</p>
	<a href="" class="xixi">aaa</a>
</body>

选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。

交集选择器没有空格。

交集选择器可以连续交（一般不要这么写,IE7开始兼容）

h3.special.zhongyao{
	color:red;
}

交集选择器，我们一般都是以标签名开头，比如div.haha 比如p.special。

2.3 并集选择器（分组选择器）

<style type="text/css">
	h3,li{
		color:red;
	}
</style>

用逗号就表示并集。

2.4 通配符*

*就表示所有元素。

<style type="text/css">
		*{
			color:red;
		}
	</style>

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

3 其他选择器

3.1 儿子选择器

IE7开始兼容，IE6不兼容。

div>p{
	color:red;
}

div的儿子p。和div的后代p的截然不同。

能够选择：

<div>
	<p>我是div的儿子</p>
</div>

不能选择：

<div>
	<ul>
		<li>
			<p>我是div的重孙子</p>
		</li>
	</ul>
</div>

3.2 序选择器

IE8开始兼容；IE6、7都不兼容。

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	
	   // 选择第1个li：
		ul li:first-child{
			color:red;
		}
		
		// 选择最后一个1i：
		ul li:last-child{
			color:blue;
		}

/*		ul li.first{
			color:red;
		}

		ul li.last{
			color:blue;
		}*/
	</style>
</head>
<body>
	<ul>
	   // 由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
		<li class="first">项目</li>
		<li>项目</li>
		<li>项目</li>
		<li>项目</li>
		<li>项目</li>
		<li>项目</li>
		<li>项目</li>
		<li>项目</li>
		<li>项目</li>
		<li class="last">项目</li>
	</ul>
</body>

3.3 下一个兄弟选择器

IE7开始兼容，IE6不兼容。

+表示选择下一个兄弟。选择上的是h3元素后面紧挨着的第一个兄弟。

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		h3+p{
			color:red;
		}
	</style>
</head>
<body>
	<h3>我是一个标题</h3>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<h3>我是一个标题</h3>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<h3>我是一个标题</h3>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<h3>我是一个标题</h3>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
</body>

CSS的继承性和层叠性

1 继承性

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			color:blue;
			border: 2px solid red;
		}
	</style>
</head>
<body>
	<div>
		<p>我是段落</p>
		<p>我是段落</p>
		<p>我是段落</p>
	</div>
</body>

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。

所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性：

body{
    color:gray;
    font-size:14px;
}

继承性是从自己开始，直到最小的元素。

2 层叠性

层叠性：就是css处理冲突的能力。所有的权重计算，没有任何兼容问题！

当选择器，选择上了某个元素的时候，那么要这么统计权重：

id的数量，类的数量，标签的数量

显示红色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*权重计算：id的数量，类的数量，标签的数量*/
		#box1 .hezi2 p{  /*权重：1,1,1*/
			color:red;
		}
		div div #box3 p{  /*权重：1,0,3*/
			color:green;
		}
		div.hezi1 div.hezi2 div.hezi3 p{  /*权重：0,3,4*/
			color:blue;
		}
	</style>
</head>
<body>
	<div class="hezi1" id="box1">
		<div class="hezi2" id="box2">
			<div class="hezi3" id="box3">
				<p>猜猜我是什么颜色？</p>
			</div>
		</div>
	</div>
</body>
</html>

不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div div div div div div div div div div div div p{
			color:red;
		}
		.haha{
			color:blue;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<div>
										<div>
											<div>
												<div>
													<p class="haha">文字</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

如果权重一样，那么以后出现的为准：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box2 div .pp{     /*1,1,1*/
			color:blue;
		}
		#box1 .hezi2 p{    /*1,1,1*/
			color:red;
		}
	</style>
</head>
<body>
	<div class="hezi1" id="box1">
		<div class="hezi2" id="box2">
			<div class="hezi3" id="box3">
				<p class="pp">猜猜我是什么颜色？</p>
			</div>
		</div>
	</div>
</body>
</html>

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		#hezi1 #hezi2 #hezi3{  /*没有选中*/
			color:red;
		}
		div.box div.box div.box{   /*没有选中*/
			color:blue;
		}
		p{                       /*选中*/
			color:green;
		}
	</style>
</head>
<body>
	<div class="box" id="hezi1">
		<div class="box" id="hezi2">
			<div class="box" id="hezi3">
				<p class="pp">猜猜我是什么颜色</p>
			</div>
		</div>
	</div>
</body>
</html>

如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		#hezi3{        /*这个描述的近*/
			color:blue;
		}
		#hezi1 #hezi2{
			color:red;
		}
	</style>
</head>
<body>
	<div class="box" id="hezi1">
		<div class="box" id="hezi2">
			<div class="box" id="hezi3">
				<p class="pp">猜猜我是什么颜色</p>
			</div>
		</div>
	</div>
</body>
</html>

权重问题大总结：

先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。

如果没有选中，那么权重是0。如果大家都是0，就近原则。

3 权重问题

3.1 多类名冲突

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.spec2{
			color:blue;
		}
		.spec1{
			color:red;
		}
	</style>
</head>
<body>
	<p class="spec1 spec2">我是什么颜色？</p>
	<p class="spec2 spec1">我是什么颜色？</p>
</body>
</html>

这种情况与在标签中的挂类名的书序无关，只和css的顺序有关。

所以是红色的，因为css中red写在后面。

3.2 !important标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			color:red !important;
			font-size: 100px ;
		}
		#para1{
			color:blue;
			font-size: 50px;
		}
		.spec{
			color:green;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<p id="para1" class="spec">文字</p>
</body>
</html>

important是英语里面的“重要的”的意思,我们可以通过语法来给一个属性提高权重,这个属性的权重就是无穷大。

!important需要强调3点：

!important提升的是一个属性，而不是一个选择器;
!important无法提升继承的权重，该是0还是0
!important不影响就近原则

盒模型

1 盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。

width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”

盒模型的示意图：

代码演示：

这个盒子width:200px; height:200px; 但是真实占有的宽高是302*302。这是因为还要加上padding、border。宽度和真实占有宽度，不是一个概念！！

2 width（内容宽度）、height（内容高度）

下面这两个盒子，真实占有宽高，完全相同，都是302*302：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 100px;
			height: 100px;
			padding: 100px;
			border: 1px solid red;
		}

		.box2{
			width: 250px;
			height: 250px;
			padding: 25px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<div class="box1">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	<div class="box2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
</html>

真实占有宽度= 左border + 左padding + width + 右padding + 右border

这两个盒子的盒模型图，见下表：

3 padding（内边距）

padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。

也就是说，background-color将填充所有boder以内的区域。

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

3.1 小属性

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

top上、right右、bottom下、left左。

这种属性，就是复合属性。比如不写padding-left那么就是没有左内边距。

3.2 综合属性

如果写了4个值：padding:30px 20px 40px 100px;，代表上、右、下、左。

padding:30px 20px 40px 100px;    /*上右下左*/
padding: 20px 30px 40px;         /*右=左*/
padding: 30px 40px;              /*上=下，右=左*/
padding: 30px;                   /*上下左右都是30px*/

要懂得，用小属性层叠大属性：

padding: 20px;
padding-left: 30px;

下面的写法错误：

padding-left: 30px;
padding: 20px;

不能把小属性，写在大属性前面。

4 border（外框）

就是边框。边框有三个要素：粗细、线型、颜色。

颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。

border: 1px dashed red;

所有的线型：

比如，border:10px ridge red; 在chrome和firefox、IE中有细微差别：

如果公司里面的设计师，处女座的，追求极高的页面还原度，那么不能使用css来制作边框。就要用到图片，就要切图了。所以，比较稳定的就几个：solid、dashed、dotted。

border是一个大综合属性:border:1px solid red;

就是把4个边框，都设置为1px宽度、线型实线、red颜色。

border属性能够被拆开，有两大种拆开的方式：

按3要素:border-width、border-style、border-color
按方向：border-top、border-right、border-bottom、border-left

按3要素拆开：

border-width:10px; → 边框宽度
border-style:solid; → 线型
border-color:red; → 颜色。

如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

按方向来拆

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：

border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

border可以没有，border:none;

某一条边没有：border-left: none;

也可以调整左边边框的宽度为0：border-left-width: 0;

5 margin（外框）

5.1 塌陷现象

标准文档流中，竖直方向的margin不叠加，以较大的为准。

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：

5.2 居中

margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：

margin-left: auto;
margin-right: auto;

简写为：margin:0 auto;

注意：

使用margin:0 auto; 的盒子，必须有width，有明确的width
只有标准流的盒子，才能使用margin:0 auto; 居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
margin:0 auto;是在居中盒子，不是居中文本。文本的居中，要使用text-align:center;。

margin:0 auto;   → 让这个div自己在大容器中居中。
text-align: center;  → 让这个div内部的文本居中。

普及一下知识，text-align还有

text-align:left;     没啥用，因为默认居左
text-align:right;    文本居右

5.3 善用父padding，而非子margin

<div>
		<p></p>
</div>

如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。这个p有一个margin-top踹父亲，试图将自己下移，结果：

margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。

所以，我们一定要善于使用父亲的padding，而不是儿子的margin。

标准文档流

1 块级元素和行内元素

学习的初期，你就要知道，标准文档流等级森严。标签分为两种等级：

块级元素

霸占一行，不能与其他任何元素并列
能接受宽、高
如果不设置宽度，那么宽度将默认变为父亲的100%。

行内元素

与其他行内元素并排
不能设置宽、高。默认的宽度，就是文字的宽度。

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。

文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：

所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

2 块级元素和行内元素的相互转换

块级元素可以设置为行内元素，行内元素可以设置为块级元素。

div{
	display: inline;
	background-color: pink;
	width: 500px;
	height: 500px;
}

display是“显示模式”的意思，用来改变元素的行内、块级性质。

inline就是“行内”。

一旦，给一个标签设置display: inline;

那么，这个标签将立即变为行内元素。此时它和一个span无异：

此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了

同样的道理，

span{
	display: block;
	width: 200px;
	height: 200px;
	background-color: pink;
}

block是“块”的意思。

让标签变为块级元素。此时这个标签，和一个div无异：

此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父亲

标准流里面限制非常多，标签的性质恶心。比如，我们现在就要并排、并且就要设置宽高。

所以，移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

浮动
绝对定位
固定定位

浮动

浮动是css里面布局用的最多的属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			float: left;
			width: 300px;
			height: 400px;
			background-color: yellowgreen;
		}
		.box2{
			float: left;
			width: 400px;
			height: 400px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

两个元素并排了，并且两个元素都能够设置宽度、高度了（这在刚才的标准流中，不能实现）。浮动想学好，一定要知道三个性质。

1 浮动的元素脱标

证明1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			float: left;
			width: 200px;
			height: 200px;
			background-color: yellowgreen;
		}
		.box2{
			width: 350px;
			height: 350px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

证明2：

一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

span{
	float: left;
	width: 200px;
	height: 200px;
	background-color: orange;
}

2 浮动的元素互相贴靠

如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。如果没有足够的空间靠着1号大哥，自己去贴左墙。

3 浮动的元素有“字围”效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			float: left;
			width: 344px;
			height: 516px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div>
		<img src="images/1.jpg" alt="" />
	</div>
	<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>
</body>
</html>

让div浮动，p不浮动：

div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。

浮动的清除

来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		li{
			float: left;
			width: 90px;
			height: 40px;
			background-color: gold;
			/*文本居中*/
			text-align: center;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>设计模式</li>
		</ul>
	</div>

	<div>
		<ul>
			<li>学习方法</li>
			<li>英语水平</li>
			<li>面试技巧</li>
		</ul>
	</div>
</body>
</html>

我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。

第二个div中的li，去贴第一个div中最后一个li的边了。

原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。

下面介绍几种去掉浮动的方法。

1 给浮动的元素的祖先元素加高度。

如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
	 	div{
	 		height: 50px;
	 		border: 1px solid #000;
	 	}
		li{
			float: left;
			width: 90px;
			height: 40px;
			margin-right: 10px;
			background-color: gold;
			/*文本居中*/
			text-align: center;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>设计模式</li>
		</ul>
	</div>

	<div>
		<ul>
			<li>学习方法</li>
			<li>英语水平</li>
			<li>面试技巧</li>
		</ul>
	</div>
</body>
</html>

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

2 `clear:both;`

网页制作中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。

脑弄大开：能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
	 	li{
	 		float: left;
	 		width: 120px;
	 		height: 40px;
	 		text-align: center;
	 		background-color: orange;
	 	}
	 	.box2{
	 		clear: both;
	 	}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>设计模式</li>
		</ul>
	</div>

	<div class="box2">
		<ul>
			<li>学习方法</li>
			<li>英语水平</li>
			<li>面试技巧</li>
		</ul>
	</div>
</body>
</html>

clear:both;:clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。

这种方法有一个非常大的、致命的问题，margin失效了。

3 隔墙法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
		.box1{
			background-color: gold;
		}
		li{
			float: left;
			width: 120px;
			height: 40px;
			background-color: orange;
			text-align: center;
		}
		.cl{
			clear: both;
		}
		.h8{
			height: 8px;
			_font-size:0;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>设计模式</li>
		</ul>
	</div>
	
	<div class="cl h8"></div>

	<div class="box2">
		<ul>
			<li>学习方法</li>
			<li>英语水平</li>
			<li>面试技巧</li>
		</ul>
	</div>
</body>
</html>

4 `overflow:hidden;`

overflow:hidden; ,overflow就是“溢出”的意思， hidden就是“隐藏”的意思。

表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。

本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

行高和字号

1 行高

CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。

line-height: 40px;

文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么文字的上下间距就会5px。

为了严格保证字在行里面居中，我们的工程师有一个约定：行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。

2 单行文本垂直居中

文本在行里面居中，公式：行高:盒子高;。

需要注意的是，这个小技巧，行高=盒子高。只适用于单行文本垂直居中！！不适用于多行。如果想让多行文本垂直居中，需要设置盒子的padding：

3 字号（font）

使用font属性，能够将字号、行高、字体，能够一起设置。

font: 14px/24px “宋体”;

等价于三行语句：

font-size:14px;
line-height:24px;
font-family:"宋体";

font-family就是“字体”。family是“家庭”、“伐木累”的意思。

网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装。

比如你设置：font-family: "华文彩云";, 如果用户电脑里面没有这个字体，那么就会变成宋体。

页面中，中文我们只使用：微软雅黑、宋体、黑体。如果页面中，需要其他的字体，那么需要切图。英语：Arial 、 Times New Roman

为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。

就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：font-family: "微软雅黑","宋体";,备选字体可以有无数个，用逗号隔开。

我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体

font-family: "Times New Roman","微软雅黑","宋体";

所有的中文字体，都有英语别名

微软雅黑的英语别名：font-family: "Microsoft YaHei";

宋体的英语别名：font-family: "SimSun";

行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。

font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;

超级链接美化

1 伪类

也就是说，同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。

类就是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。伪类用冒号来表示。

a标签有4种伪类，要求背诵：

a:link{
	color:red;
}
a:visited{
	color:orange;
}
a:hover{
	color:green;
}
a:active{
	color:black;
}

:link 表示，用户没有点击过这个链接的样式。是英语“链接”的意思。
:visited 表示，用户访问过了这个链接的样式。是英语“访问过的”的意思。
:hover 表示，用户鼠标悬停的时候链接的样式。是英语“悬停”的意思。
:active 表示，用户用鼠标点击这个链接，但是不松手，此刻的样式。是英语“激活”的意思。

记住，这四种状态，在css中，必须按照固定的顺序写：a:link 、a:visited 、a:hover 、a:active, 如果不按照顺序，那么将失效。“爱恨准则”love hate。必须先爱，后恨。

2 美化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.nav{
			width: 960px;
			height: 50px;
			border: 1px solid red;
			margin: 100px auto;
		}
		.nav ul{
			/*去掉小圆点*/
			list-style: none;
		}
		.nav ul li{
			float: left;
			width: 120px;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
		.nav ul li a{
			display: block;
			width: 120px;
			height: 50px;
		}
		.nav ul li a:link , .nav ul li a:visited{
			text-decoration: none;
			background-color: purple;
			color:white;
		}
		.nav ul li a:hover{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
		</ul>
	</div>
</body>
</html>

a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类。

我们一定要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。

a标签中，描述盒子；伪类中描述文字的样式、背景。

记住，所有的a不继承text、font这些东西。因为a自己有一个伪类的权重。

最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中，发现不写link、visited浏览器也挺兼容。所以这些“老油条”们，就把a标签简化了：

a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.nav{
			width: 960px;
			height: 50px;
			border: 1px solid red;
			margin: 100px auto;
		}
		.nav ul{
			/*去掉小圆点*/
			list-style: none;
		}
		.nav ul li{
			float: left;
			width: 120px;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
		.nav ul li a{
			display: block;
			width: 120px;
			height: 50px;
			text-decoration: none;
			background-color: purple;
			color:white;
		}
		.nav ul li a:hover{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
			<li><a href="#">网站栏目</a></li>
		</ul>
	</div>
</body>
</html>

background系列属性

1 background-color

背景颜色属性。

css2.1中，颜色的表示方法有哪些？一共有三种：单词、rgb表示法、十六进制表示法.

1.1 单词

能够用英语单词来表述的颜色，都是简单颜色。例如：

background-color: red;

1.2 rgb

background-color: rgb(255,0,0);

rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。

1.3 十六进制

background-color: #ff0000;

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;

比如： background-color:#ff0000; 等价于 background-color:#f00;.

2 background-image

用于给盒子加上背景图片：background-image:url(images/wuyifan.jpg);

url()表示网址，uniform resouces locator 同意资源定位符, images/wuyifan.jpg 就是相对路径。

背景天生是会被平铺满的, padding的区域有背景图。

3 background-repeat

设置背景图是否重复的，重复方式的。

也就是说，background-repeat属性，有三种值：

background-repeat:no-repeat;   不重复
background-repeat:repeat-x;    横向重复
background-repeat:repeat-y;    纵向重复

4 background-position

position就是“位置”的意思。background-position就是背景定位属性。

background-position:向右移动量向下移动量;

定位属性可以是负数：

4.1 css精灵

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 150px;
			height: 60px;
			border: 1px solid #000;
			background-image: url(images/1.jpg);
			background-repeat: no-repeat;
			background-position: -100px -220px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

4.2 单词描述

background-position: 描述左右的词儿描述上下的词儿;

描述左右的词儿： left、 center、right

描述上下的词儿： top 、center、bottom

所以：

background-position: right bottom; 表示在右下角。

background-attachment

背景是否固定。

background-attachment:fixed;背景就会被固定住，不会被滚动条滚走。

定位

定位有三种，分别是相对定位、绝对定位、固定定位。

相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;

1 相对定位

相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。

也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
		}
		.box1{
			background-color: yellowgreen;
		}
		.box2{
			background-color: skyblue;
 			position: relative;
 			top: 100px;
 			left: 400px;
		}
		.box3{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。

1.1 用途

相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：

微调元素
做绝对定位的参考，子绝父相（讲绝对定位的时候说）

1.2 定位值

可以用left、right来描述盒子右、左的移动；

可以用top、bottom来描述盒子的下、上的移动。

向右下方移动：

position: relative;
top: 10px;
left: 40px;

向左下方移动：

position: relative;
right: 100px;   → 往左边移动
top: 100px;

向左上方移动：

position: relative;	
right: 100px;
bottom: 100px;    → 移动方向是向上。

向右上方移动：

position: relative;
top: -200px;       → 负数就是相反的方向，如果是正，就是下边，如果是负数就是上边
right: -200px; 

2 绝对定位

绝对定位比相对定位更灵活。

2.1 绝对定位脱标

绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了：

span{
	position: absolute;
	top: 100px;
	left: 100px;
	width: 100px;
	height: 100px;
	background-color: pink;
}

2.2 参考点

绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：

如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：

2.3 以盒子为参考点

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。

要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

<div class="box1">   →  相对定位
	<div class="box2">  →  没有定位
		<p></p>   → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
	</div>
</div>

<div class="box1">   →  相对定位
	<div class="box2">  → 相对定位
		<p></p>   → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
	</div>
</div>

不一定是相对定位，任何定位，都可以作为参考点

<div>  → 绝对定位
	<p></p>  → 绝对定位，将以div作为参考点。因为父亲定位了。
</div>

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

<div class=”box1”>  → 绝对定位
	<div class=”box2”>  → 相对定位
		<div class=”box3”>  → 没有定位
			<p></p>  → 绝对定位，以box2为参考定位。
		</div>
	</div>
</div>

绝对定位的儿子，无视参考的那个盒子的padding。

下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。

p将无视父亲的padding，在border内侧为参考点，进行定位：

2.4 绝对定位的盒子居中

绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。

div{
	width: 400px;
	height: 60px;
	background-color: green;
	position: absolute;
	left: 50%;
	margin-left: -200px;
}

非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。

3 固定定位

固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。

固定定位脱标！

p{
	width: 100px;
	height: 100px;
	background-color: orange;
	position: fixed;
	top: 100px;
	left: 100px;
}

z-index

z-index值表示谁压着谁。数值大的压盖住数值小的。
只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
z-index值没有单位，就是一个正整数。默认的z-index值是0。
如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box1{
			width: 200px;
			height: 200px;
			background: yellowgreen;
			position: absolute;
			top: 100px;
			left: 100px;
			z-index: 444;
		}
		.box2{
			width: 200px;
			height: 200px;
			background: skyblue;
			position: absolute;
			top: 180px;
			left: 180px;
			z-index: 333;
		}
	</style>
</head>
<body>
	<div class="box1">绿</div>
	<div class="box2">蓝</div>
</body>
</html>