CSS-浮动与定位

系列文章目录

一、CSS浮动

1. 浮动的概念

• HTML页面的标准文档流：

  从上到下，从左到右，遇到块级元素换行。

• 浮动元素：

  浮动元素则是脱离了文档流，“漂浮”在页面之上、父元素（默认为body标签）的边框之内。

  当一个元素成为浮动元素，就会空出原来在文档流中的位置，后续的元素会自动顶替它的位置。

  浮动元素本身多大就占多大空间，没有块级元素的概念。

• 实例：

  元素A设置为向左浮动，元素C顶替它的位置，然后被遮盖了一部分。

  

  PS：浏览器在遇到文本内容被遮挡的情况时，会想方设法的将内容展示出来。

  两个元素都向右浮动，元素A先浮动，元素C后浮动。当C碰到A就停止浮动，紧贴在A左边。

  

  向左浮动也是类似的道理。

2. 设置浮动元素

选择器 {
    float: 方向;
}

• 方向可以写：

​ left：向左浮动。

right ：向右浮动。

none ：默认值，不浮动。

inherit：从父元素继承float属性。

3. 父标签的塌陷问题及解决方法

• 父标签的塌陷问题：

  父元素（图中的黑框）没有设置尺寸，全靠子元素（图中的元素A）“撑开”。当子元素浮动后，脱离文档流，就会导致父元素塌陷。

• 解决方法：

  事先写好以下代码，之后在要解决塌陷问题的标签上，添加calss=clearfix属性即可。

  .clearfix:after {
      content: '';
      display: block;
      clear: both;
  }
  

二、溢出属性

• 溢出问题：

  当某个元素内容很多，而尺寸不够时，就会溢出。如，下图中的元素，内容溢出了边框。

• 溢出属性：

  选择器 {
      overflow: 值;
  }
  

  可用的值：

  • hidden - 直接隐藏溢出部分。

  • scroll - 溢出内容不会在元素外显示，而是在元素内滚动显示，类似窗口。

    

  • auto - 与 scroll 类似，但仅在必要时添加滚动条。

三、CSS定位

1. 定位方法

• 静态定位：

  所有的标签默认都是固定的，无法改变位置。默认属性值为：position: static;。

  如果需要修改位置，就需要先修改position属性。且修改完该属性后，无论是否修改标签的位置，该标签都会被视为定位过的标签。

• 相对定位：

  相对于标签原来的位置进行移动。

  属性值为：position: relative;。

• 绝对定位：

  相对于已经定位过的父标签进行移动。如果父标签没有进行过定位，就以body标签为参照进行移动。

  属性值为：position: absolute;。

• 固定定位：

  相对于浏览器窗口，固定在某个位置。

  属性值为：position: fixed;。

2. 修改位置

设置完定位方法，就可以修改位置了：

选择器 {
    top: 偏移量;
    bottom: 偏移量;
    left: 偏移量;
    right: 偏移量;
}

比如，bottom: 30px;是指距离参照元素（原来的位置、父标签、浏览器等）底部30px。

3. 是否脱离文档流

绝对定位、固定定位是脱离文档流的；

相对定位、静态定位则不脱离。

四、z-index属性

• 作用：

  html页面在逻辑上，其实是三维的。除了长、宽方向的两个轴，还有一个z轴，是朝向用户的一个轴。

  z-index用来设置元素的堆叠顺序，也就是元素之间，谁在谁上面的问题。

• 语法：

  选择器 {
      z-index: 数值。
  }
  

  z-index的值可以是负值，且仅能在定位元素上起作用！

  数值更大的元素，总是会处于数值较小的元素的上面。

五、透明度

使用opacity属性可以设置元素的透明度。与rgba不同的是：rgba只能修改颜色的透明度，而opacity还可以修改字体的透明度。

选择器 {
    opacity: 值;
}

该属性的取值范围为[0, 1]，0表示完全透明，1表示不透明。