前端常见问题梳理 - css布局一

本篇整理了如下下个问题

  • position的值有哪些?
  • css有哪些垂直水平居中方式?
  • css选择器有哪些?
  • 选择器的优先级?

position的值有哪些?

整理自 position(五种属性,以及每个属性的特点)

  • relative:相对定位

    1:不影响元素本身特性(无论块元素还是内联元素,会保留其原本属性)

    2:不会使元素脱离文档流(元素原本位置会保留,即改变位置也不会占用新位置)

    3:没有定位偏移量对元素无影响(相对于元素自身原本位置进行偏移)

    4:提升层级。用z-index修改层级,z-index只对relative或absolute或fixed的元素有效

  • absolute:绝对定位

    1:使元素脱离文档流(在文档流中不再占位)

    2:使内联元素设置宽高时支持宽高(改变内联元素特性)

    3:使区块元素在未设置宽高时,由内容撑开(改变区块元素特性)

    4:相对于最近一个有定位对元素偏移(若父级没有定位,则逐层上找,直到document)

    5:相对定位一版配合绝对定位使用

    6:提升层级。

  • static:默认值

    默认布局,元素出现在正常流中。(忽略top/left/bottom/right/z-index声明)

  • sticky:粘性定位

    粘性定位基于用户滚动的位置

    它的行为类似于relative,而当页面滚动出目标区域时,表现向fixed,会固定在目标位置

  • inherit:继承父级
  • initial:设置为默认值

css有哪些垂直水平居中方式?

整理自 css垂直居中的11种方式

整理自 CSS垂直居中的8种方法

参考之后,整理几个可用性比较高的。

  • 1: 行内元素,父元素设置text-align: center; 和行高

        #parent{
          width: 100px;
          height: 100px;
          border: 1px solid red;
          text-align: center;
          line-height: 100px;
        }
        #child{
          width: 20px;
          height: 20px;
          background: #000;
        }
    
  • 2:块级元素,使用绝对定位和负外边距对块级元素进行垂直居中

    必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。

          
        #parent{
          background: blue;
          width: 600px;
          height: 300px;
          position: relative;
        }
        #child{
          background: green;
          width: 50px;
          height: 50px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -25px;
          margin-top: -25px;
        }
    
  • 3:块级元素,使用绝对定位和transform

    兼容到ie9

        #parent{
          background: blue;
          width: 600px;
          height: 300px;
          position: relative;
        }
        #child{
          background: green;
          width: 50px;
          height: 50px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
    
  • 4:块级元素,绝对定位结合margin:auto

        #parent{
          background: blue;
          width: 600px;
          height: 300px;
          position: relative;
        }
        #child{
          background: green;
          width: 50px;
          height: 50px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
    
  • 5:通过flex

    不区分元素类型,但是兼容性是从ie10开始的。

    #parent{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #child{
      width: 20px;
      height: 20px;
      background: #000;
    }
    

css选择器有哪些?

我觉得这个问题太碎,不可能,详细选择器可以看w3c的页面

整理自 CSS 选择器参考手册

整理自 CSS的四种基本选择器和四种高级选择器

整理自 CSS选择器有哪些?

这里捡重点整理一下常用的

基本选择器

  • ID选择器:#id
  • 类选择器:.class
  • 元素选择器:span
  • 后代选择器:用空格隔开
  • 交集选择器:用.隔开
  • 并集选择器:用,隔开

高级选择器

  • 子选择器:用 >
  • 兄弟选择器:.first~p
  • 相邻选择器:.first+p
  • 全局选择器:*
  • 属性选择器:[type=text]
  • 伪类选择器:用:

    li:first-child{},li:not(:first-child)

选择器的优先级?

整理自 CSS - 选择器优先级介绍

!important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

同一级别中后写的会覆盖先写的样式

CSS属性选择器和伪类选择器的优先级?

如上所述,类选择器,属性选择器,伪类选择器 属于统一权重

随机浏览