阅读 632

布局、定位和BFC

一、布局基础

1、布局:按照设计图要求,进行区域划分

2、布局时一个循环往复的过程

3、常用设计布局:(高度都不设置,让其根据内容自动)

1、所有内容全部居中

<body>
    <div class="container">
        
    </div>
</body>
复制代码
.container{
    width: XXpx;
    margin: 0 auto;
}
复制代码

2、头部贯穿,下面主体居中

<body>
    <header></header>
    <div class="container">
​
    </div>
</body>
复制代码
header{
    width: 100%;
}
.container{
    width: XXpx;
    margin: 0 auto;
}
复制代码

3、头部、脚部贯穿,中间内容居中

<body>
    <header></header>
    <div class="container">
    </div>
   <footer></footer>
</body>
复制代码
header,footer{
    width: 100%;
}
.container{
    width: XXpx;
    margin: 0 auto;
}
复制代码

二、flex布局

1、容器和项目

容器:装东西(父元素)

项目:子元素

2、主轴和交叉轴

默认情况下,主轴水平向右,交叉轴垂直向下

3、创建弹性布局

在父元素中创建display:flex; 父元素就是容器,在默认状态下里面的项目显示在一行,

当项目宽度总和超过容器宽度,它会自动等比例压缩项目宽度。

(1)项目换行:flex-wrap

flex-wrap: nowrap; 不换行 默认情况

flex-wrap: wrap; 换行

flex-wrap: wrap-reverse; 倒放换行

(2)控制主轴方向对齐方式:justify-content

justify-content: center; 所有项目居中显示

justify-content: flex-start; 靠左对齐

justify-content: flex-end; 靠右对齐

justify-content: space-between; 项目与项目之间等距分配,项目与容器距离为0

justify-content: space-around; 项目与项目之间距离相等,项目与容器距离为 项目与项目之间距离的一半

justify-content: space-evenly; 所有空白部分距离相等

(3)控制交叉轴方向对齐方式:align-items

align-items: center; 居中

align-items: flex-start; 上方排列

align-items: flex-end; 底部排列

align-items: baseline; 项目的第一行文字的基线对齐

align-items: stretch; 默认值,如果项目未设置高度或设为auto,将占满整个容器的高度

(4)改变主轴方向:flex-direction

flex-direction: row; 默认值,主轴为水平方向,起点在左端

flex-direction: row-reverse; 主轴为水平方向,起点在右端

flex-direction: column; 主轴为垂直方向,起点在上沿

flex-direction: column-reverse; 主轴为垂直方向,起点在下沿

(黑色表示主轴,橙色表示交叉轴,交叉轴随主轴变化)

(5)定义多根轴线的对齐方式:align-content(如果项目只有一根轴线,该属性不起作用)

align-content:flex-start; 与交叉轴的起点对齐

align-content:flex-end; 与交叉轴的终点对齐

align-content:center; 与交叉轴的中点对齐

align-content:space-between; 与交叉轴两端对齐,轴线之间的间隔平均分布

align-content:space-around; 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍

align-content:stretch; 默认值,轴线占满整个交叉轴

(6)把剩余部分按比例分给子元素:flex-grow (写在子元素里面,后面的数字代表比例)

三、定位

元素设置了position属性:

div{
    /* 静态定位 默认值 */
    position: static;
    /* 相对定位 */
    position: relative;
    /* 绝对定位 */
    position: absolute;
    /* 固定定位 */
    position: fixed;
    /* 粘性定位 */
    position: static;
}
复制代码

1、相对定位

相对盒子原来的位置偏移,原本所占空间不变,没有脱离文档流,一般用来做绝对定位的父元素。

2、绝对定位

  • 当浮动元素被设置为绝对定位,元素的float属性会失效
  • 相对于设置了定位属性(除static)的父元素偏移
  • 如果没有就相对于html元素偏移
  • 脱离了文档流,不再占据空间
  • 子绝父相

子元素设置为绝对定位,父元素设置为相对定位,父元素位置发生变化,子元素跟着变化。

  • 使用z-index可以改变堆叠顺序,数值越大,堆叠在越上方

3、固定定位

相对于浏览器窗口的固定位置,不会随着用户的滚动变化,脱离文档流。

4、粘性定位

依赖于用户的滚动,在相对定位与固定定位之间切换,指定top、left、right、bottom四个阈值其中之一,粘性才会生效。

四、块级格式化上下文

块级格式化上下文:block formatting context(简称BFC),它时一个独立的渲染区域,这个区域与外部毫不相干。

1、如何创建BFC

  • float不能是none
  • position的值不是static或者relative
  • display的值是line-block、table-cell、flex、table-caption或者inline-flex
  • overflow的值不是visible

2、作用

  • 避免上下两个相邻元素垂直方向的margin重叠
 <p>看看我的 margin是多少</p>
    <div>
        <p>看看我的 margin是多少</p>
    </div>
复制代码
 *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f555;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        /* 激活BFC */
        overflow: hidden;
    }
复制代码

激活后,两个p元素之间的margin为60px

  • 解决父元素高度坍塌问题,通过激活父元素的BFC
  <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
复制代码
 .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
       /* 激活BFC */
        overflow: hidden;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
复制代码
  • 自适应两栏布局
 <div class="left">LEFT</div>
 <div class="right">RIGHT</div>
复制代码
 *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
         /* 激活BFC */
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
复制代码

总结:因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

文章分类
前端
文章标签