学习HTML总结

一、元素分类

块级元素

特点：

1、继承父元素的长宽100%；

2、每个块级元素独占一行；

3、行高padding和margin可设置；

4、块级元素中可以包含块级元素和行内元素

常见的块级元素：

1、<div>块级容器

2、ul li 无序列表 ol li 有序列表

3、<form>表单

4、<p>段落

5、<table>表格

6、<h1>~<h6>标题

内联（行内）元素

特点：

1、宽高不可设置，行高， margin-top和margin-bottom不可设置；

2、和其他元素在一行，可改变为块级元素（dispaly:block）；

3、行内元素只能行内元素，不能包含块级元素；

常见的行内元素：

 

1、<a>标签可定义锚

2、<span>标签

3、<strong>加粗字体

4、<label>标签为 input 元素定义标注（标记）

 

行内块级元素

特点：

1、宽高、行高padding、margin-top和margin-bottom可设置；

2、和其他元素在一行

常见行内块级元素：

1、<img>向网页中嵌入一幅图像

2、<input>输入框

块级元素和内联元素的转换

1、设置display：block/inline-block

display：block是将元素设置为块级元素；display：inline是将元素设置为行内元素；

display:inline-block将对象呈现为inline对象，但是对象的内容作为block对象呈现。行内块元素，让这个元素显示在同一行不换行，但是又可以控制高度和宽度。

2、设置元素浮动

3、设置元素的position：relative/absolute/fixed

二、定位

定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位）。

固定定位：fixed，不随网页的变化而变化，相对于浏览器窗口来定位，脱离了文档流。

z-index 值越大，在最上面显示。

相对定位

相对定位：relative，相对自身（本元素原始位置进行定位）偏移，保留原来的空间，不脱离文档流，提升层级。

相对定位（div与div之间的关系）的例子：

在body里面设置两个盒子div1 和 div2 ，两个盒子都给相对定位：position:relative;，那么div2 就会相对于 div1 排版，排在div1的下面，如果div2 给了一个浮动 float：left，那么div2 就会和div1并排。

在上面的基础上，div1 和 div2 的里面都添加一个子盒子 ，div1 里面有一个 div3，div2里面有一个 div4，相对应地 div3 和 div4 也给了相对定位的话 ，div3 就会相对 div1 这个父类来相对定位，div4 就会相对 div2 这个父类来相对定位。

如果div1里同时拥有 一个 div3 和 一个 div4 ，div3 和 div4 就会在 div1这个父类里面进行相对定位，与 div2没有直接的影响。

绝对定位

绝对定位：absolute，相对于最近祖先元素进行偏移，兄弟元素会重叠，脱离文档流，提升层级.如果没有父元素，位置是相对于body来进行的。

总结：

绝对定位会寻找一个距离自己最近的父类 ，并且这个父类进行了定位，那么这个盒子就会找这个已经有了定位的父类来定位。

绝对定位（div与div之间的关系）的例子：

body标签里面，定义盒子 div1，div1 包含 div2 ，div2 包含 div3 。

情况1：div1、div2 盒子都设置了相对定位relative ，div3 设置了绝对定位absolute。

分析：body、div1、div2 都是 div3 的父类，而距离div3最近的父类是div2，所以div3 就会在 div2 里面进行绝对定位。

情况2：div1设置了 相对定位 relative，div2没有设置相对定位relative，div3 设置了绝对定位absolute。

分析：body、div1、div2 都是 div3 的父类，距离div3最近的父类是div2，但是div2 没有设置相对定位，所以就继续找有相对定位的父类，div1 是 div3 的父类 ，div1进行了相对定位，是div3最近的一个父类，div3就会在 div1 里面进行绝对定位。

 

总结：

1.position：relative;不会脱离文档流

2.position：absolute|fixed；脱离文档流

3.absolute是相对于父级非static进行定位

4.fixed始终是相对于浏览器窗口进行定位

z-index

z-index：当元素重叠时使用

 

z-index只能在position属性值为relative或absolute或fixed的元素上有效。

z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序，值大的元素发生重叠时会在值小的元素上面。

当z-index值相同时，情况和都不设置index值一样，后者覆盖前者。

例:1：

即son1（蓝色）和son2（黄色）是parent的两个子元素，效果图如下：

例2：在son1（蓝色）中加入z-index，son2（黄色）的index值是小于1。可以发现效果如下：

如果给son2也加上z-index:1，结果得到黄色(son2)就在上面了。（因为一旦z-index值相等，情况就和都不设置index值一样了）

例3：在son2（黄色）中加入z-index:5;可以发现效果如下：

例4：在父元素添加z-index:10;在son1和son2添加z-index:5; 这样理论上父元素就会在上面（黄色覆盖蓝色和黄色）；结果如下：

结果没有变!!!!!  这就说明父元素和子元素不能做z-index的比较！！！但真的是这样吗？看下一个例子：

 

例5：把两个子元素的z-index值同时设置为-5；父元素不设置z-index属性。结果如下：

成功！！说明在父元素和子元素之间还是可以作比较的！！！只是需要我们把子元素的z-index值设为负数。

 

例6：我们在例5的基础上再给父元素添加一个z-index:10，讲道理~应该也可以得到和例5相同的结果吧！！

然而.... 看来我们不能设置父元素的z-index值，否则就不能出现我们想要的效果。下面再看一个有趣的例子!

例7：我们根据例6的经验不设置父元素的值，现在设置son1(蓝色)的z-index为5，son2的z-index为-5，看下面的结果

即son1在最上面，父元素在中间，son2在最下面。

 

例8：代码如下：

效果如下：

虽然parent1和parent2分别是son1和son2的父元素，按照我们之前的理解，父元素是不可添加z-index值的，否则会导致错误。但是这里parent1和parent2相对于body又是子元素，他俩是同级的，所以就可以进行比较了。且此时parent1的子元素son1（蓝色）在上。

例9： 如果我们在例7的基础上，把parent2的z-index值设为20，就会发现如下效果：