1.css的布局技术有哪些?

  • 正常布局流
  • display属性
  • 弹性盒子
  • 网格
  • 浮动
  • 定位
  • CSS 表格布局
  • 多列布局

本文重点涉及到三种布局

正常布局流(normal flow)

正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。块盒独占一行,行盒水平依次排列

浮动(float)

把一个元素“浮动”(float)起来,会改变该元素本身和在正常布局流(normal flow)中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧,并且从正常布局流(normal flow)中移除,这时候其他的周围内容就会在这个被设置浮动的元素周围环绕。

绝对定位(absolute positioning)

将元素完全从页面的正常布局流(normal layout flow)中移出,类似将它单独放在一个图层中,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。

2.块级格式化上下文(BFC)简介

全称Block Formatting Context, 简称BFC。它是一个独立的渲染区域,它规定了在该区域中,常规流块盒的布局。

什么叫常规流块盒?什么叫独立的渲染区域?

常规流块盒

  • 常规流块盒在水平方向上,必须撑满包含块

  • 常规流块盒在包含块的垂直方向上依次摆放
  • 常规流块盒若外边距无缝相邻,则进行外边距合并

  • 常规流块盒的自动高度和摆放位置,无视浮动元素和定位元素

包含块:每个盒子都有它的包含块,包含块决定了盒子的排列区域,绝大部分的情况下:盒子的包含块,为其父元素的内容区域(content部分)

独立渲染区域

BFC渲染区域:

这个区域由某个HTML元素创建,以下元素会在其内部创建BFC区域:

  • 根元素(html元素创建BFC区域,覆盖了网页中所有的元素)

  • 浮动和绝对定位元素

  • overflow不等于visible的块盒

     

何为独立?
独立的渲染区域,就是在不同的BFC的区域,它们进行渲染时相互不干扰。创建BFC的元素,就隔绝了它内部和外部的联系,内部的渲染不会影响到外部。

触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性:

  • body 根元素

  • 浮动元素:float 除 none 以外的值

  • 绝对定位元素:position (absolute、fixed)

  • display 为 inline-block、table-cells、flex

  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

 

3.BFC规则以及应用

BFC具体规则:

  1. 创建BFC的元素,它的自动高度需要计算浮动元素

  2. 创建BFC的元素,它的边框不会与浮动元素重叠

  3. 创建BFC的元素,不会和他的子元素进行外边距合并

 

BFC的应用:

1.创建BFC的元素,它的自动高度需要计算浮动元素

例子:解决高度坍塌

在HTML中创建一个div类名为container 其子div有四个,类名为item,如下代码所示

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

css代码

    .container {
      background: green;
    }
    .container .item {
      border: 1px solid red;
      width: 100px;
      height: 100px;
      /* 子元素设置浮动 */
      float: left;
    }

 

效果如下图,出现高度坍塌,container 的高度为0

 

 

 

在我们以前,会使用到以下方法,使用清除浮动的伪元素clearfix::after.

html

给父级的类名添加 clearfix

    <div class="container clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

css

给container父元素添加伪元素样式.clearfix::after

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

 

效果图,就这样高度坍塌的问题解决了。其原理是创建了伪元素after 把高度撑开了。

 

 

 

创建BFC也能解决以上的问题,因为创建BFC的元素,它的自动高度需要计算浮动元素

  • 浮动和绝对定位元素(这个方式会改变盒子的排列方式)

  • overflow不等于visible的块盒(跟以上方法相比,副作用最小)

最好还是使用伪元素来清除浮动,特别是在父盒子本身就需要溢出显示的情况下

实现代码

css

    .container {
      background: green;
      /* 触发bfc */
      /* position: absolute; */
      /* float: left; */
      overflow: hidden;
    }
    .container .item {
      border: 1px solid red;
      width: 100px;
      height: 100px;
      /* 设置浮动 */
      float: left;
    }

 

效果图,在父级container中创建了一个BFC ,解决了高度坍塌的问题。

 

 

 

2.创建BFC的元素,它的边框盒不会与浮动元素重叠

例子:

html   

两个兄弟关系的div

<div class="float"></div>
<div class="container"></div>

css

    .float {
      width: 200px;
      height: 200px;
      background: green;
      /* 设置浮动 */
      float: left;
    }
    .container {      
    height
: 500px; background: red; }

 

效果图如下,两个兄弟关系的div出现了重叠的现象。因为常规流盒子看不到浮动元素,所以container会无视float

 

 

 

 

 

 

在第二个div container中加上overflow: hidden,使container 创建BFC,让常规流盒子的内部创建bfc,由于bfc的区域是独立渲染区域,所以肯定不会与其他区域产生干扰,所以就会避开浮动元素。

css

    .float {
      width: 200px;
      height: 200px;
      background: green;
      /* 设置浮动 */
      float: left;
    }
    .container {      
  height: 500px;
      background: red;
     /* 触发bfc */
      overflow: hidden;
    }

tips: 这样的布局方式也是实现左边固定,右边自适应的两栏布局的方式

如图

 

 

 

 

 

3.创建BFC的元素,不会和他的子元素进行外边距合并

例子:创建两个div为父子关系

html

    <div class="container">
        <div class="child"></div>
    </div>

css

    .container {
      background: green;
      height: 500px;
      margin-top: 30px;
    }
    .container .child {
      height: 100px;
      margin: 50px;
      background: red;
    }

 

如图所示,我理想的情况是,父元素离body元素的margin-top是30px,子元素距离父元素的margin-top是50px,现在变f成了父元素和子元素都距离body元素的margin-top为50px,这显然是不符合预期的。原因是父子元素的外边距进行了合并

 

 

 

 

想要阻止父子元素的外边距进行合并,解决办法是在container中创建BFC,加上overFlow:hidden。

css

    .container {
      background: green;
      height: 500px;
      margin-top: 30px;
      /* 给父元素创建bfc */
      overflow: hidden;
    }
    .container .child {
      height: 100px;
      margin: 50px;
      background: red;
    }

效果如下,child 就会以containerBFC为准进行定位

 

内容来源于网络如有侵权请私信删除