HTML

<em>和<strong>标签（强调）

这两个标签都表示一个强调，

<em>标签表示语气上的强调，<em>在浏览器中默认使用斜体显示 <strong>标签表示内容上的强调，比<em>更强烈，默认使用粗体显示 注意：<i>标签中的内容也会以斜体显示 <b>标签中的内容也会以粗体显示 h5规范中规定，对于不需要着重强调的内容而是单纯的加粗或者斜体就可以使用b和i标签

<small>标签（细则内容）

<small>标签中的内容会比它父元素的内容小一些

在h5中使用small标签来表示一些细则一类的内容，比如：合同中的小字，网站的版权声明都可以放到small中

<cite>标签（书名号）

网页中所有的加书名号的内容都可以使用cite标签，表示参考内容。 内容会是斜体

<q>标签（短引用）

<q>标签表示一个短的引用（行内引用），<q>标签引用的内容，浏览器会默认加上引号。

浏览器有时会不兼容

<blockqupte> 标签（块引用）

<blockquote>标签表示一个长引用（块级引用）

<sub>和<sup>（上标和下标）

H<sub>2<sub>O  /*水的分子式*/
x<sup>2<sup>   /*X的二次方*/

<ins>和<del>(插入和删除)

<del>表示删除的内容，会自动添加删除线。 <ins>表示插入的内容，会自动添加下划线。

<pre>标签（保存代码格式）

<pre>是一个预格式标签，会将代码中的格式保存，不会忽略多个空格

<code>标签（表示代码）

结合<pre>标签有利于表示代码。

列表

创建无序列表<ul>(块元素)

-使用ul标签来创建一个无需列表 -使用li标签在ul中创建一个一个的列表项一个li就是一个列表项通过type属性可以修改无序列表的项目符号可选值：disc:默认值，实心远点 square：实心方块 circle ：空心的圆 注意：默认的项目符号我们不使用，如果设置项目符号，则可以采用为li设置背景图片的方式设置

/*去掉项目服号*/
ul{
    list-style:none;
}

创建无序列表

<ul>
		<li>adda<li>
		<li>dad<li>
<ul>

<ul>和<li>都是块元素

创建有序列表(ol)

<ol>
	<li>aaa<li>
	<li>bbb<li>
<ol>

和无序列表类似，用ol代替ul。

通过type属性可以修改序号类型可选值：1:默认值，阿拉伯数字 A/a:大写或小写 i/I:大写或小写的罗马数字

创建定义列表（dl）

用来对一些词汇或者内容进行定义,用dl来创建一个定义列表 dl中有两个子标签 dt:被定义的内容 dd:对定义内容的描述

<dl>
		<dt>武松</dt>
		<dd>景阳冈打死老虎</dd>
		<dt>武大</dt>
		<dd>武松兄弟</dd>
</dl>

表格

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如:课程表、银行对账单，在网页中也可以来创建出不同的表格。

<!--在HTML中，使用table标签来创建一个表格-->
<table>
	<!--在table标签中使用tr表示表格中的-一行，有几行就有几个tr-->
	<tr>
		<!--可以使用th标签来表示表头中的内容，它的用法和td-一样，不同的是它会有- 些默认效果-->
		<th></th>
		<th></th>
		<th></th>
	</tr>
	
	<tr>
	<!--在tr中需 要使用td来创建一个单元格，有几个单元格就有几个td -->
		<td  colsoan="2"> </td>   <!--横向合并单元格-->
		<td> </td>
		<td> </td>
		<td rowspan="2"> </td>	  <!--纵向合并单元格-->
	</tr>
</table>

表格的CSS样

<style>

table{
    /*设置表格的宽度*/
    width:300px;
    /*居中*/
    margin: 0 auto;
    /*边框*/
    border:1px solid black;
    /*
	* table和td边框之间默认有一一个距离
	*通过borderspacing属性可以设置这个距离
	*/
	border-spacing:5px ; /*当border-spacing值为0px时，边框会合并，此时边框是td和table的总和*/
    
    /*
	* border-collapse可以用来设置表格的边框合并，如果设置了border-collapse，则border-spacing会自动失	   * 效
	*/
	border-collapse: collapse;
}

/*通过伪类来设置表格的隔行变色*/
tr:nth-child(odd){
    background-color：red;
}

/*	鼠标移入到tr以后，改变颜色*/
tr :hover{
	background-color: #ff0;
}

</style>

长表格

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部在HTML中为我们提供了三个标签: thead：表头 tbody：表格主体 tfoot：表格底部这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中： thead中的内容，永远会显示在表格的头部 tfoot中的内容，永远都会显示表格的底部 tbody中的内容，永远都会显示表格的中间如果表格中没有写tbody,浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素，通过table > tr 无法选中行，需要通过tbody > tr

表单

