一、元素分类
块级元素
特点:
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,就会发现如下效果: