【CSS】关于CSS的布局定位（基础）

一、position定位

01.定位模式+定位偏移

• 定位模式：static、absolute、relative、fixed
• 定位偏移：top、bottom、left、ri5ght

---

02.定位分为哪几类？

（1）静态定位——static（默认值）

（2）相对定位——relative

• 相对原来位置定位

  • 以元素自身在文档流中的原来位置进行偏移

• 保留原来位置

  • 元素相对定位后，元素原来的位置仍然存在于文档流中

（3）绝对定位——absolute

• 相对祖先元素定位

  • 从父元素开始，向上级找到最近的一个，已经定位的（不是static定位），祖先元素，进行偏移，一直到浏览器

• 脱离文档流

  • 不占有原来位置

（4）固定定位——fixed

• 【如何定位？】

  • 以浏览器的可视窗口为基准进行定位偏移

  • 跟父元素没有任何关系

  • 不随滚动条滚动

  • 脱离文档流，不占有原来位置

  • 一种特殊的绝对定位

• 如何固定在版心（主体内容区域）右侧位置

  • 1.先偏移设置浏览器宽度的一半：left:50%

  • 2.再利用【margin】偏移版心宽度的一半：margin-left:100px

（5）粘性定位——sticky

​ 1.具有相对定位和绝对定位的混合特性

​ 2.以浏览器的可视窗口为基准进行定位偏移

​ 3.占有原先的位置，不脱离文档流

​ 4.必须添加定位偏移：top、bottom、left、right

​ 5.但兼容性差

---

03.子绝父相是什么？

• 用相对定位来作为绝对定位的父元素
• 父元素相对定位，子元素绝对定位
• 相对定位是为了限制绝对定位

---

04.定位叠放顺序

• z-index : 999

---

05.绝对定位盒子如何居中？

原因：加了绝对定位的盒子不能通过【margin】水平居中

水平居中：

​ left 先偏移50%：left:50%

​ margin-left 负值 偏移盒子宽度的一半：`margin-left:100px

垂直居中：

​ top 先偏移50%：top:50%

​ margin-top 负值 偏移盒子高度的一半：margin-top:-100px

div{
    position: absolute;
    left: 50%;
    margin-left:-100px;
    width:200px;
}
div{
    position:absolute;
    top:50%;
    margin-top:-100px;
    height:200px
}

---

06.拓展一下

• 行内元素设置**【绝对|固定】**定位，可以直接设置高度、宽度
• 块级元素设置**【绝对|固定】**定位，如果不给宽度和高度，默认为内容大小
• 脱离文档流的元素都不会触发外边距塌陷的问题

---

二、关于浮动

01.浮动的特性

• 浮动元素会脱离文档流（标准流）
• 浮动元素会显示在一行，除非父元素装不下
• 浮动元素具有行内块元素的特性（可设置宽、高等样式）

---

02.如何清除浮动？

• 为何要清除浮动？

  • 清除浮动的一种方式是给父元素设置固定高度，但是由于父元素高度不是固定的，不能每次都给父元素设置高度

  • 所以要清除浮动，即清除浮动元素脱离文档流造成的影响，否则会影响后面元素的布局

• 清除浮动的方法——闭合浮动

  • （1）额外标签法——隔墙法

  • 在最后一个浮动子元素之后添加一个空的【div标签】（或者其它块级元素，且必须是块级元素）设置样式【clear:both;】

    div.last{
        clear:both;
    }
    

    ---

  • （2）父元素overflow

    • 为浮动元素的父元素设置样式

      .father{
          overflow:hidden;
      }
      

    ---

  • （3）:after伪元素

    • 为浮动元素的父元素添加after伪类

      添加伪元素的原理同额外标签法一样，都是在父元素末尾添加了一个块级元素清除浮动，只是新增的标签由CSS生成

      /*这句代码的意思是：在父元素内部的末尾新增一个行内元素*/
      .clearfix:after{
          /*必要属性content，这里设置为空即可*/
          content: "";
          
          /*用display将新增的行内元素变为块元素*/
          display: block;
          
          /*设置该伪元素高度为0*/
          height: 0;
          
          /*给这个伪元素清除浮动*/
          clear: both;
          
          /*设置该伪元素不可见*/
          visibility: hidden;
      }
      
      /*这是为了解决浏览器兼容问题*/
      .clearfix{
          *zoom:1;
      }
      

    ---

  • （4）双伪元素

    • 同 after 伪元素，新增 before 伪元素

      .clearfix:before, .clearfix:after{
         content: "";
         display: table;
      }
      
      .clearfix:after{
        clear:both;
      }
      
      .clearfix{
        *zoom:1;
      }
      

---

03.浮动的网页布局如何搭配？

• 通常与文档流里的父元素搭配使用

  • 父元素处于正常的文档流中

• 子元素在父元素中进行浮动

  • 最后在父元素中清除浮动

---

04.一些注意事项

• 浮动的盒子没有外边距塌陷的问题

• 浮动的元素会压住下面文档流内的盒子，但不会压住文档流内的文字
  这是因为浮动原来就是为了做文字环绕效果的

---

三、关于display

01. display是什么？

​ 设置元素如何显示

---

02. 语法

div{
    /*设置为块元素显示，块元素可设置高度、宽度，独占一行*/
    display:block;
}
p{
     /*设置为行内元素显示，行内元素不能设置高度、宽度，在一行内依次排列，超出换行排列*/
    display:inline;
}
span{
     /*设置为行内块元素显示，行内块元素可以设置高度、宽度，且依次排列*/
    display: inline-block;
}
div{
     /*隐藏元素，元素隐藏后，【不再占有原有位置】，即脱离了文档流*/
    display: none;
}

----------------------------------------------------------------------------
/*元素隐藏后，【仍然占有原有位置】，不脱离文档流*/
div{
    /*元素可见*/
    visibility: visible;
}
div{
    /*元素隐藏*/
    visibility: hidden;
}

四、关于overflow

01. 概念

控制元素溢出盒子时怎么处理

---

02. 语法

div{
    /*默认值*/
    overflow: visible;
}

div{
    /*隐藏溢出部分内容*/
    overflow: hidden;
}

div{
      /*在需要的时候添加滚动条，即内容溢出显示滚动条，内容不溢出不显示滚*/
      overflow: auto;
}

div{
      /*滚动条，显示滚动条，不管内容是否溢出*/
      overflow: scroll;
}