表单的作用就是用来将用户的信息提交给服务器的，比如：百度的搜索框，注册，登录这些操作都需要填写表单。

用form标签创建一个表单，form标签中必须指定一-个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址。

<form action= "target. html">
	<!--
	使用form创建的仅仅是-一个空白的表单，
	我们还需要向form中添加不同的表单项
	-->

	<!--
	使用input来创建一个文 本框，它的type属性是text
	如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name 属性
	name表示提交内容的名字
	用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
	url地址?查询字符串
	格式:
	属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
	在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
	-->
	用户名<input type="text" name="username" /> <br /><br />

	<!--
	密码框
	一使用input创建-一个密码框，它的type属性值是password
	-->
	密码<input type="password" name="password" / <br /><br />

    <!--
	单选按钮
	-使用input来创建一 个单选按钮，它的type属性使用radio
	一单选按钮通过name属性进行分组，name属性相同是一组拔钮
	-像这种需要用户选择但是不需要用户直接填写内容的表单项，
	还必须指定-一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
	如果希望在单选按钮或者是多选框中指定默认选中的选项，
	则可以在希望选中的项中添加checked= "checked"属性
	-->
	性别<input type="radio" name="gender" value="male" />男
		<input type= "radio" name="gender" value= "female"  checked="checked"/>女
	<br /><br />

    <!--
	多选框
	-使用input创建一个多选框，它的type属性使用checkbox
    -->
	爱好
    <input type="checkbox"name= "hobby" value="zq"/>足球
	<input type="checkbox" name= "hobby" value="lq" />篮球
	<input type="checkbox" name= "hobby" value="ymq" / >羽毛球
	<input type= "checkbox" name= "hobby" value= "ppq"/>乒乓球

	<!--
	下拉列表
	一使用select来创建一个 下拉列表
	下拉列表的name属性需要指定给select,而value 属性需要指定给option
	可以通过在option中添加selected= "selected"来将选项设置为默认选中
    当为select添加一个multiple= "multiple",则下拉列表变为一个多选的下拉列表
	-->                                
	你喜欢的明星
	<select name="star">
	<!--在下拉列表中使用option标签来创建一 个一个列表项-->
	<option value= "fbb">范冰冰</ option>
	<option value= "lxr">林心如</option>
	<option value="zbs" selected= "selected">赵本山</option>
    </select>
    
     <!--
	使用textarea创建一个文本域
	-->
     自我介绍<textarea name="info"></textarea>
                                                                         
	<!--
	提交按钮可以将表单中的信息提交给服务器
	使用input创建一个提交 按钮,它的type属性值是submit
	在提交按钮中可以通过value属性来指定按钮上的文字
	-->
	<input type="submit" value="注册"/>
    
    <!--
	<input type="reset" />可以创建一个重置按钮，
	点击重置按钮以后表单中内容将会恢复为默认值
	-->
	<input type="reset"/>
                       
	<!--
	使用input type=button可以用来创建一一个单纯的按钮，
	这个按钮没有任何功能，只能被点击,可以绑定JS代码
	-->
	<input type= "button" value="按钮"/>
                  
    <!--
	除了使用input,也可以使用button标签来创建按钮
	这种方式和使用input类似，只不过由于它是成对出现的标签
	使用起来更加的灵活
	-->
	<button type="submit">提交</button>
	<button type="reset">重置</button>
    <button type="button">按钮</button>

</form>

在下拉列表中还可以对选项进行分组

<!--
在select中可以使用optgroup对选项进行分组
同一个optgroup中的选项是一组
可以通过1abel属性来指定分组的名字
-->
<optgroup label="女明星">
	<!--在下拉列表中使用option标签来创建一个-一个列表项-->
	<option value=" fbb">范冰冰</ option>
	<option value="1xr">林心如</ option>
	<option value= "zw">赵薇</ option>
</optgroup>
    
<optgroup label="男明星">
	<option value="zbs"selected="selected">赵本山</option>
	<option value="ldh">刘德华</ option>
	<option value="pcj">潘长江</option>
</optgroup>

文字和表单绑定

<!--
	在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
	label标签
	该标签可以指定一一个for属性，该属性的值需要指定一一个表单项的id值
-->
	<label for="um" >用户名</label>
	<input id="um"	type="text"	name="username" />

为表单分组

<!--
在表单中可以使用fieldset来为表单项进行分组, 
可以将表单项中的同一组放到一个fieldset中
-->
<fieldset>
	<!-- 在fieldset可以使用legend子标签， 来指定组名-->
	<legend>用户信息</legend>
</fieldset>

框架集

框架集和内联框架的作用类似，都是用于在-一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架，使用frameset来创建一一个框架集，注意frameset不能和body出现在同一个页面中，所以要使用框架集，页面中就不可以使用body标签。

