前端入门视频笔记 CSS3（六）定位 P221-249

CSS（六）

 

01~24-定位

按照定位的方式摆放盒子，可以让盒子在某个盒子上自由移动或者固定在屏幕中某个位置，并且可以压住其他盒子；

定位 = 定位模式（方式）+ 边偏移（位置）

 

定位模式：position属性

属性值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移：

属性	描述
top	顶端偏移量，即元素相对于其父元素上边线的距离；（top: 80px;）
bottom	底部偏移量，即元素相对于其父元素下边线的距离；
left	左侧偏移量，即元素相对于其父元素左边线的距离；
right	右侧偏移量，即元素相对于其父元素右边线的距离。

 

（1）static静态定位（很少用）

         元素的默认定位方式，即无定位，按照标准流的方式，没有边偏移 。

 

（2）relative相对定位

         元素的移动是相对于自身原来的位置（参考点）；

         元素移动后，之前标准流的位置还是保留，不影响周围的盒子（不脱标）。

 

（3）absolute绝对定位

         元素的移动是相对于其祖先元素的位置；

         不占有原先的位置（脱标）；

         若元素没有祖先元素或者祖先元素没有定位，就以浏览器为参照来定位；

         若有多个祖先元素，则以最近一级有定位的祖先元素为参照来移动。

 

（4）fixed固定定位

         使元素固定在浏览器可视窗口（参考点）的某一位置，页面滚动时元素位置也不会改变；

         不占有原先的位置（特殊的绝对定位）；

 

（5）sticky粘性定位（兼容性差，不常用）

         相对定位（以浏览器可视窗口为参照）与固定定位（占有原先的位置）的结合；

         必须添加top、bottom、left或right其中一个才有效，是指相对浏览器窗口多少距离时，元素就变成固定定位。

 

08-子绝父相

子级元素使用绝对定位，不占位置，可以放在父级元素中的任意一个地方；

父级就用相对定位，占有标准流的位置，并限制子级元素在范它的围内显示。

 

11/15-定位的小技巧

将元素固定在版心右侧：

         先让固定定位的盒子移动到浏览器的中心（也是版心的中心），left: 50%;

         再用外边距，让它向右移动版心宽度的一半的距离，margin-left: 版心宽的一半px;

绝对定位盒子的（水平）居中：

         先让绝对定位的盒子向右移动父盒子宽度的一半，left: 50%;

         再用外边距，让它向左移动（负值）自身宽度的一半的距离，margin-left: -自身宽的一半px;

         （垂直居中：top: 50%; margin-top: -自身高度的一半px;）

 

14-定位的叠放次序

元素使用定位时，用 z-index属性来规定元素叠放的前后顺序，

属性值为正整数，数值越大，元素越靠上；

如果属性值相同，就按照书写顺序，后写的靠上。

 

16/17-定位的特性（与浮动的异同点）

添加绝对定位或固定定位后，行内元素就可以直接设置高度和宽度，块元素的默认大小就是内容的大小；

脱标的盒子不会触发外边距合并（塌陷）的问题，如浮动、绝对定位、固定定位的元素。

 

浮动元素会压住下面的标准流盒子，但不会压住下面标准流盒子中的文字（文字环绕效果）；

而脱标的定位（绝对、固定）会压住下面标准流盒子的所有内容。

 

25~27-元素的显示与隐藏（重要）

（1）display属性

属性值	描述
block	显示元素（除了转换为块元素）；
none	隐藏元素，且不再占位置。

 

（2）visibility属性

属性值	描述
visible	显示元素；
hidden	隐藏元素，但继续占位置。

 

（3）overflow属性

属性值	描述
visible	默认，显示元素中所有内容。
hidden	隐藏超出元素尺寸（溢出）的内容；
scroll	总是添加滚动条；
auto	内容溢出则添加滚动条，不溢出则不添加。

 

9.13