一,基本位置属性
display: block;
块级标签:
1、独占一行
2、不设置宽度的时候默认占满父级宽度
3、居中:margin:auto;
display: inline-block;
内联标签:
1、同行排列
2、不设置尺寸时,靠内容撑开
3、文字居中:父级设置:text-align:center;
display: inline;
1、同行排列
2、尺寸设置无效
默认文本流水布局
1、移动盒子方法:通过margin方法或者设置父级弹性盒子
2、所有盒子都在一层,一个移动了,另一个就跟着移动
3、应用场景:常见页面中90%布局都是默认文本布局
二、定位布局
position :static
静态定位/常规定位/自然定位
作用:使元素定位于常规流/自然流中
特点:
- 忽视top、bottom、left、right、z-index,是这些关键字作用失效
- 如果两个元素都设置了外边距,最终的外边距取决于外边距大的
- 在具有固定width和height值时的元素,如果把左右边距设置成auto,则左右边距会自动扩大占满剩余宽度,实现这个块水平居中的效果
position : relative 相对定位
盒子特性与static完全一致,所有盒子都在一层
移动方式:通过left, top, bottom right 四个值修改盒子位置
left > 0 向右移动
left < 0 向左移动
right > 0 向左移动
right < 0 向右移动
top > 0 向下
top < 0 向上
bottom > 0向上
bottom < 0 向下
通过left,right,bottom,top修改盒子位置时,对页面布局没有任何影响
应用:
布局完成后,盒子的位置微调整
定位父级标识
positon:fixed 固定定位
1、possition:fixed 盒子不在具有默认文本流盒子的布局特性,变成一个支持所有CSS样式设置
并且不具备任何样式的普通盒子。脱离原始文本流,生成一个独立位置图层,对其它盒子位置没有
任何影响。
2、改变位置方式:通过定位属性left、top、right、bottom
left:盒子的左边到浏览器左边之间的距离
right:盒子的右边到浏览器右边之间的距离
top:盒子的上边到浏览器上边之间的距离
bottom:盒子的下边到浏览器下边之间的距离
水平方向:
width设置了:一次只能设置一个定位属性left,right。如果同时设置,left生效
width没有设置:left,right将同时生效,将盒子宽度拉开或者压缩
htight设置了:一次只能设置一个定位属性top、bottom。如果同时设置,top生效
height没有设置:top,bottom将同时生效,将盒子高度拉开或者压缩
3、移动过程中,每个fixed盒子都是一个独立的图层,如果位置重叠会出现覆盖的情况
通过z-index属性设置,可以来明确盒子的图层等级,值越大,图层等级越高,越能
覆盖在其它盒子之上
4、应用场景:
只要不随浏览器内容滚动而滚动,固定停留在浏览器视窗范围内的盒子,都可以使 用 fixed定位,一般使用时,只要给固定内容的父级添加fixed即可,内部布局依然使默 认文本流布局法,需要固定定位标签结果可以卸载文档的任意位置,不影响渲染结果。
position : absolute 绝对定位
1、盒子特性布局特性: 生成自己的独立图层,不在占有默认文本界面位置,不再具备默认文本流盒子特性,变成一个支持所有CSS样式的,普通盒子
2、通过left,top,right,bottom四个属性修改盒子位置
left : 盒子的左边,到其“定位盒子”左边的距离
right: 盒子的右边,到其“定位盒子”右边的距离
top : 盒子的上边,到其“定位盒子”上边的距离
bottom : 盒子的下边,到其"定位盒子"下边的距离
定位父级:
1、位置属性不是static, 一般在没有位置属性设置的前提下,主动设置成relative
2、当有多个父级,位置属性都不是static时,在文档书写结构与定位盒子距离最近的标签为定位父级
left,top,bottom,right, 在不设置宽高的时候,默认都会生效,将盒子尺寸拉开,或者压缩。
如果设置width,height,那么 left, top优先生效
3、绝对定位的盒子,移动过程中,由于各自的图层互相独立,因此在移动时会出现区域互相覆盖叠加的情况
通过z-index可以设置图层等级,z-index越大,图层等级越高,越能盖在其他盒子之上
4、应用:
再需要实现,图层叠加的场景下,并且叠加关系,要能够固定,并随着页面一起滚动。那么盖再其他元素上的标签
需要使用绝对定位
4-1 : 图片之上叠盒子
4-2: 与hover交互相互配合,隐藏显示一个新盒子时,需要绝对定位
4-3: 游戏动画场景的元素需要使用 绝对定位