2017-02-23 CSS 学习笔记

定位流

• 定位流分类

• 相对定位

• 绝对定位

• 固定定位

• 静态定位

• 什么是相对定位
  相对定位就是相对于自己以前在标准中的位置来移动

• 相对定位注意点

• 相对定位是不脱离标准流的，会继续在标准流中占用一份空间

• 在相对定位中同一个方向上的定位属性只能使用一个

• 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素

• 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置 margin/padding 等属性的时候会影响标准流的布局

• 相对定位应用场景

• 用于对元素进行微调

• 配合后面学习的绝对定位来使用

绝对定位

• 什么是绝对定位
  绝对定位就是相对于 body 来定位的
• 绝对定位注意点
• 绝对定位的元素是脱离标准流的
• 绝对定位的元素是不区分块级元素/行内元素/行内块级元素的

绝对定位的参考点

• 规律

• 默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以 body 作为参考点

• 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的哪个祖先元素作为参考点

• 只要是这个绝对定位元素的祖先元素都可以

• 指的定位流是值绝对定位/相对定位/固定定位

• 定位流中只有静态定位不行

• 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的哪个定位流的祖先元素为参考点

绝对定位注意点

• 如果一个绝对定位的元素是以 Body 作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点

• 一个绝对定位的袁术会忽略祖先元素的 padding

绝对定位-子绝父相

相对定位的弊端：
相对定位不会脱离标准流，会继续在标准流中占用一份空间，所以不利于界面布局

绝对定位弊端：
默认情况下绝对定位的元素会以 body 作为参考点，所以会随着浏览器的宽度高度的变化而变化

子绝父相
子元素用绝对定位，父元素用相对定位

绝对定位-水平居中

如何让绝对定位的元素水平居中
只需要设置绝对定位元素的 left:50%; 然后再设置绝对定位元素的 margin-left: - 元素宽度的一半 px;