HTML & CSS

前端的知识总结:

HTML

属性：可以通过属性来设置标签处理标签中的内容，可以在开始标签中添加属性

属性需要写在开始标签中，实际上就是一个名值对的结构

属性名=“属性值”，一个标签中可以同时设置多个属性，属性之间要使用空格隔开

文档声明 避免进入怪异模式

xml比HTML语法比较严谨

元素就是标签

进制

几进制就是满几进一

二进制 十进制 十六进制 八进制

乱码

计算机底层只认识0,1

在计算机中保存的任何内容，最终都要转换为01这种二进制编码来保存，包括网页中的内容

编码 解码 字符集

依据一定的规则，将字符转换为二进制编码的过程

编码和解码所采用的规则，我们称之为字符集

使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签

在显示效果上h1最大，h6最小，但是文字的大小我们并不关心

段落标签，段落标签用于表示内容中的一个自然段<p>

在HTML中字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格

<br>换行标签

<hr>是一个字节数标签 可以再页面生成一条直线

实体

在HTML中一些如< >这种特殊字符是不可以直接使用的，需要使用一些特殊的符号来表示这些特殊的字符

&实体的名字；

< &lt;小于

> &gt;大于

空格 &nbsp;

版权符号&copy;

图片标签

使用img标签来向网页中引入一个外部图片

<img src="1.gif" alt="这是描述"/>

src：设置一个外部图片的路径

alt：可以用来设置在图片不能显示时，对图片的描述

width：可以用来修改图片的宽度

height：可以用来修改图片的高度，一般使用px作为单位

src属性配置的图片的路径，目前我们所要使用的路径全都是相对路径：

相对路径指相对于当前资源所在目录的位置

可以使用../来表示返回上级目录

图片的格式

jpg -支持的颜色比较多，图片可以压缩，但不支持透明。一般使用jpeg来保存照片等颜色丰富的图片

gif支持颜色少，只支持简单的透明，支持动态图。图片颜色单一，或者是动态图时可以使用gif

png支持颜色多，并且支持复杂透明，可以用来显示颜色复杂的透明的图片

meta

使用meta标签还可以用来设置网页关键字

<meta name="keywords" content="这里边写关键字"/>meta是一个字节数标签 有两个属性

还可以用来指定网页的描述

<meta name="description" content="这里边写描述内容"

这里边是给搜索引擎看的，搜索引擎在 检索页面时，会同时检索页面中的关键字和描述

使用meta可以用来请求的重定向

<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

xhtml的语法规范

1.HTML中不区分大小写，但是我们一般都使用小写

2.HTML中的注释不能嵌套

3.HTML标签必须结构完整，要嘛成对出现，要么自结束标签

<p>我是一个p标签</p>

<p>我是一个p标签

这两个在浏览器中显示的是一样

因为浏览器会以最大的善意去理解自己写的代码 会自动纠正错误的代码

4.标签可以嵌套但不可以交叉嵌套

5.HTML标签中的属性必须有值，且值必须加引号

列子：<p>今天天气 <font color=“red”>真不错<p>

内联框架

使用内联框架可以引入一个外部的页面

使用iframe来创建一个内联框架

属性：

src:指向一个外部页面的路径，可以使用相对路径

在现实开发中我们并不推荐使用内联框架，因为内联框架的内容不会被搜索引擎所检索

width：

height：

name：可以为内联框架指定一个name属性

<iframe src="demo.html" name=“tom”></iframe>

超链接

使用a标签来创建一个超链接

属性：href：指向连接跳转的地址

<a href=“http://www.baidu.com”target=“_blank”>我是一个超链接</a>

a标签中的target属性可以用来指定打开连接的位置

_self,表示在当前窗口中打开

_blank在新的窗口中打开连接

可以设置一个内联框架name属性来在内联框架中打开

<center></center>

center 标签默认会居中

CSS（层叠样式表）

多层次的 tilt插件可以查看网页3D视图

可以将css样式编写到元素的style属性当中 将样式直接编写到style属性中，这种样式我们称之为内联样式 内联样式支队当前的元素中的内容起作用

内联样式不方便复用 不建议使用

内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用

列子：

<p style="color:red;font-size:20px">床前明月光</p>

也可以将css样式编写到head中的style标签里 然后通过css选择器选中指定的元素

然后可以同时为这些元素一起设置样式，这样可以使样式进一步复用

将样式表编写到style标签中，也可以是表现和结构进一步分离，推荐使用

<style type="text/css">

p{color:red;

font-size:40;

}

</style>

<p>疑是地上霜</p>

还可以把css样式写到外部的文件中方便其他的复用 ，然后通过link标签来将外部的css文件引入到当前的页面中

