最适合初学者的div+css知识点

Div+css知识总结

1、主流浏览器有哪些？分别是哪个公司产生？（重点）

IE（美国微软）、Firefox（谋智）、opera（挪威欧朋）、chrome（谷歌）、safari（苹果）

2、xhtml规范（7条）

（1）使用小写字母写所有的标签和属性；

（2）给所有属性值加双引号，且属性与属性之间要有空格；

（3）所有的属性都需要值，属性和属性值相同的必须写全，不能只写属性。

关闭所有标签，单标签加空格和斜杠，双标签必须有结束标签；如
是错误的必须

（4）不要在注释中使用----；

（5）将所有的特殊符号用字符实体表示。如空格用 表示；

（6）强制使用的xhtml元素。必须进行文档说明，必须存在html head body 元素，title元素必须位于在head元素中。

3、doctype文档类型声明

1. 声明意义：文档类型的声明，告诉浏览器，使用哪种规范来解释这个文档中的代码。

2. 三种声明基本类型：

①　严格型：strict

②　过渡型：transitional

③　框架型：frameset

4、前端分为三层

结构（xhtml）、表现（css）、行为（javascript）

5、对div的理解以及css（了解）

1. Div的理解：因为div标签在xhtml中相当于一个万能标签，我们主要使用它进行布局，其重要性相当于html中的table。所以我们把xhtml+css称为div+css。

2. Css(Cascading Style Sheets)被译为层叠样式表或级联样式表

3. HTML(Hyper text markup language) 超文本标记语言

4. XHTML可扩展超文本标记语言

6、Div+css的优势（重点）：

①　表现和内容相分离

②　减少代码冗余

③　提高搜索引擎对网页的索引效率

④　代码简洁，提高页面浏览速度

⑤　易于维护和改版

7、css控制页面的三种方式（重点）

①　行内样式：即在标记的style属性中设定css样式。

②　内部样式（嵌入式）：则将页面中各种元素的设置集中写在和之间。

③　外部样式（导入式与链接式）

链接式：

导入式：<style type=”text/css”>@import”a.css”

或

<style type=”text/css”>@import url(a.css)</style>

8、导入式和链接式的区别：

①　老祖宗的区别（语法不同），链接式使用html标记引入外部css文件；导入式则是使用css的规则引入外部css文件。Link是xhtml标记，导入式是css标记。

②　加载顺序不同，Link是先加载css样式再加载结构；导入式是先加载结构后加载样式。

③　使用DOM控制样式时的差别,如果希望通过js动态来决定引入哪个css文件，则必须使用链接式，如网页换肤效果。

④　兼容性的差别：由于 @import 是 CSS2.1 提出的所以老的浏览器不支持；@import 只有在 IE5 以上的才能识别，而 Link 标签无此问题。

⑤　如果仅需要引入一个css文件，则使用链接式；如果需要引入多个css文件，则首先用链接方式引入一个"目录.css"文件，这个"目录.css"文件中在使用导入式引入其它css文件。

9、三种样式的优先级：

①　行内样式的优先级最高

②　内部样式和外部样式的优先级取决于它们在head标签中位置的顺序，谁在下面，显示谁。

10、选择器（并进行相应举例）

1. 基本选择器：ID选择器、类别选择器、标记选择器

基本选择器优先级：ID选择器>类别选择器>标记选择器

2. 复合选择器：指定标签选择器、群组选择器、派生选择器、通配选择器、属性选择器、父子选择器

11、锚伪类选择器

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

顺序为：LVHA（爱恨法则）

12、css字体、文本属性、列表、表格、背景

字体：

①　文字字体：font-family

②　字体尺寸：font-size

③　字体颜色：color

④　字体粗细：font-weight: bold

⑤　字体风格：font-style:italic | oblique

⑥　字体复合属性：font: bold italic 14px/150% “宋体”;（注：顺序书写一定要正确）

文本：

①　文本装饰：text-decoration：none/underline/line-through

②　设置行高（垂直居中）：line-height:31px

③　文字间距与单词间距

a. 文字间距：letter-spacing

b. 单词间距：word-spacing

④　水平对齐方式：text-align:center/left/right

⑤　首行缩进：text-indent:2em

Css列表

①　列表样式简写:list-style:none

Css表格

①　去掉单元格缝隙：table{ border-collapse:collapse}

②　定义表格标题：

③　定义表格的表头：

④　定义表格的行：

⑤　定义表格的列（单元）：

⑥　定义表格的页眉：

⑦　定义表格的主体：

⑧　定义表格的页脚：

Css背景属性（重点）

①　填充背景颜色：background-color:#f00

②　填充背景图片：background-image:url(images/2.JPG);

③　背景图片重复（铺盖）background-repeat:no-repeat;

v repeat：平铺整个浏览器（默认）

v repeat-x:水平铺盖

v repeat-y:垂直铺盖

④　背景图片定位：background-position:left top；

⑤　背景关联：background-attachment:fixed

v scroll:默认值，背景会随文档滚动

v fixed:背景不会随文档滚动

⑥　背景属性缩写：background:#f00 url(images/2.JPG) 50% 50% fixed no-repeat

13、盒模型

1. 盒模型概念：

盒模型概念：网页中的任何一个模块跟现实生活中的箱子比较类似，都可以看作为盒模型…(意思对即可）

2. 盒子：

v 外边距：盒子与盒子之间（margin）

v 内边距：盒子与盒子内容之间（padding）

v 盒子边框：（border）

v 内容：element

2）盒子的宽度的计算（重点）：

v 总width=width值+左右padding值+左右border值

v 若没有宽度和高度时，盒子的宽度为父容器width（或内容宽度）的100%

3）块级元素与行内元素的区别和转换（重点）

①　块级元素（div,h1-h6,p,ul,dl,dd,form,table）

②　行内元素[也叫内联元素]（strong，em,span,b,i,a,img,input,iabel）

区别：

v 块级元素独占一行，而内联元素会和其它的内联元素占一行。

v 块级元素可规定宽度和高度；内联元素会随自身的内容自动变化。

v 块级可设置margin值和padding值，而内联元素左右正常，上下不正常。

v 网页布局时，块级元素可以包含块级元素和内联元素，内联元素只能包含内联元素和文本。

相互转换：

v 块级转为行内：display:inline

v 行内转为块级：display:block或float:left

默认：display:none(不占位置)

14、浮动

1）float：left（左）/right（右）/none（默认)

2）清除浮动：

若导致父容器不能自动扩高：内部清除浮动或overflow:auto|hidden或加height

若对浮动元素后面元素造成影响：clear:both

15、定位

1）相对定位：position：relative

2）绝对定位：position：absolute

3）空间位置：z-index

问题：概述相对定位和绝对定位的概念（谈一下对定位的理解，意思对即可）。

相对定位 position:relative 相对于元素当前位置进行移动（会偏离某个位置），仍保持原有相撞，原有位置保留

绝对定位position:absolute 相对于最近已定位的祖先元素进行定位，若没有已定位的祖先元素则相对于body，原有位置不保留。

16、表单(action为提交目标，method为传值方式分为get和post)

①　单行文本框：text

②　密码框：password

③　单选按钮：radio 默认选中checked=”checked”

④　复选框：checkbox

⑤　多行文本框：textarea

⑥　下拉菜单：select 默认选中selected=”selected”

⑦　普通按钮：button

⑧　提交按钮：submit

⑨　重置按钮：reset

⑩　标签说明：label

例如：

<label for='usr'>用户名：</label><input type='text' id='usr' />