、

...

、

、
、

、、

、

、

常用的内联元素有：

、、
、、、、、、、、 内联元素是不可以设置宽和高的。

常用的内联块状元素有：

、

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

如下代码：

p{color:red!important;}

p{color:green;}

三年级时，我还是一个胆小如鼠的小女孩。

这时p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式< 网页制作者样式< 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

什么是层布局模型？

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)：如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

2、相对定位(position: relative)：如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于

以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

3、固定定位(position: fixed)：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。

Relative与Absolute组合使用

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

相对参照元素进行定位

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{

width:200px;

height:200px;

position:relative;

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{

position:absolute;

top:20px;

left:30px;

}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。

具体应用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：margin:10px 20px 10px 20px;

可缩写为：margin:10px 20px;

3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：margin:10px 20px 30px;

注意：padding、border的缩写方法和margin是一致的。

颜色值缩写

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：

p{color:#000000;}

可以缩写为：

p{color: #000;}

例子2：

p{color: #336699;}

可以缩写为：

p{color: #369;}

（放大看会清晰）

长度值

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的font-size 值，如果元素的font-size 为14px ，那么1em = 14px；如果font-size 为18px，那么1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给font-size 设置单位为em时，此时计算的标准以p 的父元素的

font-size 为基础。如下代码：

html:

以这个例子为例。

css:

p{font-size:14px}

span{font-size:0.8em;}

结果span 中的字体“例子”字体大小就为11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设

置text-align:center来实现的。(父元素和子元素：如下面的html代码中，div 是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

html代码：

我想要在父容器中水平居中显示。

css代码：

水平居中设置-定宽块状元素

当被设置元素为块状元素时用text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width 为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置div 这个块状元素水平居中：

html代码：

我是定宽块状元素，哈哈，我要水平居中显示。

css代码：

也可以写成：

margin-left:auto;

margin-right:auto;

注意：元素的“上下margin” 是可以随意设置的。

水平居中总结-不定宽块状元素方法（一）

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1.加入table标签

2.设置display: inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素

的属性设置

3.设置position:relative和left:50%：利用相对定位的方式，将元素向左偏移50% ，

即达到居中的目的

这一小节我们来讲一下第一种方法：

为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个table 标签( 包括

、、

)。 第二步：为这个table 设置“左右margin 居中”（这个和定宽块状元素的方法一样）。 举例如下： html代码： 我是第一行文本 我是第二行文本 我是第三行文本 css代码： 水平居中总结-不定宽块状元素方法（二） 除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。 第二种方法：改变块级元素的display 为inline 类型（设置为行内元素显示），然后使用给父元素加text-align:center来实现子元素的居中效果。如下例子： html代码： 1 2 3 css代码： 这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的display 类型改为inline，变成了行内元素，所以少了一些功能，比如设定长度值。 水平居中总结-不定宽块状元素方法（三） 除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。 方法三：通过给父元素设置float，然后给父元素设置position:relative和left: 50%，子元素设置position:relative 和left: -50%来实现水平居中。 我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul 层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul 层的最左端（也是div层的平分线）对齐，从而实现li层的居中。 代码如下： 1 2 3 css代码： 这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。 垂直居中-父元素高度确定的单行文本 我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。 这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。 本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？ 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离)。 line-height与font-size的计算值之差，在CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。 这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。 如下代码： hi,imooc! css代码： 垂直居中-父元素高度确定的多行文本（方法一） 父元素高度确定的多行文本、图片等的竖直居中的方法有两种： 方法一：使用插入table (包括tbody、tr、td)标签，同时设置vertical-align：middle。 css 中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子： html代码： 看我是否可以居中。 css代码： table td{height:500px;background:#ccc} 因为td 标签默认情况下就默认设置了vertical-align 为middle，所以我们不需要显式地设置了。 垂直居中-父元素高度确定的多行文本（方法二） 除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。 在chrome、firefox 及IE8 以上的浏览器下可以设置块级元素的display 为table-cell（设置为表格单元显示），激活vertical-align 属性，但注意IE6、7 并不支持这个样式, 兼容性比较差。 html代码： 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 css代码： 这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。 隐性改变display类型 有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下2 个句之一： 1. position : absolute 2. float : left 或float:right 简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的width 和height 了，且默认宽度不占满父元素。 如下面的代码，小伙伴们都知道a 标签是行内元素，所以设置它的width 是没有效果的，但是设置为position:absolute 以后，就可以了。 进入课程请单击这里 css代码 HTML知识点总结 HTML知识点总结 第一章知识总结 1.HTML文档结构（括号里面的是注释） （头部部分） (可写可不写) （主体部分） （页面容） 1)标签中的属性有： bgcolor=颜色（背景颜色）background=图片的绝对路径或相对路径（背景图片） 2.标题标签 n取1~6（设置文字标题）： 1) 一级标题 2) 二级标题 3) 三级标题 4) 四级标题 5) 五级标题 6) 六级标题 3.标签（设置文字属性） 要设置的文字 4.特殊符号 5.行的控制相关标签 段落标签 (段落的对其方式) 换行标签 6.图片标签 (align是用于调整图片相对于周围文本的对其方式) 7.文字布局 1)水平线 2)有序列表的语法 （序号类型有：1、a、A、ⅰ、I） 填写信息 （必须用 将容包括起来） 填写信息 填写信息 …… 3)无序列表语法 （序号类型有：disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形)） 所写容 （必须用 将容包括起来） 4)预格式文本语法 《HTML基础试题》 《HTML基础试题》 一、单项选择题: 1、下面哪一个属性不就是文本的标签属性？( ) A.  B.size C.color D.face 2、当链接指向下列哪一种文件时,不打开该文件,而就是提供给浏览器下载。( ) A.ASP B.HTML C.ZIP D.CGI 3、关于文本水平对齐,源代码设置不正确的一项就是:( ) A.居中对齐: … B.居右对齐: … C.居左对齐: … D.两端对齐: … 4、下面哪一项就是换行符标签？( ) A. B. C. D. 5、下列哪一项就是在新窗口中打开网页文档。( ) A._self B._blank C._top D._parent 6、下面对JPEG格式描述不正确的一项就是。( ) A.照片、油画与一些细腻、讲求色彩浓淡的图片常采用JPEG格式 B.JPEG支持很高的压缩率,因此其图像的下载速度非常快 C.最高只能以256色显示的用户可能无法观瞧JPEG图像 D.采用JPEG格式对图片进行压缩后,还能再打开图片,然后对它重新整饰、编辑、压缩 7、常用的网页图像格式有____与_____( ) A、gif,tiff B.tiff,jpg C.gif,jpg D.bmp,png 8、下面说法错误的就是( ) A、CSS样式表可以将格式与结构分离 B.CSS样式表可以控制页面的布局 C、CSS样式表可以使许多网页同时更新 D.CSS样式表不能制作体积更小下载更快的网页 9、CSS样式表不可能实现( )功能。 A将格式与结构分离 B.一个CSS文件控制多个网页 C、控制图片的精确位置 D.兼容所有的浏览器 10、在HTML中,( )不就是链接的目标属性。 A、self B.new C.blank D.top 11、在网页设计中,( )就是所有页面中的重中之重,就是一个网站的灵魂所在。 A.标题栏 B.脚本页面 C、导航栏 D.页面内容 12、为了标识一个HTML文件应该使用的HTML标记就是( )。 A. B. C. D. 13、在客户端网页脚本语言中最为通用的就是( ) A、JavaScript B、VB C.Perl D、ASP 14、在HTML中,标记的属性:“Size”所能取的最大取值就是( ) A、6 B.7 C.8 D.9 15、下面不属于CSS插入形式的就是( ) A、索引式 B.内联式 C.嵌入式 D.外部式 16、如果站点服务器支持安全套接层(SSL),那么连接到安全站点上的所有URL开头就是( ) A.http:// B.https:// C.shttp:// D.SSL:// HTML知识点汇总 HTML知识点汇总 第一章HTML基础知识 1、HTML简介 HTML(Hypertext Markup Language)，超文本标记语言，HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language，标准通用标识语言)中的一个子集演变而来的。 2、HTML的标记组成 HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来，而且是成对出现的，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。如、 等 1)单标记：有些标记能完整的表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫 单标记。XHTML中要求单标记也必须闭合，即在标记“>”前添加斜杠。常见的单标记如 、 等。 2)双标记：双标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线， 语法形如：<标记>内容。例如：段落 3)XHTML要求所有标记均为小写，且所有标记属性必须添加双引号 4)标记对不能交叉 3、HTML基本结构 1) （必须放在「文头」区块内） 文头 （描述性资料，像是「主题」） 文体 （文件本体） 结构性定义（由浏览器控制的显示风格） 标题 （从1到6，有六层选择） 标题的对齐 区分 区分的对齐 引文区块 （通常会内缩） 强调 （通常会以斜体显示） 特别强调 （通常会以加粗显示） 引文 （通常会以斜体显示） 码 （显示原始码之用） 样本 键盘输入 变数 定义 （有些浏览器不提供） 地址 大字 小字 与外观相关的标签（作者自订的表现方式） 加粗 斜体 底线 （尚有些浏览器不提供） 删除线 （尚有些浏览器不提供） 下标 上标 打字机体 （用单空格字型显示） 预定格式 （保留文件中空格的大小） 预定格式的宽度 （以字元计算） 向中看齐 （文字与图片都可以） 闪耀 （有史以来最被嘲弄的标签） 字体大小 （从1到7） 改变字体大小 基本字体大小 （从1到7; 内定为3） 字体颜色 链结与图形 链接 HTML基础知识 HTML 学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML标记语言也不例外，同样需要遵从一定的规范。接下来将具体讲解HTML文档的基本格式。 HTML文档的基本格式主要包括文档类型声明、根标记、头部标记、主体标记，具体介绍如下： （1）标记 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML 或XHTML（可扩展超文本标记语言）标准规范，必需在开头处使用标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。 （2）标记 标记位于 标记之后，也称为根标记，用于告知浏览器其自身是一个HTML 文档， 标记标志着HTML文档的开始，标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。 在之后有一串代码“xmlns=""”用于声明XHTML统一的默认命名空间。 （3）标记 标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他位于文档头部的标记，例如 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。 将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm或者.html即可，然后再所在的目录下就可看到一个IE的图标，名字就是你所存的文件名称。 …… …… 这是声明HTML文件的语法格式。每一个HTML文件，都必须以开头，以结束…… …… 这是文件头声明的语法格式。在这之内的所有文字都属于文件的文件头，并不属于文件本体。 这是声明文件标题的语法格式。在这之中写下的所有内容，都将写在网页最上面的标题栏中。 …… …… 这是声明文件主体的语法格式。在者之间写下的内容都是文件的主体，也就是说将会被显示在客户区之中。 注意：几乎每一种HTML语言的语法都是以<>开头，以结束。在编辑HTML语言过程中，也可以使用注释。语法格式为：。就好像C语言中的/* …… …… */ 一样，中间的内容只是解释说明，并不被编译器所编译。 HTML语言的基本单位 1. 长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性，同时也可以用来定义这些对象在页面上的位置等属性，用来描述页面上可能遇到的各种长度。 长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例，说明这两种表示方法。 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。 在文本编译器中编译，改变网页的大小，就会看到这两者表示长度方法的不同。 HTML+CSS基础知识点 HTML+CSS笔记 1.学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。 （1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 （2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 （3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。 2.添加样式如：