这样完全使结构和表现分离，可以在不同的页面中使用，最大限度的使样式可以进行复用，将样式同意写在样式表中，然后通过link标签引入，可以提高速度

<link rel="stylesheet" type="text/css" href="style.css"/>

在style标签里不能写HTML代码和注释

在style标签里写注释用/* */注意

css语法

选择器：通过选择器可以选中指定的元素，并将声明快的样式应用到选择器对应的元素上

生命块：声明块紧跟选择器后面，使用{}括起来，

生命块中实际上就是一组一组的名值对结构，这一组一组的名值对我们知之为声明。多个声明之间使用；隔开

p{

color:red;

font-size:50px

}

学习css就是学选择器 和 声明块

块元素和内联元素

<div></div>

div就是一个块元素就是会独占一行的元素

无论他的内容有多少他都会独占一整行

其他额块元素有p h1 h2 h3...

div这个标签没有任何语义，他就是一个纯粹的块元素没有任何默认样式

div就是为页面进行布局的

<span></span>

span是一个内联元素或者叫做行内元素

所谓的行内元素指的是只占自身大小的元素，不会占用一整行

常见的内联元素：a img iframe span

span也没有任何语义，span标签用来选中文字，然后为文字设置样式

一般情况下只是用快元素去包含内联元素，而不会使用内联元素去包含一个块元素

a元素可以包含任意元素 但是除了它本身

p元素不可以包含任何其他的块元素

常用选择器

元素选择器

作用：通过元素选择器可以选中页面中的所有指定元素

语法：标签名{}

ID选择器

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

语法：

#id属性值{}

我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复。拥有相同class属性值得元素，我们说他们是一组元素

类选择器

通过元素的class属性值选中一组元素

语法：.class属性值{}

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

通过选择器分组可以同时选中多个选择器对应的元素

语法：选择器1，选择器2，选择器n{}

统配选择器

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

语法：*{}

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

作用：可以选中同时满足多个选择器的元素

语法：选择器1选择器2选择器n{}

对于id选择器不建议使用复合选择器

元素之间的关系：

父元素：直接包含子元素的元素

子元素：

祖先元素：

后代元素：

兄弟元素：

后代元素选择器：

作用：选中指定元素的指定后代元素

语法：祖先元素 后代元素{}

子元素选择器：

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

语法：父元素>子元素

IE6及以下的浏览器不支持子元素选择器

ietester这个软件专门测试ie的兼容性

伪类选择器

专门用来表示元素的一种的特殊的状态

比如：访问过的超链接，比如普通的超链接，当我们需要为处在这些特殊状态的元素设置样式时可以使用伪类

a:link 表示普通的连接（就是没访问过的连接）

a:visited 表示访问过的连接

浏览器是通过我们的历史记录来判断一个连接是否访问过

（由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色）

a:active表示的是超链接被点击的状态

a:hover表示鼠标移入的状态

:focus 获取焦点 当光标在输入框一闪一闪的时候就是获取焦点

:before

:after

::selection 为标签中选中的内容设置样式

注意：这个伪类在火狐中需要采用另一种方式编写

::moz-selection

伪元素

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

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

为p中的第一个字符来设置一个特殊的样式

:first-letter

为p中的第一行设置一个背景颜色

:first-line

:before表示元素最前边的部分

一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容

:after和before相反

属性选择器

title属性，这个属性可以给任何标签指定。当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示

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

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

[属性名="属性值"]选取含有指定属性值得元素

[属性名^="属性值"]选取以什么开头的元素

[属性名$="属性值"]选取以什么结尾的元素

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

<p title="hello"> 我是一个段落</p>

子元素选择器

<body>

<p>我是一个p标签</p>

<div><p>我是一个p标签</p></div>

</body>

:first-child:表示找的第一个子元素

:last-child:表示找最后一个子元素

:nth-child（1）:表示第n个子元素

括号里表示选择第几个子元素

even表示偶数位置的子元素

odd表示奇数位置的子元素

:first-of-type

:last-of-type

:nth-of-type

和first-child这些非常类似，只不过child，是在所有的子元素中排列

而type，是当前类型的子元素中排列

兄弟元素选择器

后一个兄弟元素选择器

作用：可以选中一个元素后紧挨的执行的兄弟元素

语法：前一个+后一个

选中后边的所有兄弟元素

语法：前一个~后边所有

否定伪类

作用：可以从已宣红的元素中剔除某些元素

:not(选择器)

样式的继承

在css中，祖先元素上的样式，也会被他的后代元素所继承

利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素自动继承这些样式

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

