CSS布局,浮动与定位布局

默认的文档流(不加任何修饰,自动布局)

块级元素 上下结构
行内元素 左右结构
块级元素宽度为父级的百分百

项目应用:第一层布局 div默认 h5语义标签

display:

block 块级元素默认
inline-block 项目应用:简单的菜单 行内块级元素
inline 行内元素默认

float脱离文档流

脱离文档流,对后续元素的结构有影响
多个浮动元素在一个浮动流中并排显示,如果一排放不下,就会换行显示
对父元素没有支撑作用

清除浮动

位于浮动元素下的非浮动元素会显示到浮动元素的下面,非浮动元素中的文字会环绕在浮动元素周围,这并不是我们想要的。要想让该非浮动元素位于浮动元素之后 (单独一行)需要清除浮动。

父元素 添加overflow:hidden;(不推荐使用)

  • 优点:代码简洁
  • 缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素,不推荐使用

最后一个浮动标签后 额外标签法 clear:both;(不推荐使用)

div.clear{float:none;/height:0;/clear:both;}

在最后一个浮动标签后,新加一个标签,给其设置clear:both;

  • 优点:通俗易懂,方便
  • 缺点:添加无意义标签,语义化差

父元素 伪元素,使用after伪元素清除浮动(推荐使用)

首先给浮动的元素加一个父容器
给这个父容器添加一个类 样式 clearxxx

clearxxx的设置如下:
.clearxxx::after{
    content: "";
    display: block;
    clear: both;}
  • 优点:符合闭合浮动思想,结构语义化正确
  • 缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout

原理:假元素,空元素, 后面跟了一个空的块级元素

定位(利用position属性)布局

static:静态定位

  1. 默认布局,是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中
  2. 类如top,left之类的属性设定不起作用,只有类如margin-top的属性设定才起作用

相对定位

  1. 不脱离文档流,原先位置保留
    • 元素本身浮动时,所在位置不会被后面元素占据
    • 前一个元素float,脱离文档流,后一个元素若是相对定位,相对的起始位置会因前面元素浮动而发生变化
  2. 如果不设置top,bottom,left,right属性,依然在原位置。对于相对定位的元素,可以通过属性top,bottom,left,right来改变元素的最终位置。元素移动的时候是相对于当前元素所在的位置进行移动
  3. 块级宽度100%,宽度依旧保持百分百
  4. top与margin-top对元素都发生作用,这两设定不互相影响,不会抵消(static定位时,类如top,left之类的设定不起作用,只有类如margin-top的属性设定才起作用)

绝对定位 absolute

  1. 元素脱离了文档流,即不在原来的位置上。
  2. 在没有设置定位属性的情况下,默认在原先的位置脱离文档流。
  3. 不干扰其他元素在页面中的位置,显示在其他元素的上方。
  4. 没有定位祖先元素的,相对于视口区的左上角定位。
  5. 有定位祖先元素的,相对于定位祖先元素进行定位。

粘性定位( Sticky positioning ) CSS3新增(特有)

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动(此时相当于fixed定位)。

元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以 滚动,那么是相对于viewport(视口区)来计算元素的偏移量。

position: sticky;

实际应用场景:网易严选右侧

注意点:由于是relative+fixed ,设置粘性定位的盒子 需要写在body下面 ,否则不起作用

z-index

不加position不生效,两个元素同时要加position
当两个定位元素叠加在一起的时候,可以使用“z-index”来改变两个定位元素出现的顺序( z-index 取值无需指定单位,值大的显示在上方。 )

分类

satatic 静态定位:不脱离文档流,

relative 相对定位:不脱离文档流,原有位置依旧占据

absolute 绝对定位:脱离了文档流,原有位置不保留

fixed 固定定位:脱离了文档流,原先位置不保留

定位常用搭配:

浮动布局

float+margin clear

定位布局:

positon:static 没有搭配
position:relative,absolute,fixed(主要找临界值)+top/left/right/bottom+ z-index

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页