属性: rows: 指定框架集中的所有的框架，一行一-行的排列 cols: 指定框架集中的所有的页面，一列一列的排列这两个属性frameset必须选择-一个，并且需要在属性中指定每一部分所占的大小 frameset中也可以再嵌套frameset frameset和iframe-样，它里边的内容都不会被搜索引擎所检索， 所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的 使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就后要发送几次请求，用户的体验比较差，如果非得用建议使用frameset而不使用iframe

<frameset cols="30%,*,30%">
	<!-- 在frameset中使用frame子标签来指定要引入的页面
	引入几个页面就写几个frame
	-->
	<frame src="01.表格.html" />
	<frame src="02.表格.html" />
    
	<!-- 嵌套一个frameset -->
	<frameset rows= "30%, 50%, *">
	<frame src="04. 表格的布局. html" />
	<frame src="05. 完善clearfix. html" />
	<frame src="06. 表单.html”/>
	</frameset>
</frameset>

CSS

常用选择器

元素选择器

作用：通过元素选择器可以选择页面中的所有指定元素语法：元素名{ 属性名：属性值； }

例：P{
    color:red;
}

id选择器

作用：通过元素的id属性值选中唯一的一个元素

语法：#id属性值{ 属性名：属性值； }

例：#id{
    color:red;
}

类选择器

与id选择器类似只不过class属性可以重复,一个元素可以设置多个class（可以通过这些多个class同时选中一个标签），多个元素也可以设置相同的class，

语法：.class名{ 属性名：属性值； }

例：.class{
    color:red;
}

选择器分组(并集选则器)

通过选择器分组可以同时选中多个选择器对应的元素语法：选择器1，选择器2，选择器 N{}

#p1,.p2,h1{
    color:red;
}

通配选择器

可以用来选中页面中的所有元素

语法：*{}

*{
    color:red;
}

复合选择器（交集选则器）

作用：可以选中同时满足多个选择器的元素语法：选择器1选择器2选择器N{}

<span class=hello>复合选择器</span>
span.p3{
    background-color:yellow;
}

后代元素选择器

作用：选中指定元素的指定后代元素语法：祖先元素(或者祖先选择器)(空格)后代元素{}

选中div元素的后代元素span
div span{
    color:red;
}

兄弟选择器

后一个兄弟选择器

作用：可以选中一个元素后紧挨着的指定的一个兄弟元素

语法：前一个+后一个

span + p{
    选择紧挨着span的p元素
}

后多个兄弟选择器

作用：可以选中一个元素后紧挨着的指定的多个兄弟元素

语法：前一个 ~ 后一个

span ~ p{
    选择span后面的的所有p元素
}

子元素选择器

作用：选中指定父元素的指定子元素语法：父元素 > 子元素

选中div的子元素span
div > span{
    color:red;
}

其他子元素选择器：

:first-child 选择第一个子标签 :last-child 选择最后一个子标签 :nth-child 选择指定位置的子元素

:first-of-type :last-of-type :nth-of-type -:选择指定类型的子元素

例如：child型的例子

