学习HTML+CSS2中的重点与难点（个人总结）

一、常见的样式表的引入方法

1、行间样式表（只对当前元素有效），使用方法：<div style="样式名1：值1；样式名2：值2；"></div>（此方法在修改大量元素样式时需要一一修改，所以很少使用）

2、内部样式表（对当前页面有效），使用方法：放在style标签（通常放在head标签中）内，<style>......</style>（适量使用）

3、外部样式表（对引用它的所有页面都有效），使用方法：将所有样式放在一个style.css文件中（文件名可以自己起），通过<link href="style.css" rel="stylesheet"/>引用（推荐使用，但文件不要太多，会使请求次数太多）

 Tips:其中使用内部样表和外部样式表需要使用选择器选取页面元素。

二、四个基本选择器

1、*（通配选择器）：获取范围内所有的子元素。

2、标签名选择器（类型选择器）：例如div、p、h1，用来获取范围内所有该元素。

3、.classname（类名选择器）：获取范围内具有classname类名的所有元素。

4、#idname（id选择器）：获取范围内具有idname的id值得所有元素。

四个选择器的优先级：id选择器 > 类名选择器 > 标签名选择器 > 通配选择器 （ 行间样式 > id选择器 ）

 Tips：以上四种选择器可以配合使用，如div .classname（中间用空格分隔）表示所有div元素中类名为classname的元素。

div,.classname（中间用逗号分隔）表示所有div元素和类名为classname的元素。

     如果多个多个选择器优先级相同，则后面覆盖前面。

三、表格

定义表格（<table>）：

1、表格标题：<caption> ； 2、表格表头：<thead> ; 3、表格正文：<tbody> ; 4、表格页脚：<tfoot> ; 5、表头单元格：<th> ; 6、表格行：<tr> ; 7、表格单元格：<td> ;

表格常用属性：

1、表格对齐方式：align：left/right/center； 2、表格边框宽度：border ； 3、表格边框颜色：bordercolor ；4、表格背景色：bgcolor ；5、表格背景图：background ； 6、单元格间隙：cellspacing ； 7、表格内边距：cellpadding ； 8、横向合并单元格：collspan ; 9、纵向合并单元格：rowspan ; 10、合并相邻单元格边框 （table属性）：border-collapse：collapse；

四、区块元素与内联元素

区块元素：每个元素独占一行，支持所有样式，不设置宽时默认等于父元素宽度，换行符不会被解析。（div、ul、ol、dl、li、p、h1~h6、table、form、pre等元素）

内联元素：在一行有空间时，多个元素在同一行显示，不支持宽高样式，在使用margin，padding样式时会出现问题，宽度由内容撑开，换行符会被解析。（span、a、b、strong、em、i、input、img（内联块）等元素）

五、盒模型

组成：content（内容）、padding（内填充）、border（边框）、margin（外边距）

box-sizing:border-box（宽度为：content+左右padding+左右margin）/content-box（宽度为：content的宽度）

注意：①padding与margin传入一个值代表四个方向都为该值。传入两个值代表上下为第一个值、左右为第二个值。传入三个值代表上为第一个值、左右为第二个、下为第三个值。传入四个值代表上、右、下、左四个方向的值。

②上下的margin会叠压，保留最大值。

③父子级元素包含的时候子级的margin-top会传递给父级（解决方法：用内填充替代外边距）。

④因此能用内填充尽量不用外边距。

六、浮动问题（之前总结过的）

七、清除样式

清除li的默认样式：list-style:none;

清除a的默认样式（lvha顺序不能改变）： a{text-decoration:none;color:#000;border:0;}

                                                         a:link{text-decoration:none;color:#000;}

                                                         a:visited{text-decoration:none;color:#000;}

                                                         a:active{text-decoration:none;color:#000;}

八、定位

相对定位（relative）：不会影响元素本身特性；不会使元素脱离文档流；没有定位偏移量时对元素没有影响；用z-indxe可提升层级。

绝对定位（absolute）：使元素完全脱离文档流；使内联元素在设置宽高时支持宽高；使区块元素在未设置宽高时由内容撑开；相对于一个有定位的父元素偏移；一般配合相对定位使用；可用z-indxe可提升层级。

固定定位（fixed）：除了相对于可视区定位外，与绝对定位相同；ie6及更低版本不兼容。

用定位做垂直、水平居中和绝对居中：

1、当子元素比父元素小时，用margin:0 auto可以做水平居中；

2、用margin-left和left定位可以做水平居中，用margin-top和top定位可以做垂直居中，但绝对定位和固定定位会使元素脱离文档流，需要注意。

3、用绝对定位或固定定位配合margin:auto及四个方向偏移值为0可以做绝对居中（适用于子元素比父元素小，且知道宽高）。

九、锚点

a标签除了用做页面跳转外还可以做锚点，可以将a的href属性链接到另一个a的name属性或者任何元素的id属性在做锚点。

举例：

可以在浏览器中看到如下效果：

在点击1、2、3时，就会跳到三个div起始的地方。

十、表单

表单（form）两种常用属性：method和action；服务器处理数据的两种方法：POST和GET。

表单元素（input）：常用属性有name、type、value、placeholder、checked、disabled/readonly；input专用伪类选择器：focus；input可以再鼠标移入时将鼠标变为其他形状（在hover时改变cursor的样式）

类型（type）：输入类：text—文本框、password—密码；

                     选择类：radio—单选、checkbox—复选；

                     按钮类：submit/image—提交/图片提交、reset—重置、button—按钮；

                     特殊类：file—上传；