选择器的优先级

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

优先级的规则：

内联样式，优先级1000

id选择器，优先级100

类和伪类，优先级10

元素选择器，优先级1

统配*，优先级0

继承的样式，没有优先级

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较

但是注意：选择器的优先级计算不会超过最大的数量级

如果选择器的优先级一样则使用靠后的样式。

并集选择器的优先级是单独计算的

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

a的伪类

涉及到a的伪类一共有四个：

:link

:visited

:hover

:active

这四个选择的优先级是一样的

文本标签

<em>

<strong>

<i>

这两个标签都表示强调的内容

em主要表示语气上的强调，em在浏览器中默认使用斜体显示

strong表示强调的内容，比em更强烈，默认使用粗体显示

i标签中的内容会以斜体显示

b标签中的内容会以加粗显示

h5规范中规定，对于不需要注重的内容而是单纯的加粗或者是斜体就可以使用b和i标签

small

small标签中的内容会比他的父元素中的文字要小一些

在h5中使用small标签来表示细则一类的内容

比如：合同中的小字，网站的版权声明都可以放到small

big标签基本上已经被淘汰了

cite标签

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

比如：书名，歌名，话剧名，电影名

<cite>《论语》</cite>

q标签

表示一个短的引用（行内引用）

标签中的内容浏览器会默认加上引号

子曰：<q>学而时习之不亦说乎</q>

blockquote标签表示一个长引用（块级引用）会独占一行

<sup>

使用sup标签来设置上标

比如写2的2次方

<sub>

用来表示下标

<ins>

表示一个插入的内容

ins中的内容会自动添加下划线

<del>

来表示一个删除的内容，会自动加上一个删除线

<code>

专门用来表示代码

<pre>

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

一般结合使用pre和code来表示一段代码

列表标签

列表就相当于去超市购物时那个购物清单

在HTML也可以创建列表，在网页中一共有三种列表

1.无序列表

使用ul标签创建一个无序列表

使用li在ul中创建一个列表项一个li就是一个列表项

通过type属性可以修改无序列表的项目符号

可选值：disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆圈

注意：默认的项目符号我们一般都不使用！！！ 因为在不同的浏览器显示的符号不同。 如果需要设置项目符号，则可以采用li设置背景图片的方式来设置

ul和li都是块元素

2.有序列表

有序列表和无序列表类似只不过它使用ol来代替ul

有序列表使用有序的序号作为项目符号

type属性，可以指定序号的类型

可选值：1。默认值，使用阿拉伯数字

a/A采用小写或大写字符作为序号

i/I采用小写或大写的罗马数字作为序号

ol也是块元素

<ol>

<li><li>

注意：列表之间都是可以互相嵌套的

3.定义列表（比较复杂）

定义列表来用来对一些词汇或内容进行定义

使用dl来创建一个定义列表

dl中有连个字标签

dt：被定义的内容

dd：对定义内容的描述

<dl>

<dt>武松</dt>

<dd>景阳冈打虎英雄</dd>

同样dl ul ol 之间都可以相互嵌套

单位

长度单位：

像素：px

像素是我们在网页中使用最多的一个单位

一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的

但是这些像素点是不能直接看见

-不同的显示器一个像素的大小也不相同，显示效果越好越清晰，像素越小，反之像素越大

百分比%

也可以将单位设置为一个百分比的形式

这样浏览器会根据其父元素的样式来计算该值

使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变

在我们创建一个自适应的页面时，经常使用百分比作为单位

em和百分比类似，它是相对于当前元素的字体大小来计算

1em=1font-size

使用em时，当字体大小发生改变时，em也会随之改变

当设置字体相关的样式时，经常会使用em

颜色单位

颜色单位：

在css可以直接使用颜色的单位的单词来表示不同的颜色

红色：red

蓝色：blue

绿色：green

也可以使用RGB值来表示不同的颜色

所谓的RGB值指的是通过Red Green Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色

例子：rgb(红色浓度，绿色浓度，蓝色浓度)；

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

rgb（163,243,15）

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

rgb（100%，50%，50%）

0%表示0

100%表示255

也可以使用十六进制的rgb值来表示颜色，原理上和上边的RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色

每组表示一个颜色，范围00-ff

语法：#红色绿色蓝色

十六进制：

0123456789abcdef

00表示没有，相当于rgb中的0

ff表示最大，相当于rgb中的255

#0000ff 相当于blue

像这种两位重复的颜色，可以简写

比如#ff0000可以写成#f00

#abc #aabbcc

字体的样式

浏览器中一般默认的文字大小都是16px

font-size设置的并不是文字本身的大小， 在页面中，每个文字都是处在一个看不见的框中的

