淘先锋技术网

首页 1 2 3 4 5 6 7

CSS布局的三种机制

  1. 普通流(标准流)
  2. 浮动
  3. 定位

 
为什么使用定位?

  1. 我们需要一个压在所有元素之上且能自由控制、不影响被压元素的元素
  2. 有时也需要一个不随着鼠标滚动而滚动固定在屏幕上的盒子

 
定位详解

定位包含两部分:定位模式边偏移

边偏移

很简单,就是:top: 20pxleft: 30px这样的格式

定位模式(position)(重点)

总的来说,定位模式有:

定位模式
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed

静态定位(了解,用不到)

静态定位是默认定位方式,相当于none,即没有定位

相对定位

自恋” —— “相对”指的是相对自己原先的标准流位置

灵魂出窍” —— 原先的位置继续占有(没有脱标)

绝对定位

完全脱标:完全不占位置

★ ☆ ★

若父类(祖先)没有定位,则以浏览器为准定位

若父类(祖先)有定位(相对,绝对,固定),则根据父类(祖先)进行定位(一直向上找,直到找到有定位的祖先)

 
☀ 口诀:子绝父相

先看个例子,便于理解:
在这里插入图片描述
问题的关键在于那两个箭头:arr_left,arr_right
    ↓
两个arr是top盒子的子元素
    ↓
箭头要用绝对定位(absolute) —— 因为箭头要压在图片上方,且不能占位置(脱标)
top盒子要用相对定位(relative) —— 因为top不能脱标,否则down盒子会升上来,影响排版
    ↓
总结一下子绝父相的原因:父类需要占位置子类不能占位置
 

还有一个小问题,就是问什么两个箭头不用浮动呢?

answer浮动的元素压不住图片(img);另外,由于浮动元素仍然受padding的限制,而定位是相对于盒子真正的边界,所以可以完成更多的排版

 
固定定位

  1. 完全脱标(完全不占位置);
  2. 一直相对于浏览器可视窗口
  3. 父级完全没有关系

 
定位的扩展
 
绝对定位的盒子居中

绝对定位 / 固定定位的盒子不能通过margin左右auto水平居中

left: 50%;
margin-left: -100px; 	/*假设该元素width=200px,回退其一半即可:margin-left:-100px*/

 
堆叠顺序

  1. 默认为“后来者居上

  2. z-index可以调整盒子的堆叠顺序

  1. z-index可以理解为z轴的纵深
  2. 可以取正整数、负整数、0,且不带单位;数值越大,盒子越靠上
  3. z-index值相同,则“后来者居上”
  4. z-index只应用于定位相对绝对固定),对静态定位标准流浮动无效
     

改变定位的display属性

我们最常用的显示模式是行内块(inline-block) —— 一行多个;宽度默认内容宽度

那么有什么方式转换为行内块呢?

❶ 声明display: inline-block

浮动(float)默认转化为“行内块”(不是真正的行内块,因为是脱标的;下同)

绝对定位固定定位也是默认转化为“行内块

也就是说,一个行内的盒子,如果加了浮动固定定位绝对定位,那么就不用转换,直接放心地给它设置widthheight就行了
 

还有一个好处!

浮动元素,绝对定位元素不会触发外边距合并(塌陷)的问题

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

☀ 注

文章案例改编自《黑马程序员-web前端

&Lolisaikou