将各个盒子进行定位
1、文档流flow定位
是一种默认方式,各个盒子从上到下,从左到右排列
元素分为三类,包括block、inline、inline-block类型
display:none——元素不被显示
block元素:
- 独占一行
- 元素的height、width、margin、padding都可设置
- 常见的block元素有<div>、<p>、<h1>......<h6>、<ol>、<ul>、<table>、<form>
- 将其他元素显示为block元素,如将链接a元素转化为block元素,从而使a元素具有块状元素特点,a{ display:block;}
inline元素:
- 不单独占用一行
- width、height不可设置
- width就是包含的文字或者图片的高度,不可改变
- 常见的inline元素有<span>、<a>
- 显示inline元素的方法——display:inline;
- inline元素之间有一个间距问题,可以inline类型转化为block类型等其他类型
inline-block类型:
- 同时具备inline元素、block元素的特点
- 不单独占用一行
- 元素的height、width、margin、padding都可设置
- 常见的inline-block元素——<img>
- 显示inline-block元素的方法——display:inline-block;
2、浮动float定位
让div实现横向多列排列,脱离文档流,使其动起来,采用float进行设定
float属性:
- left——左浮动
- right——右浮动
- none——不浮动
- 当设置浮动时,原有的位置会丢失,其他元素会占据这个位置
- 当三个盒子都向右浮动且宽度不够时,box3会下降在第二行与box1并列,或者被box1卡住(当box1的高度大于box2)
clear属性:
- both——清除左右两边的浮动
- left和right——只能清除一个方向的浮动
- none——默认值,只在需要移除已指定的清除值时才会用到
- 清除浮动并不是把浮动元素去掉而是清除方向上不会有浮动元素,如将两个盒子先设置右浮动然后用clear清除右浮动,这两个盒子会靠右垂直排列
- 侧栏向右浮动,并且短于主内容区域,页脚于是按浮动所要求的向上跳到了可能的空间,此时可以使用clear:both;使其另起一行
3、层layer定位
像图像软件中的图层一样可以对每个layer能够精确定位操作,用position属性(相对于谁定位)进行设定
通过top、right、bottom、left,z-index来设置相对于参照物的位置,z-index值大的在上面,值小在下面,逐层排列
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
position取值:
无论参照物是谁,坐标原点始终在参照物的左上角
- static——默认值,没有定位,元素出现在正常的流中,top、right、bottom、left,z-index无效
- fixed——固定定位,相对于浏览器窗口定位,不会随着浏览器窗口的滚动条而变化,总在视线里的元素,top、right、bottom、left,z-index有效
- relative——相对定位,相对于其直接父元素进行定位,定位为relative的元素会脱离正常文档流,但其在文档流中的原位置依然存在,top、right、bottom、left,z-index有效
- absolute——绝对定位,相对于static定位以外的第一个父元素,定位为absolute的元素会脱离正常文档流,但其在文档流中的原位置不再存在,其定位的层总是相对于其最近的定义为absolute或者relative的父层,而这个并不一定是其直接父层,top、right、bottom、left,z-index有效,对于absolute定位的层,如果父层中都为定义absolute或者relative,则其将相对定位对body进行定位
- relative+absolute通常叠加使用,父元素设置为relative属性,子元素设置为absolute属性,子元素的top、right、bottom、left,z-index会相对于父元素来进行偏移设置