我们设置的font-size实际上是设置格的高度，并不是字体的大小

一般情况下文字都要比格要小一些，也有时会比格大

根据字体的不同，显示效果也不同

通过font-family：可以指定文字的字体

当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持

，则使用默认字体

该属性可以同时指定多个字体，多个字体之间使用逗号分开，当采用多个字体时，浏览器会有限使用前边的字体，如果前边没有在尝试下一个

例子：font-family：华文彩云，微软雅黑；

//浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用

//在开发中，如果字体太奇怪，用的太少了，尽量不用，有可能用户的电脑没有，就不能达到想要的效果

字体的分类

在HTML将字体分成5大类

serif（衬线字体）

sans-serif（非衬线字体）

monospace（等宽字体）

cursive（草书字体）

fantasy（虚幻字体）

可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式

字体的其他样式

font-size可以用来设置字体的样式

可选值：

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：italic small-caps “微软雅黑”；

行间距

在css并没有为我们提供一个直接设置行间距的方式

我们只能通过设置行高来间接设置行间距，行高越大行间距越大使用line-height来设置行高

行高类似于我们上学单线本，单线本是一行一行，线于线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示

行间距=行高-字体大小

//通过设置line-height可以间接设置行高

可以接收的值：

1.直接接收一个大小

2.可以指定一个百分数，则会相对于字体去计算行高（不常用）

3.可以直接传一个数值，则行高会设置字体大小相应的倍数（常用）

对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中

在font中也可以指定行高

在字体后也可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值

font：30px/30 “微软雅黑”；

再来一点文本样式

text-transform可以用来设置文本的大小写

可选值：none 默认值，该怎么显示就怎么显示，不做任何处理

capitalize 单词的首字母大写，通过空格来识别单词

uppercase 所有的字母都大写

lowercase 所有的字母都小写

文本修饰

text-decoration

可选值：none：不添加任何修饰，正常显示

underline 为文本添加下划线

overline 为文本添加上划线

line-thought 为文本添加删除线

超链接会默认添加下划线，也就是超链接的text-decoration默认值是underline

如果要去除超链接的下划线则设置

text-decoration：none

letter-spacing可以指定字符间距

Word-spacing可以设置单词之间的距离 实际上就是设置词与词之间的距离

text-align用于设置文本的对其方式

可选值：left 默认值 ，文本靠左对齐 right ，文本靠右对齐

center 文本居中对齐

justify ，两端对齐（通过调整文本之间的空格的大小，来达到两端对齐的效果）

text-indent：用来设置首行缩进（只对第一行有影响）

当给他指定一个正值时，会自动向右侧缩进指定的像素

如果为他指定一个负值时，会自动向左移动指定的像素， 通过这种方式可以将一些不想显示的文字隐藏起来

这个值一般都使用em作为单位

盒子模型（特别重要）

一个盒子分为几个部分

使用width来设置内容区的宽度

使用height设置盒子内容区的高度

为元素设置边框

要为一个元素设置边框必须制定三个样式

border-width：边框的宽度

border-color：边框颜色

border-style：边框样式

width和height只是设置盒子内容区的大小

盒子可见框的大小由内容区和边框宽度大小决定

使用border-width可以分别指定四个边框的宽度

如果在border-width中指定了四个值则四个值会分别设置给上右下左的顺序，顺时针

border-width：10px 20px 30px 40px

如果指定三个值则三个值会分别设定给上 左右 下

border-width：10px 20px 30px；

如果指定两个值则两个值则会分别给上下 左右

border-width：10px 20px ；

一个值得话则分别给四个边

border-width：10px；（有点乱）

除了border-width ，css中还提供了四个border-xxx-width

xxx的值可能是top right left bottom专门用来设置指定边的宽度

和宽度一样，color也提供了四个方向的样式，可以分别指定颜色

border-xxx-color

设置边框的样式：

none没有边框

solid实线

dotted 点状边框

dashed 虚线

double 双线

也可以分别指定四个边框的样式，规则和上边的一样，类似。

继续讲边框

大部分的浏览器中，边框的宽度和颜色都是有默认值的，而边框的样式默认值都是none

border样式：

边框的简写样式，通过他可以同时设置四个边框的样式，宽度，颜色

而没有任何的顺序要求

注意：border一指定就是同时指定四个边不能分别指定

例子：border：10px red solid；

也有border-xxx样式

xxx表示top left right bottom

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

内边距

内边距指的是盒子的内容区与盒子边框之间的距离padding

一共有四个方向的内边距，可以通过：

padding-top

padding-right

padding-bottom

padding-left

来设置四个方向的内边距

内边距会影响盒子的可见框的大小，修改内边距会影响盒子的大小

盒子的大小由内容区，和内边距和边框共同决定

使用padding可以同时设置四个边框的样式规则和border-width一致

外边距

外边距指的是当前盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置。

盒子有四个方向的外边距：

margin-top

margin-right

margin-bottom

margin-left

由于页面中的元素都是靠左靠上摆放的所以注意当我们设置上和左边距时，会导致盒子自身移动，反之会影响其他盒子位置

外边距也可以指定一个负值

如果外边距设置的是负值则元素会向反方向移动

margin还可以设置为auto，auto一般只设置给水平方向的margin

如果只指定，左边距或右边距的margin为auto则会将外边距设置为最大值

垂直方向外边距如果设置为auto，则外边距默认就是0

如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto以使子元素在父元素中水平居中

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

继续外边距

垂直外边距的重叠

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

如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

默认样式

浏览器为了在页面中没有样式时，也可以让页面有一个好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而他的这些默认样式正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding去掉

清除浏览器的默认样式

*{

margin：0

padding：0

内联元素的盒子

列入span

内联元素不能设置width和height

设置完不能用没效果

水平方向的内边距，内联元素可以设置水平方向的内边距

内联元素可以设置垂直方向的内边距，但是不会影响页面的布局。

内联元素可以设置边框但是垂直的边框不会影响页面的布局

内联元素支持水平方向的外边距

水平方向的相邻外边距不会重叠，而是求和

内联元素不支持垂直外边距

display样式

将内联元素变为块元素

通过display样式可以修改元素的类型

可选值：inline：可以将一个元素作为内联元素显示

block：可以将一个元素设置块元素显示

inline-block将一个元素转换为行内块元素（说白了就是可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高又不会独占一行）

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

display：none；

使用该方式隐藏的元素，不会在 页面中显示，并且不再占据页面的位置

visibility

可以用来设置元素的隐藏和显示的状态

visible 默认值 元素默认会在页面显示

hidden 元素会隐藏不显示

使用visibility：hidden；隐藏的元素虽然不会在页面中显示，但是他的位置依然保持

overflow

两个div盒子

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于内容区的大小

如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示

超出父元素的内容，我们成为溢出的内容

父元素默认是将溢出内容，在父元素外边显示

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

visible：默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示

hidden，溢出的内容，会被修剪，不会显示

scroll，会为父元素添加滚动条，通过拖动滚动条查看内容， 该属性不论内容是否溢出，都会添加水平和垂直方向的滚动条

auto 会根据需求自动添加滚动条比较智能。

文档流（了解一下）

文档流

文档流处在网页的最底层他表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中，

元素在文档流中的特点

块元素

div

1。块元素在文档流当中会独占一行，块元素会自上向下排列

2.块元素在文档流中默认宽度是父元素的100%

3.块元素在文档流中默认高度默认被子元素（内容）撑开

内联元素

span

1.内联元素在文档流当中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的元内联元素，则会换到下一行，继续自左向右

2.在文档流中，内联元素的宽度和高度默认都被内容撑开

浮动

块元素在文档流中默认垂直排列，所以这三个div（省略^_^）会从上到下依次排开

如果希望块元素在页面中水平排列，可以使块元素脱离文档流

使用float来使元素浮动，从而脱离文档流

none，默认值，元素默认在文档流中排列

left，元素会立即脱离文档流，向页面的左侧浮动

right，元素会立即脱离文档流，会向页面的右侧浮动

当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，下面的元素会立即向上移动

元素浮动以后会尽量向页面的左上或右上漂浮，直到遇到父元素的边框（再浮就飞外边了。。。）或者其他的浮动元素。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

浮动的元素不会超过他的兄弟元素，最多最多一边齐（比较讲究）

继续浮动

浮动的元素不会盖着文字，文字会自动环绕在浮动元素的周围

所以我们可以通过浮动来设置文字环绕图片的效果

继续浮动1

在文档流中，元素的宽度默认占父元素的全部

当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，高度和宽度都被内容撑开

内联元素脱离文档流以后会变成块元素

高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就有多高

但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

所以在开发中一定要避免出现高度塌陷的问题。

我们可以将父元素的高度写死，以避免塌陷问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案不推荐使用的。

解决高度塌陷

根据w3c的标准，在页面中元素都有一个隐含的属性叫做block formatting context 简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

当开启元素的BFC以后，元素将会具有如下的特性：

1.父元素的垂直外边距不会和子元素重叠

2.开启BFC的元素不会被浮动元素所覆盖

3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC

1.设置元素浮动

使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失而且使用这种方式也会导致下边的元素上移，不解决问题

2.设置元素绝对定位

3.设置元素为inline-block

可以解决问题但是会导致宽度丢失，不推荐使用这种方式。

4.将元素的overflow设置为一个非visible的值

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6.

在ie6中虽然没有BFC，但是具有另一个隐含的属性叫做HasLayout，该属性的作用和BFC类似，所以在ie6浏览器可以通过开启HasLayout来解决问题。

开启方式很多，我们直接使用一种副作用最小的：

直接将元素的zoom设置为1即可。

zoom：1

zoom表示放大的意思，后面跟着一个数值，写几就将元素放大几倍。

zoom：1表示不放大元素，但是通过该样式可以开启hasLayout

zoom这个样式，只在IE中支持，其他浏览器都不支持

清除浮动

我们有时希望清除掉其他元素浮动时对当前元素产生的影响，这时可以使用clear来完成功能

clear可以用来清除其他浮动元素对当前元素的影响

none，默认值，不清除浮动

left，清除左侧浮动

right，清除右侧

both，清除两边

清除对他影响最大的那个

清除浮动以后，元素会回到其他元素浮动之前的位置

解决高度塌陷2

解决高度塌陷方案二：

可以直接在高度塌陷的父元素的最后，添加一个空白的div ，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度基本没有副作用

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

高度塌陷问题3

通过after伪类，选中after伪类

在IE6中不支持after伪类，所以在IE6中还需要使用haslayout来处理

相对定位

定位指的就是将指定的元素摆放到页面的任意位置。通过定位可以任意的摆放元素

通过position属性来设置元素的定位

static：默认值，元素没有开启定位

relative：开启元素的相对定位

相对定位是相对于其原来的位置来定位的

相对定位的元素不会脱离文档流

相对定位会使元素提升一个层级

相对定位不会改变元素的性质，块还是块，内联还是内联

absolute：开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量

left：元素相对于其定位位置的左侧偏移量

同理：right top bottom 。

通常偏移量只需要使用两个就可以对一个元素进行定位，一般水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

绝对定位

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相当于离他最近的开启定位的祖先元素

4.如果所有的祖先元素都没有开启定位则相对于浏览器窗口进行定位

5绝对定位会使元素提升一个层级

6.绝对定位会改变元素的性质，内联元素变成块元素。

固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位

固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样

不同的是：固定定位永远都相对于浏览器窗口进行定位的

固定定位会固定在浏览器窗口的某个位置不会随着滚动条滚动

IE6不支持固定定位

层级

如果定位元素的层级是一样的则下边的元素会盖着上边（上边下边指的是结构的）

通过z-index属性可以设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级有越高，越优先显示

对于没有开启定位的元素不能使用z-index

例子：

z-index：1

z-index：2

z-index：3

父元素的层级再高，也不会盖住子元素（水涨船高。。）

设置元素的透明背景

opacity可以用来设置元素背景的透明，他需要一个0-1之间的值

0表示完全透明

1表示完全不透明

0.5表示半透明

opacity属性在IE8及以下属性代替

filter：alpha（opacity=透明度）

透明度，需要一个0-100之间的值

100表示完全不透明

50表示半透明

这种方式支持IE6，但是这种效果在IE Tester中无法测试（测试工具的一个bug）

背景

使用background-image来设置背景图片

如果背景图片大于元素，默认会显示图片左上角

如果背景图片和元素一样大则会将背景图片全部显示

语法:background-image:url(相对路径)

相对路径写在哪就相对于哪个文件夹

如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色

一般情况下设置背景图片时都会同时指定一个颜色

background-repeat用于设置背景图片的重复方式

repeat，默认值，背景图片会默认双方向重复（平铺）

no-repeat，背景图片不会重复，有多大就显示多大

repeat-x，背景图片沿着水平方向重复

repeat-y，背景图片沿着垂直方向重复

导航条

是对上面的练习，截取一个像素的图片然后水平方向平铺

背景1

背景图片默认是贴着元素的左上角显示的

通过background-position可以调整背景图片在元素中的位置

该属性可以使用top right

left bottom center 中的连个值来指定一个背景图片的位置。

如果只给出一个值则第二个值默认是center

也可以直接指定两个偏移量，

第一个值是水平偏移量

如果指定一个正值，则图片会向右移动指定的元素

负值的话向左

第二个是垂直偏移量

同理以此类推

例子：background-position：100px 100px；

background-attachement用来设置背景图片是否随页面一起滚动

scroll，默认值，背景图片随着窗口滚动

fixed，背景图片会固定在某一位置，不随页面滚动

当背景图片的background-attachement设置为fixed时

练习

做完功能后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验。

产生问题的原因：

背景图片是以外部资源的形式加载进网页的浏览器每加载一个外部资源就需要单独发送一次请求，但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源。

由于加载图片需要一定的时间所以在加载和显示的过程中会有一段时间背景图片无法显示，导致出现闪烁的情况。

为了解决该问题，可以将三个图片整合成一个图片，这样可以同时将三张图片一起加载就不会出现闪烁的问题了，然后在通过background-position来切换要显示的图片的位置，这种技术叫做整合技术（CSS-Sprite）

优点：

1.将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高了访问了效率，提高了用户的体验。

2.将多个图片整合为一张图片减小了图片的总大小，提高了请求的速度，增加了用户的体验。

雪碧图

用photoshop制作雪碧图

背景2

background简写属性

通过该属性可以同时设置所有背景相关的样式

没有顺序要求，谁在前，谁在后都行，也没有数量的要求，不写的样式就使用默认值

表格

表格在日常生活中使用的非常多，比如Excel就是专门创建表格的工具

表格就是用来表示一些格式化的数据的，比如：课程表，银行的对账单

在网页中也可以创建出不同的表格。

在HTML中，使用table标签来创建一个表格

在table标签中使用tr来表示表格中的一行，有几行就有几个tr

在tr中需要使用td来创建单元格，有几个单元格就有几个td

colspan横向的合并单元格

rowspan用来设置纵向的合并单元格

表格1

table是一个块元素

table和td边框之间默认有一个距离

通过border-spacing属性可以设置这个距离

border-collapse可以用来设置表格的边框的合并

如果设置了边框合并则border-spacing自动失效

可以使用th标签表示表头中的内容他和td的用法一样

长表格

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主题，表格底部

在HTML中为我们提供了三个标签：

thead 表头

tbody 表格主题

tfoot 表格底部

这三个标签的作用，就是来区分表格的不同部分，他们都是table的字标签，都需要直接写到table中，tr需要写在这些标签当中。

thead中的内容永远会显示在表格的头部

tfoot中的内容永远都会显示在表格的底部

tbody中的内容，永远都会显示表格中间

如果表格中没有写tbody，浏览器会自动在表格中添加tbody并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素通过table>tr无法选中行，需要通过tbody>tr

表格的布局（基本上没人用了）

以前表格更多的情况实际上是用来对页面进行布局的，但是这钟方式早已被css淘汰了

表格的列数由td最多的元素决定

表格是可以嵌套的

完善clearfix

子元素和父元素相邻的垂直外边距发生重叠，子元素的外边距会传递给父元素

使用空的table标签可以隔离父子元素的外边距，组织外边距的重叠

display-table可以将一个元素设置为表格显示

表单

表单的作用就是用来将用户的信息提交给服务器的

比如：百度的搜索框 注册 登录这些的操作都需要填写表单

使用form标签创建一个表单

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

使用form创建的仅仅是一个空白的表单，我们还需要想form中添加不同的表单项

使用input来创建一个文本框，他的type属性是text

提交按钮可以将表单中的信息提交给服务器

使用input创建一个提交按钮

如果希望表单相中的数据提交到服务器中，还必须给表单项指定一个name属性

name表示提交内容的名字

用户填写的信息会负载url地址的后面以查询字符串的形式发送给服务器

URL地址？查询字符串

格式：属性名=属性值&属性名=属性值&属性名=属性值。。

在提交按钮中可以通过value属性来指定按钮上的文字

在文本框中有额可以指定value属性值，该值将会作为文本框的默认值显示

使用input创建一个密码框，他的type属性值是password

单选按钮

使用input来创建一个单选按钮

他的type属性使用radio

单选按钮他通过name属性进行分组，name属性相同是一组按钮

像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须制定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器

多选框

使用input创建一个多选框，他的type户型使用CheckBox

下拉列表

使用select来创建一个下拉列表

在下拉列表中使用option标签来创建一个一个列表列表项

下拉列表的name属性需要指定给select，而value属性

如果希望在单选按钮或者是多选框中指定默认选中

当为select添加一个multiple=“multiple”，则下拉列表变为一个多选的下拉列表

optgroup

在select中可以使用optgroup可以对选项进行分组，同一个optgroup选项是一组

可以通过label属性来指定

使用textarea

创建一个文本域

input type=“reset”可以创建一个重置按钮点击重置按钮以后表单中内容将会恢复为默认值

input type=button可以创建一个单纯的按钮，这个按钮没有任何功能，只能被点击

除了使用input也可以使用button标签创建一个按钮

JavaScript

先死记住不需要知道为什么

alter

document.write

console.log（只有开发人员才能看到）

js编写的位置

js代码写到script标签里边

可以将js代码编写到标签onclick属性中

当我们点击按钮时，js代码才会执行

可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码

虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用。

js基本语法

js注释：

多行注释/**/，注释中的内容不会被执行，但是可以在源代码中查看

单行注释：//

js严格区分大小写

js中每一条语句以分号（；）结尾

如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写。

js中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。

字面量和变量

字面量，都是一些不可改变的值

比如：1 2 3 4 5 6

字面量都是可以直接使用的，但是我们一般都不会直接使用字面量

变量： 变量可以用来保存字面量，而且变量的值是可以任意改变的

变量更加方便我么内使用，所以在开发中都是通过变量去保存一个字面量，而且很少直接使用字面量

声明变量

在js中var关键字来声明一个变量

标识符

在js中所有的可以由我们自主命名的都可以称之为是标识符

数据类型

数据类型指的是字面量的类型

在js中一共有六种数据类型

string

number

Boolean

null

undefined

上面的数据基本数据类型

object 对象

数据引用数据类型

在js中字符串需要使用引号引起来

使用双引号或单引号都可以，但是不要混着用

引号不能嵌套，双引号不能放单引号

在字符串中我们可以使用\作为转移字符，当表示一些特殊符号时可以使用\进行转义

number类型

在js中所有的数值都是number类型

包括整数和浮点数（小数）

可以使用一个运算符typeof来检查一个变量的类型

语法：typeof 变量

检查字符串时，会返回number

js中可以表示的数字最大值

number.MAX_VALUE

infinity 表示正无穷

NaN表示not a number

在js中整数的运算基本可以保证精确

如果使用js进行浮点运算，可能得到一个不精确的结果

所以千万不要使用js进行对精确要求比较高的运算

Boolean

使用typeof检查一个布尔值时，会返回一个Boolean

null和undefined

null（空值）类型的值只有一个额，就是null

null这个值专门来表示一个为空的对象

undefined（未定义）类型的值只有一个，就是undefined

声明一个变量时，但是并不给变量赋值时

强制类型转换

指将一个数据类型强制转换为其他的数据类型

类型转换主要指，将其他的数据类型，转化为String Number Boolean

将其他的数据类型转换为String

方式一：调用被转换数据类型的toString（）方法

该方法不会影响原变量

但是要注意：null和undefined这两个值没有toString方法，如果调用会报错

方式二：

调用String（）函数，并将转换的数据作为参数传递给函数

转换为Number

将其他的数据类型转换为Number

转换方式一：

使用number（）函数

--字符串--》数字

1.如果是纯数字的字符串，则将其转换为数字

2.如果字符串中有非数字的内容，则转换诶NaN

3.如果字符串时一个空字符串或者是一个全是空格的字符串则转换为0

布尔转换为数字

TRUE转换为1

false转换为0

转换方式二：

这种方式专门用来对付字符串

parseInt（）

parseFloat（）

其他的进制的数字

在js中如果需要表示16进制的数字，则需要 以0x开头

8进制，用0开头

2进制用0b开头

像“070”这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析

可以在parseInt（）中传递一个第二个参数，来指定

转换诶Boolean

将其他的数据类型转换为Boolean

使用Boolean（）函数

数字转布尔 除了0和NaN其他都是TRUE

字符串转布尔 除了空字符串其他都为TRUE

null和undefined都会转换为false

对象也会转换为TRUE

运算符

运算符也叫操作符

通过运算符可以对一个或多个值进行运算

算数运算符

+-/*/%

任何值和NaN运算结果都是NaN

任何值和字符串做加法运算都会转换为字符串再拼接

我们可以利用这一特点

-号

任何值做-*/都会自动转换为Number

可以利用这一特点做隐士类型转换

% 取模

一元运算符

只需要一个操作数

+对于number

：正号不会对数字产生任何影响

-对于非number类型的值

自增和自减

通过自增可以使变量在自身的基础上增加1

a++使a自增1

自增分成两种：后++和前++

无论是a++还是++a，都会立即使元变量的值自增1

逻辑运算符

！非

&& 与

|| 或

对非布尔值

赋值运算符

+= -= *= /=

关系运算符

大于号

大于等于

小于号

小于等于

和数学中的是一样的

非数值的情况

任何值和NaN做任何比较都是false

JQuery学习

bom dom crud（增删改查）

jquery最重药的核心就是查找

（write less，do more）。

初识jquery：

what？是一个优秀的js函数库

使用jquery的网站超过90%中大型web项目开发首选

why？

how？