CSS布局之等分布局与等高布局_flex 等高

作者：知新_RL | 2024-03-15 14:49:26

踩

flex 等高

等分布局

等分布局就是指一行被分为若干列，每一列的宽度是相同的值；
方法一：float 属性实现等分布局效果
给各个元素设置浮动和宽度

 {
  float: left;
  width: 25%; //宽度用百分比等分
  //给每个元素设置浮动-- 子元素浮动  -  导致父元素的高度塌陷
}
1
2
3
4
5

清除浮动

 1.固定的高度  height   固定写死（不推荐）

2.父元素加overflow:hidden  => BFC 特点: 把浮动的高度给计算进去
    优点：代码简洁
    缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

3.clear:both 清除浮动 => 加在浮动子元素的末尾   <div style="clear:both"></div>
    优点：通俗易懂，方便
    缺点：添加无意义标签，语义化差

4.利用伪元素::after    =》 clearfix 公用类名  =  直接在html中进行调用 (最常用)
               .clearfix::after{
                                  content: '';
                                  display: block;
                                  clear: both;
                                  }
            父级调用<div id="parent" class="clearfix">
   优点：符合闭合浮动思想，结构语义化正确
   缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

 5.使用before和after双伪元素清除浮动

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

 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>
优点：代码更简洁
缺点：用zoom:1触发hasLayout.
推荐使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

2.display 属性的值有关 table 实现等分布局效果；

给父元素添加 display:table;
给子元素添加 display: table-cell;

3.flex 属性实现等分布局效果；

父元素设置 display: flex;
子元素设置 flex:1;

4.Grid 属性实现等分布局效果；

等分布局间距处理
方法一：利用浮动+手动计算宽度
考虑用 padding 和 border 来设置间隙
怪异盒模型 ：box-sizing: border-box;
盒子模型box-sizing：

content-box: width 宽度 = width + padding-left/right + border-left/right
border-box: width 宽度 = width(padding+border 计算进去了)

margin 不影响盒子模型的大小 = > 间距 / 位置移动

具体步骤(四个盒子等分相互之间有间隙)：

1.给四个盒子设置
{
width: 25%;
float: left;
border-left:10px solid #fff;
box-sizing: border-box;
}
2.给父盒子设置 margin-left:-10px;把第一个盒子的左间距隐藏起来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分布局解决方法1-修改版-border边框线</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .parent-fix {
        overflow: hidden;
      }

      #parent {
        height: 300px;
        /* 整体往左边进行移动  - 间距隐藏起来 */
        margin-left: -10px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        height: 300px;
        width: 25%;
        float: left;
        border-left: 10px solid #fff;
        box-sizing: border-box;
      }
      .col1 {
        background-color: hotpink;
      }

      .col2 {
        background-color: lightblue;
      }

      .col3 {
        background-color: green;
      }

      .col4 {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="parent-fix">
      <!-- 作为父级容器 -->
      <div id="parent" class="clearfix">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col4"></div>
      </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分布局解决方法1-修改版- padding内填充</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .parent-fix {
        overflow: hidden;
      }

      #parent {
        height: 300px;
        margin-left: -10px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        height: 300px;
        width: 25%;
        float: left;
        padding-left: 10px;
        /* padding已经计算在了25%
         padding是内容的一个部分,所以看不到，可以在他的父元素里面嵌套一个子元素，背景颜色加到子元素身上
       */
        box-sizing: border-box;
      }

      .col1 .inner {
        height: 300px;
        background-color: hotpink;
      }

      .col2 .inner {
        height: 300px;
        background-color: lightblue;
      }

      .col3 .inner {
        height: 300px;
        background-color: green;
      }

      .col4 .inner {
        height: 300px;
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="parent-fix">
      <!-- 作为父级容器 -->
      <div id="parent" class="clearfix">
        <div class="col1">
          <div class="inner"></div>
        </div>
        <div class="col2">
          <div class="inner"></div>
        </div>
        <div class="col3">
          <div class="inner"></div>
        </div>
        <div class="col4">
          <div class="inner"></div>
        </div>
      </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

用 table 实现等分布局加间隙

1.父元素设置 display: table;子元素设置 display: table-cell;
2.给子元素设置 padding-left: 20px;并内嵌一个盒子，将子元素的颜色加到内嵌的盒子里面。
3.给所有的盒子外面嵌套一个大盒子，并给其设置 margin-left: -20px;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分布局解决方法2-table+table-cell</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #parent {
        width: 100%;
        /* table */
        display: table;
      }
      .parentWrap {
        margin-left: -20px;
      }
      .inner {
        height: 600px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        /* td */
        display: table-cell;
        height: 300px;
        padding-left: 20px;
      }

      .col1 .inner {
        background-color: hotpink;
      }

      .col2 .inner {
        background-color: lightblue;
      }

      .col3 .inner {
        background-color: green;
      }

      .col4 .inner {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <!-- 作为父级容器 -->
    <div class="parentWrap">
      <div id="parent">
        <div class="col1">
          <div class="inner"></div>
        </div>
        <div class="col2"><div class="inner"></div></div>
        <div class="col3"><div class="inner"></div></div>
        <div class="col4"><div class="inner"></div></div>
      </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

用 flex 实现有间隙的等分布局

1.父元素设置 display: flex;子元素设置 flex: 1;
2.给子元素设置 padding-left: 20px;并内嵌一个盒子，将子元素的颜色加到内嵌的盒子里面。
3.给父元素设置 margin-left: -20px;并删除其 width: 100%;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分布局解决方法3-flex</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #parent {
        //width: 100%;
        /* 子元素排列   =  水平排列 */
        display: flex;
        margin-left: -20px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        height: 300px;
        /* 四个容器  占1等份  1/4  = 100%/ 4 */
        flex: 1;
        padding-left: 20px;
      }
      .inner {
        height: 300px;
      }
      .col1 .inner {
        background-color: hotpink;
      }

      .col2 .inner {
        background-color: lightblue;
      }

      .col3 .inner {
        background-color: green;
      }

      .col4 .inner {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <!-- 作为父级容器 -->
    <div id="parent">
      <div class="col1"><div class="inner"></div></div>
      <div class="col2"><div class="inner"></div></div>
      <div class="col3"><div class="inner"></div></div>
      <div class="col4"><div class="inner"></div></div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

等高分局

等高布局就是一行被划分成若干列，每一列的高度是相同的值；

display 属性的值有关 table 实现

父元素设置 display: table;
子元素设置 display: table-cell;

padding + margin 属性实现等高布局效果

给子元素设置足够大的内填充和外间距
padding-bottom:9999px;
margin-bottom:-9999px;

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】