p:first-child{
    表示选择第一个元素并且该元素要为p元素才能对其样式进行设定(不考虑其父元素是谁)
}
:first-child{
    表示选择第一个任意元素(不考虑其父元素)
}
body > p:first-child{
    表示选择body元素中第一个元素并且该元素为P元素才能对其样式进行设定
}
P:nth-child(1){
    表示选择第1个元素并且该元素要为p元素才能对其样式进行设定(不考虑其父元素是谁)
:nth-child(1){
    表示选择第1个元素(括号里的参数表示选中第几个，其中even表示选中偶数，odd表示选中奇数)
}

type型的例子

p:first-of-type{
    表示选中第一个元素类型为p的元素（last-of-type同理）
}

伪类选择器

伪类选择器：专门用来表示元素的一种特殊的状态比如:访问过的超链接，普通的超链接，获取焦点的超链接等，当我们需要为这些处于特殊状态的元素设置样式时，就可以使用伪类选择器

给链接定义的样式

正常链接(未访问的链接)：a:link{}

访问过的链接：a:visited(只能定义字体颜色){}

鼠标滑过的链接：a:hover{}

正在点击的链接: a:avtive{}

浏览器时通过历史记录来判断一个链接是否是访问过的，由于涉及到用户的隐私，所以使用visitied伪类只能设置字体的颜色（不能太明显）

由于这几个样式的优先级相同，所以有冲突的样式之间会有覆盖现象，建议写的时候按（link,visited,hover,active顺序写）

hover和active不止能对a用还可以对其他元素使用；

使用时注意浏览器版本的兼容问题

a:link{
    让没有访问的链接成红色
    color:red;
}

给段落定义样式

首字母：-:first-letter

首行: -:first-line

p:first-letter{
    color:red;
    让P标签的第一个 字母为红色
}

其他元素的伪类

获取焦点：-:focus 指定元素前: -:before 指定元素后: -:after 选中的元素: -::selection

p::selection{
    color:red;
    让p元素中的内容被选中时呈现红色
}

伪元素

使用伪元素来表示元素中的一些特殊的位置

例如段落的位置处：

段落前：p:before{} 段落后：p:after{} 这两个属性一般要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容

p:before{
    content:"我会出现在整个段落的最前边"
}

属性选择器

作用：可以根据元素中的属性或属性值来选取指定的元素语法：

	元素名[属性名]  选取含有指定属性的元素

元素名[属性名=“属性值”] 选取含有指定属性值的元素

元素名[属性名^=“属性值”] 选取属性值以指定内容开头的元素

元素名[属性名$=“属性值”] 选取属性值以指定内容结尾的元素

	元素名[属性名*=“属性值”] 选取属性值包含指定内容的元素

p[class]{
    选中有class属性的P元素
}
p[class="hello"]{
    选中有class属性并且class属性值为hello的P元素
}

否伪类选择器

作用:可以从已选中的元素中剔除出的某些元素语法：:not(选择器)

p:not(.hello){
    剔除类名为hello的p元素
}

选择器的优先级

当使用不同的选择器选中同一个元素时并且设置相同的样式时，这样样式之间就产生了冲突，最终到底采用那个选择器定义的样式由选择器的优先级（权重）决定。

优先级的规则：

内联样式：优先级1000 id选择器：优先级100 类和伪类：优先级10 元素选择器：优先级1 通配选择器：优先级0 继承的样式：没有优先级（优先级最低）

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较（p.hello{}的有优先级为1+10=11），但是注意，选择器优先级计算不会超过他的最大数量级（十个类选择器相加数值上为100，但是规定不能超过最大数量级999所以为900），如果优先级一样，则使用靠后的选择器。

并集选择器的优先级时单独计算（div,p,#p1,.hello{}的优先级类似与将他们拆开单独计算）

可以在样式最后，添加一个！importment，则此时刻样式将会获得一个最高的优先级，将会优先于所有的样式显示，甚至超过内联样式，但是在开发中尽量避免使用！importment

p{
    color:red !importment;
    优先级最高，高于内联样式的优先级
}

样式的继承性

像儿子继承父亲的遗产一样，在css中，祖先元素上的样式也会被他的后代元素所继承，利用继承可以把一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式

<div style="color:red;">
    <p>
		p元素继承了div元素的color属性，所以字体为红色
		<span>span继承了div元素的color属性所以字体为红色</span>
	</p>
</div>

但是并不是所有的样式都会被子元素所继承，比如：背景，边框，定位等相关的样式不会被继承

<p style="background:red">
    <span>span元素无法继承P标签的background属性，但是span的默认背景为透明所以span下面的p元素的背景颜色会透出来，所以span中的内容会成红色</span>
</p>

em(字体样式)

-em和百分比类似，它是相对于当前元素的字体大小来计算的 -1em = 1 font-size -使用em时，当字体大小发生改变时，em也会随之改变 -当设置字体相关的样式时，经常会使用em

font-size:100px;
width:1em; /*设计样式时的属性*/

RGB值（颜色）

css中不但可以用英文单词来表示不同的颜色，还可以用RGB值来表示。 RGB值指的是通过Red Green Blue三元色，通过这三种颜色的不同的浓度来表示出不同的颜色。

颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有例子：

/*定义一个属性值（背景颜色）*/
background:RGB(111,222,222);

浓度也可以采用一个百分比来设置，需要一个0%-100%之间的数字例子：

background:RGB(100%,100%,100%);

也可以使用三组两位的十六进制数组来表示一个颜色：00表示没有相当于数值中的0，ff表示最大相当于255

#ff0000  /*表示红色*/

背景

使用background- image来设置背景图片 -语法: background- image:url(相对路径); 1.-如果背景图片大于元素，默认会显示图片的左上角 2.-如果背景图片和元素一样大，则会将背景图片全部显示 3.-如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色一般情况下设置背景图片时都会同时指定-一个背景颜色

background-image:url(相对路径);

背景重复设置

background-repeat用于设置背景图片的重复方式可选值: repeat：默认值，背景图片会双方向重复(平铺) no-repeat：背景图片不会重复，有多大就显示多大 repeat-x：背景图片沿水平方向重复 repeat-y：背景图片沿垂直方向重复

background-repeat:repeat-x; /*设置水平方向的重复*/

图片的显示位置

背景图片默认是贴着元素的左上角显示，通过background-position可以调整背景图片在元素中的位置可选值：该属性可以使用top, right, left, bottom ,center中的两个值来指定一个背景图片的位置例：top left 左上如果只指定一个值，则第二个默认值是center

background-position:top left;/*设置图片位置在左上*/

也可以设置两个偏移量第一个值是水平偏移量 -如果指定的是一个正值，则图片会向右移动指定的像素 -如果指定的是-一个负值，则图片会向左移动指定的像素第二个是垂直偏移量 -如果指定的是一个正值，则图片会向下移动指定的像素 -如果指定的是一个负值，则图片会向上移动指定的像素

设置图片不随页面滚动

background- attachment用来设置背景图片是否随页面一起滚动可选值: scroll,默认值，背景图片随者窗口滚动 fixed,背景图片会固定在某一位置，不随页面滚动

background- attachment:fixed ;

不随窗口滚动的图片，我们一般都是设置给body,而不设置给其他元素

图片的简写属性

设置页面的背景属性如下：

body{
	height: 5000px;
	/*设置一个背景颜色*/
	background-color: #bfa;
	/*设置-一个背景图片*/
	background- image: url(img/3.png);
	/*设置背景不重复*/
	background-repeat: no-repeat ;
	/*设置背景图片的位置*/
	background-position: center center;
	/*设置背景图片不随滚动条滚动*/
	background-attachment: fixed;
}

这样写有点麻烦，可以使用background的简写属性

background -通过该属性可以同时设置所有背景相关的样式 -没有顺序的要求，谁在前谁在后都行,也没有数量的要求，不写的样式就使用默认值（如果前面写过background的相关样式，后面再用background的简写属性，则会覆盖掉前面写的相关属性）

body{
	background: #bfa url( img/3.png) center center no-repeat fixed;
}

图片整合技术(练习)

将一个按钮的图片作为超链接的背景图片，实现页面中按钮的效果，可以点击，鼠标滑过时有滑过的效果，并且也有点击的效果。

1.创作一个超链接，将图片作为背景时会有显示不完全的情况首先应该将<a>标签这样的内联元素转换为块元素，转换之后设置宽高。

a{
    display:block; /*不一定非要用display,也可以让它浮动脱离文档流*/
	width:200; /*宽高为图片的宽高*/
	height:200;
	background-image:url(图片的相对地址)；
}

2.在设置滑过或者点击效果时可以使用伪类让背景的图片更换，以达到相应的效果

a:link{
    display: block;
	/*设置宽高*/
	width: 93px;
	height: 29px;
	/*设置背景图片*/
	background- image: url(img/ btn/link . png);
	/*设置背景图片不重复*/
	background-repeat: no-repeat;
}

a: hover{
	/*设置背景图片*/
	background- image: ur1(img/ btn/hover . png);
}
a: active{
	/*设置背景图片*/
	background- image: url(img/btn/active.png);
}

在页面中用图片作为<a>标签的背景图片，当鼠标滑过时更换背景图片，点击时也更换背景图片。

3.做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验。产生问题的原因: 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源我们这个练习，一上来浏览器只会加载link. png由于hover和active的状态没有马上触发，所以hover . png和active . png并不是立即加载的，当hover被触发时，浏览器才去加载hover . png，当active被触发时，浏览器才去加载active.png，由于加载图片需要-定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况.

为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，然后在通过background- position来切换要显示的图片的位置，这种技术叫做图片整合技术(CSS-Spritep)，优点： 1.将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。 2.将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

a:link{
    display: block;
	/*设置宽高*/
	width: 93px;
	height: 29px;
	/*设置背景图片*/
	background- image: url(img/ btn/btn. png);
	/*设置背景图片不重复*/
	background-repeat: no-repeat;
}
. btn:hover{
	/*
	*当是hover状态时，希望图片可以向左移动
	*/
	background-position: -93px Bpx;
}
.btn:active{
	/*
	*当是active状态时，希望图片再向左移动
	*/
	background-position: -186px 0px;
}

字体

设置字体颜色，使用color来设置文字的颜色。设置文字的大小，浏览器中一般默认的字体大小是16px,font-size设置的并不是文字本身的大小，在页面中每个文字都是处在一个看不见的框中，通过font-size实际上设置的高度，并不是字体的大小，一般情况下文字都要比这个格要小一些，也有时会比格大一些，根据文字的不同显示效果也不同。

通过font-family也可以指定文字的字体，当采用某种字体时，如果浏览器支持则使用该字体，若果不支持，则使用浏览器默认字体，改样式可以同时设置多个字体，多个字体之间使用逗号分开，当采用多个字体时，浏览器会优先使用前边的字体，如果没有再尝试下一个

 font-family:宋体，黑体，arial;

在网页中将字体分成5大类: serif (村线字体) sans-serif (非村线字体) monospace (等宽字体) cursive (草书字体) fantasy (虚幻字体) 可以将字体设置为这些大的分类,当设置为大的分类以后, 浏览器会自动选择指定的字体并应用样式

通过font-style可以用来设置文字的斜体 可选值: normal,默认值，文字正常显示 italic文字会以斜体显示 oblique文字会以倾斜的效果显示一大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic 和oblique它们的效果往往是一-样的,一般我们只会使用italic

font -weight可以用来设置文本的加粗效果: 可选值: normal,默认值，文字正常显示 bold,文字加粗显示该样式也可以指定100-900之间的9个值，但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果也就是200有可能比100粗，300有可能比200租，但是也可能是-样的

font-variant可以用来设置小型大写字母 可选值: normal,默认值，文字正常显示 small-caps文本以小型大写字母显示小型大写字母: 将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母的大可小一些。

在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的所有样式，可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开，使用font设置字体样式时，斜体加粗小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式大小必须是倒数第二个样式。 实际上使用简写属性也会有一个比较好的性能，可以减少浏览器的解析次数。

font:small-caps bold italic 60px ”微软雅黑”

行高(line-height)

在CSS并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大使用line-height来设置行高，行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。行间距=行高一字体大小通过设置line-height可以间接的设置行高，可以接收的值: 1.直接就收一个大小 2.可以指定一个百分数，则会相对于字体去计算行高 3.可以直接传一个数值，则行高会设置字体大小相应的倍数

在font中也可以指定行高在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值。注意：如果先使用line-height来设置行高，而之后又用，font来设置字体的大小，这时line-height所设置的行高会被font中的默认值覆盖掉，所以如果想单独设置行高，应把line-height放在font之后

text-indent(设置缩进)

text- indent用来设置首行缩进当给它指定-一个正值时，会自动向右侧缩进指定的像素如果为它指定一一个负值，则会向左移动指定的像素, 通过这种方式可以将一些不想显示的文字隐藏起来这个值一般都会使用em作为单位

盒子模型(div)

盒子模型相当于块模型，盒子模型的组成分为几个部分：

内容区(content) 内边距(padding) 边框(border) 外边距 (margin)

盒子模型中的内容区和边框

.box{
    /*通过类名来设置块的样式*/
	width:100px;	/*使用width来设置盒子内容区的宽度*/
	height:100px;	/*使用height来设置内容区的高度*/
    /*width和height设置的都是内容区的大小，而不是盒子整个的大小，盒子可见框的大小由内容区，内边距和边共同决定*/
    
	background-color /*使用background-color来设置背景颜色*/

    /*为元素设置边框
	要为一个元素设置边框必须指定三个样式，三者缺一不可 
	border-width:边框的宽度
	border-color:边框的颜色
	border-style:边框的样式*/
    
    /*设置边框的宽度:
      如果在border-width指定了四个值，则四个值会分别设置给上右下左，按照顺时针的方向设置的
	  如果指定三个值，则三个值会分别设置给上左右下
	  如果指定两个值，则两个值会分别设置给上下左右
	  如果指定一一个值，则四边全都是该值
    
      除了border-width, CSS中还提供了四个border-xxx-width，xxx的值可能是top right bottom left，专门用来设置指定边的宽度

*/
    border-width:10px;
    
    /*设置边框的颜色：
    设置边框的颜色和宽度一样，color也提供四个方向的样式，可以分别指定额色，border-xxx-color同边框的设置一致*/
    border-color:red;
    
    /*设置边框的样式
		可选值:
		none：默认值，没有边框
		solid：实线
		dotted：点状边框
		dashed：虚线
		double：双线
	style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边
*/
    border-style:solid;
    
    /*边框的简写样式，通过它可以同时设置四个边框的样式，宽度颜色，而且没有任何顺序要求*/
    /*border一指定就是同时指定，四个边不能分别指定*/
    border:red,solid,10px;
    
    /*border-top, border-bottom, border-left, border-right, 可以单独设置四个边的样式，规则和border一致，只不过它只对一条边生效。*/
    border-right:red,solid,10px;
    

	
}

盒模型中的内边距

内边距(padding)，指的是盒子的内容区与盒子边框之间的距离，一共有四个方向的内边距，可以通过: padding-top padding-right padding- bottom padding-left 来设置四个方向的内边距内边距会影响盒子的可见框的大小，内容区的元素的背景会延伸到内边距, 盒子的大小由内容区、内边距和边框共同决定

也可以通过padding一个属性来设置，方法与设置边框宽度border-width一致。

当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度和高度，以适应内边距

盒模型的外边距

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。盒子有四个方向的外边距: margin-top margin-right margin-bottom margin-left

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动。

margin还可以设置为auto, auto- 般只设置给水平方向的margin 如果只指定左外边距或右外边距的margin为auto则会将外边距设置为最大值，垂直方向外边距如果设置为auto,则外边距默认就是0 如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

外边距同样可以使用简写属性margin, 可以同时设置四个方向的外边距,规则和padding一致。

margin: 10px 20px 30px 40px;

垂直外边距的重叠

在网页中相邻外垂直方向的相邻外边距会发生外边距的重叠，所谓外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

浏览器默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding,而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

/*清除浏览器样式*/
*{
    margin:0;
    padding:0;
}

内联元素的盒模型

内容区 内联元素不能设置width和height

内边距 内联元素支持水平方向内边距，垂直方向的内边距可以设置但是不影响布局

边框支持边框的设置，但是边框和内边距一样，水平方向上会影响布局，垂直方向不会。

外边距

只支持水平方向，垂直方向不支持。

display（改变元素的类型）

通过display样式可以修改元素的类型可选值： inline ：可以将一个元素作为内联元素来显示。 block：可以将一个元素作为块元素来显示。 inline-block:将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行

none：不显示元素，并且元素不会在页面中继续占有位置

display:inline;

visibility（元素是否可见）

使用display：none；设置的元素不会在页面中显示，并且不会占用页面位置, 使用visibility隐藏的元素不会显示，但会占用位置。

visibility：可以用来设置元素的隐藏和显示的状态可选值: visible：默认值，元素默认会在页面显示 hidden：元素会隐藏不显示使用visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持

overflow（父元素溢出设置）

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小，如果子元素的大小超过了父元素的内容区，则超过部分会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。父元素默认是将溢出的内容在父元素外显示。

通过overflow可以设置父元素如何处理溢出内容：

可选值： visible：默认值，不会做溢出处理，元素会直接在父元素以外的位置显示 hidden:溢出的内容会被修剪，不会显示 scroll:会为父元素添加滚动条，通过拖动滚动条来查看完整内容，该属性不论内容是否溢出，都会添加水平方向和处置方向的滚动条。 auto：会根据需求自动添加滚动条，需要水平滚动条就添加水平滚动条，需要垂直滚动条就添加垂直滚动条，都不需要就都不添加。

文档流

文档流：文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中元素在文档流中的特点： 块元素 1.块元素在文档流中会独占-行，块元素会自上向下排列。 2.块元素在文档流中默认宽度是父元素的100% 3.块元素在文档流中的高度默认被内容撑开 内联元素 1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。 2.在文档流中，内联元素的宽变和高度默认都被内容撑开

浮动（使元素脱离文档流）

块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流使用float来使元素浮动，从而脱离文档流可选值：

none:默认值，元素默认在文档流中排列 left:元素会立即脱离文档流，向页面左侧浮动 right：元素会立即脱离文档流，向页面右侧浮动当为一个元素设置浮动后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流后，它下面的元素会向上移动，元素浮动后会尽量向页面的左上或右上浮动，直到遇到父元素的边框或者其他浮动元素，如果浮动元素上边是一个没有浮动元素，则浮动元素不会超过块元素，浮动元素不会超过它上面的兄弟元素，最多最多一边期齐

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

当元素设置浮动以后，会完全脱离文档流。块元素如果没有设置宽高的话，脱离文档流以后，高度和宽度就是被内容撑开的宽高。

内联元素脱离文档流之后会变成块元素，宽高会变为设置的宽高（在未对内联元素设置浮动时，即使设置了内联元素的宽高也不会显示，实际的宽高就是被内容撑开的宽高，在浮动后才会显示设置的宽高）。

清除浮动

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能 clear可以用来清除其他浮动元素对当前元素的影响可选值: none：默认值，不清除浮动 left：清除左侧浮动元素对当前元素的影响 right：清除右侧浮动元素对当前元素的影响 both：清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动

.box{
    clear:both; /*清楚两则的浮动*/
}

浮动后文档流塌陷问题

在文档流中，父元素如果没有设置高度和宽度时此时他的高度默认是被子元素撑开的，宽度为浏览器的默认宽度，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题, 解决办法 方案一：我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

方案二：根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context 简称BFC，该属性可以设置打开或者关闭，默认是关闭的。如何打开元素的BFC： 1.设置元素浮动 2.设置元素绝对定位 3,设置元素为：display:inline-block 打开BFC后元素具有如下特征:

1.父元素的垂直外边距不会和子元素重叠：可以撑开父元素但是会导致父元素的宽度丢失，而切也会导致下边的元素上移，不能解决问题。 2.开启BFC的元素不会被浮动元素覆盖 3.开启BFC的元素可以包含浮动的子元素：可以解决问题但是会导致宽度丢失。 4.将元素的overflow设置为一个非visible的值（推荐方式，但是在IE6及以下的浏览器版本并不支持BFC，所以并不能兼容IE6，但是虽然IE6没有BFC但是具有另一个隐含属性：haslayout，该属性和BFC类似，所以IE6浏览器可以通过开haslayout来解决该问题，开启方式有很多，我们直接使用一种副作用最小：将元素的zoom设置为1即可（zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍）zoom只在IE6中支持，火狐，谷歌浏览器不支持，建议两个都写上）

方案三 ：可以直接在高度塌陷的父元素的最后，添加一一个空白的div,由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

.clear{
    clear:both;/*清楚两则浮动的影响，并且内容为空白*/
}

方案四：可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div,这是我们最推荐使用的方式，几乎没有副作用

. clearfix:after{
	/*添加一个内容*/
	content:"";
	/*转换为一个块元素*/
	display: block;
	/*清除两侧的浮动*/
	clear: both;
	}
	/*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理*/
. clearfix{
	zoom:1;
	}

父子元素外边距重叠问题

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素，可以使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠,但是会添加无用的块元素

<div class="box1">
	<table></table>
	<div class= "box2"></div>
</div>

可以像解决浮动元素高度塌陷问题一样在前面添加一个伪类

在经过修改后clearfix是一个多功能的，既可以解决高度塌陷问题也可以解决父元素和子元素的垂直外边距重合问题。

. clearfix:before,
clearfix:after{
	content: ""
	display: table;
	clear: both;
}

定位

定位是指将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。通过position属性来设置元素的定位：可选值： static：默认值，元素没有开启定位 relative：开启元素的相对定位 absolute：开启元素的绝对定位 fixed：开启元素的固定定位（也是绝对定位的一种）

相对定位（relative）

当元素的position属性设置为relative时，则开启了元素的相对定位。

position:relative;
left:100px;
right:100px;

1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。
 2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联

当开启了元素的定位（position属性值是一个非static的值）时,可以通过left,right,top,bottom四个属性来设置元素的偏移量。 left：元素相对于其定位位置的左侧偏移量 right：元素相对于其定位位置的右侧偏移量 top：元素相对于其定位位置的上侧偏移量 bottom：元素相对于其定位位置的下侧偏移量 通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一一个元素进行定位。

绝对定位（absolute）

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位： 1.开启绝对定位会使元素脱离文档流 2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。 3.绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的（一般情况下，如果子元素开启了绝对定位，则父元素都会开启相对定位），如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。 4.绝对定位都会使元素提升一个层级 5.绝对定位会改变元素的性质，内联元素变为块元素，块元素变为浮动元素（如果块元素未设置宽高，则绝对定位后宽高默认为被内容撑开的宽高）

固定定位（fixed）

当元素的position属性设置为fixed时，则开启了元素的固定定位，固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样不同的是：

固定定位永远都会相当于浏览器窗口定位，固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动。IE6不支持固定定位，如果要实现要使用JS

开启定位后的层级问题

在开启定位以后，开启定位的元素会相对于文档流中的元素提升一个层级，如果定位的元素层级是一样的，则下边的元素会盖住上边的。可以通过z-index属性来设置定位元素的层级（z-index只能设置定位元素的层级，未定位的元素会忽略z-index属性），可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示。注意：”父元素的层级再高也无法盖住子元素。“

设置元素的透明背景

opacity可以用来设置元素背景的透明，它需要一个0-1之间的值来表示：0表示完全透明，1表示完全不透明，0.5表示半透明

opacity:0.5;

opacity属性在IE8及以下的浏览器中不支持，IE8及以下的浏览器需要使用如下属性代替：

filter:alpha(opacity=50)

filter:alpha(opacity=透明度)，透明度需要一个0-100之间的值，0：表示完全透明，100：表示完全不透明，

50：表示半透明，这种方式支持IE6，但是这种效果在IE texter中无法测试

IE6png图片的修复(js实现)

在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24,则会导致透明效果无法正常显示解决方法: 1.可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降 2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件，然后在写一下简单的JS代码，来处理该问题

<script type= "text/javascript”,src="js/DD_ belatedPNG_0.0.8a-min.js"></script>

<script type="text/javascript">
    DD_ belatedPNG. fix("div, img");
</script>

hack（浏览器的兼容问题）

有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决该问题，CSS Hack实际上指的是一个特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码

条件hack

条件Hack,条件hack只对IE浏览器有效，其他的浏览器都会将它识别为注释，IE10及以上的浏览器已经不支持这种方式。

<!--[if IET>
	<p>为了态和家人的健康，请远离IE6! ! </p> /*这段代码只在IE浏览器中才会出现*/
<![endif]-->

<!--以下内容只会出现在IE6中-->
<!--[if IE 6]>
	<p>为了您和家人的健康，请远离IE6! ! </p>
<![endif]-->

<!--[if IE 8]>
<p>当前浏览器是IE8↓</p>
<![endif]-->

<!--[if lte IE 9]>
<p>该标签会在IE9以下的浏览器中显示</p>
<![endif]-->

<!--[if ! IE 6]>
<p>你的浏览器不是IE6</p>
<![endif]-->

属性hack

background-color: #bfa;(一般浏览器)
/*
*假设在IE6中需要将背景颜色设置为黄色才能达到和其他浏览器同样的效果
*希望黄色背景只在IE6中生效
*/
_background-color: yellow; /*在样式前添加下划线只有IE6中才能识别*/

其他的hack属性参考W3C文档