首页 移动端

# 怪异盒模型

区别：不是新增了盒模型属性，盒模型的总宽总高的计算方式发生了改变

面试：标准盒模型和怪异盒模型的区别？

1
2
3
4
/*要给元素启用怪异盒模型，需要写对应的样式*/
标签{
    box-sizing:content-box(默认值)|border-box（怪异盒模型）;
}

  1. 标准盒模型（标准盒模型）

    总宽需要 3 个属性参与

    1
    2
    3
    4
    5

    总宽=width+左右padding+左右border
    总高=height+上下padding+上下border
    // 盒子的总宽希望是400

  2. 怪异盒模型（非标准盒模型）

    总宽只需要一个属性参与

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    总宽=width宽，不管有没有添加padding或border，如果添加了则会自动扣除
    //希望总宽是400
    /*标准盒模型*/
    div{
        width:354px;
        padding:20px;
    	border:2px solid red;
    }
    /*怪异盒模型*/
    div{
        box-sizing:border-box;
        width:400px;
        padding:20px;
    	border:2px solid red;
    }

好处：

  1. 不需要计算复杂在盒模型

  2. 移动端首选的盒模型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    /*实际开发中*/
    在reset.css中全局启用该怪异盒模型
    *{
        box-sizing:border-box;
        margin:0;
    	padding:0
    }
    //推荐
    div,p,h1,h2,h3,ul,li,dd,dt,dl{
        box-sizing:border-box;
        margin:0;
    	padding:0
    }

# 弹性布局【重难点】

指的就是用弹性盒子来布局。

指的是使用样式来让普通盒子变成弹性盒子。并不是新增了某些弹性标签。

之前布局：盒模型 + 浮动 + 定位。在做复杂布局的时候，写起来比较麻烦。

可以把弹性布局理解成是高级版（升级版）的浮动 + 盒模型布局。

颠覆了我们之前对布局的理解和使用。

弹性盒子涉及的属性比较多，比较复杂，容易记混。

弹性布局分两部分：

  1. 弹性容器（父级）
  2. 弹性盒子（元素本身）

# 给父级添加的属性 6 个

  1. display:felx; 设置父级为弹性布局

    1
    2
    3
    4
    5
    /*添加到父级上*/
    .father{
        display: flex;
    }
    /*目的让里面的子元素变成弹性盒子，影响的是里面的直接子元素，不影响孙元素*/

  2. flex-direction 弹性盒子的水平或垂直对齐方式的属性

    也就是规定弹性盒子在主轴上的对齐方式（左对齐、右对齐，从上到下对齐，从下到上）

    1
    2
    3
    4
    5
    6
    flex-direction:row|row-reverse|column|column-reverse
    属性值说明：
    row:默认值-从左到右
    row-reverse：在主轴上，从右到左排列
    column：让弹性盒子对的排列

  3. justify-content 把弹性项 (子元素) 沿着弹性容器的主轴线（main axis）对齐。也就是水平方向分布弹性盒子。

    作用：解决主轴方向的富裕空间管理（留白）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    语法：
    justify-content:flex-start|flex-end|center|space-between|space-around;
    一共5种分配富裕空间的方式。
    1. justify-content:flex-start（默认值）
    弹性项目向行头紧挨着填充.
    人话：子元素在主轴开始位置，富裕空间在主轴结束位置。
    即弹性盒子在左侧，留白在右侧
    2. justify-content:flex-end;
    弹性项目向行尾紧挨着填充
    人话：与flex-start相反，子元素在主轴结束位置，而富裕空间在子元素开始位置。
    即弹性盒子在右侧，留白在左侧
    3. justify-content:center;
    弹性项目居中紧挨着填充。
    人话：子元素在主轴中间位置，富裕空间在主轴两侧
    即弹性盒子在中间，留白平均分配在两侧
    4. justify-content:space-between;
    弹性项目平均分布在该行上。
    人话：富裕空间平均分配在每两个子元素之间。（第一个和最后一个没有空间）
    5. justify-content:space-around;
    弹性项目平均分布在该行上，两边留有一半的间隔空间。
    人话：富裕空间平均分配在每个元素的两侧。（手拉手）

  4. align-items

    可以理解为单行子元素在父容器中的垂直方向的对齐方式
    作用：纵轴方向的富裕空间管理（留白）

    1
    2
    3
    4
    5
    6
    7
    align-items:stretch(默认值)|flex-start|flex-end|center|baseline;
    解释：
      stretch：元素被拉伸至纵轴起始结束位置，如果该元素不写高度则无富裕空间
      flex-start: 元素在纵轴起始位置，富裕空间在纵轴结束位置
      flex-end: 元素在纵轴结束位置，富裕空间在纵轴开始位置
      center: 元素在纵轴中间位置，富裕空间在纵轴两侧（上下）位置
      baseline: 元素根据纵轴文字上的基线对齐。

  5. 让弹性盒子换行（默认所有的弹性盒子都在同一行）

    1
    2
    3
    4
    5
    默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
    取值： nowrap(默认值)
          wrap (换行，第一行在上方)
          wrap-reverse; (换行，第一行在下方)
    注意：如果在子元素中使用了flex-grow:1;则可能不会生效。

  6. 多行的弹性盒子的对齐方式

    1
    2
    3
    取值同align-items
    相当于是多行子元素的侧轴对齐方式。如果项目（子元素）只有一根轴线，该属性不起作用。
    注意：针对的是多行，影响的是整体，而不会影响单行在侧轴上的对齐方式。

有没有一种辅助工具，让我们先调试好布局，再写代码。

# 给弹性盒子添加的属性 5 个 (添加到子元素上的属性)

  1. flex-grow:0;// 默认值是 0；flex-grow 属性用于指定弹性子元素如何分配父级空间。也就是假设子元素不写宽度，如何平分父级空间。

    默认值为 0，即不平分父级空间即使有剩余空间。

    注意：使用后，该子元素的宽度值将失效

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    flex-grow:0;//默认值是0；
    注意：flex-grow是按照比例分得父级的富裕空间。即将父级的富裕空间变成子元素宽度。
    1、子元素都没有给宽度，如果值为1，每个子元素的宽度都一致
    2、为了避免子元素的内容超过子元素的宽度，最好先给子元素的宽度设为0；
    3、如果子元素给了宽度，那么就有个计算公式
       剩余空间/比例的和*每个子元素的比例+子元素的width宽度=该子元素的最终宽度；
       剩余空间=父元素的宽度-子元素的宽度和；
       比如：父级总共400px,有3个子元素，每个子元素的flex-grow都为1，其中1、3子元素给了默认宽度width为100，那么：
       还有：400-200=200剩余
       所以每份为：200/3=66.6
       所以，1、3子元素的实际宽度为100+66.6=166，2为66

  2. flex-shrink; 收缩，缩小
    flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

    只有当子元素总宽大于父元素总宽时才会生效。

    场景：父级 400Px, 子元素有 5 个，每个 100 像素，会发生溢出现象，那 flex 是如何处理的？
    默认值：flex-shrink:1; 指的是按照比例会收缩弹性盒子的空间，以便能够在父级中容得下。也就是最终的结果是，子元素不再是 100px，而是收缩成了 80 像素。

    flex-shirink:0;// 不收缩，后果，如果子元素总宽大于父级宽度，则直接溢出，不做任何处理。

  3. flex-basis: 宽度。

    flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小

    简单理解为初始宽度，优先级比 width 大。最终宽度需要看父级有没有剩余空间。如果没有禁止收缩空间（flex-shrink:0），子元素的初始宽度的总和溢出了也会收缩空间。

    注意：当该子元素既有 width 又有 flex-basis 时，basis 权重要比 width 高。比如设置 basis 为 300，而 width 为 200，则呈现出来的是 300px

  4. order: 子元素排序
    取值：阿拉伯数字。

    用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认为 0，即按照书写结构的顺序来排序。

  5. align-self 。子元素单独在侧轴上的排序。

    添加到某个具体的子元素上。

    取值同 align-items. 该属性针对的是所有的子元素，加父级。

    , 也同 align-content，该属性针对的是多行的所有的子元素，也加父级。

总结：上面的 1、2、3 可以合并为一个属性:flex;

1
2
3
4
5
6
flex:flex-grow flex-shrink flex-basis;
举例：
div .son{
    flex:1;//等价于flex-grow:1;
    flex:1 0 100px;//等价于3个属性
}

# 弹性盒子实例

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            line-height: 0;
        }
        body{
            background-color: #f8f6f7;
        }
        .box{
            box-sizing: border-box;
            width: 372px;
            height: 660px;
            margin: 30px auto;
            background-color: #eeecef;
            border: #e7e5e8 solid 1px;
            position: relative;
        }
        .own{
            display: flex;
            margin-top: 20px;
            border-top: 1px solid #e2e0e3;
            border-bottom: 1px solid #e2e0e3;
            height: 78px;
            background-color: #fff;
        }
        .img{
            width: 78px;
            height: 78px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .info{
            width: 240px;
            height: 78px;
        }
        .name{
            font-size: 14px;
            margin: 20px 0 12px;
        }
        .num{
            font-size: 12px;
            padding-top:12px;
        }
        .code{
            display: flex;
            align-items: center;
        }
        .coder{
            width: 23px;
            height: 24px;
            background: url(../作业1/img/ercode.png);
        }
        .codel{
            width: 9px;
            height: 14px;
            background: url(../作业1/img/right.png);
            margin-left: 12px;
        }
        .set{
            border-top: 1px solid #e2e0e3;
            border-bottom: 1px solid #e2e0e3;
            height: 42px;
            background-color: #fff;
            margin-top: 20px;
            display: flex;
            font-size: 14px;
        }
        .icon{
            width: 43px;
            height: 43px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text{
            width: 309px;
            height: 43px;
            line-height: 43px;
        }
        .right{
            display: flex;
            align-items: center;
        }
        .add{
            margin-top: 0;
        }
        .nav{
            border-top: 1px solid #e2e0e3;
            height: 46px;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .star{
            width: 28px;
            height: 25px;
            margin-top: 2px;
            background: url(../作业1/img/star.png);
        }
        .item{
           width: 50px;
           height: 46px;
           display: flex;
           font-size: 12px;
           justify-content: center;
           align-items: center;
           flex-direction: column;
           /* justify-content: space-between; */
           /* justify-content: center; */

        }
        .item p{
            margin-top: 7px;
            height: 12px;
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="own">
            <div class="img">
                <img src="img/pic.png" alt="">
            </div>
            <div class="info">
                <p class="name">结一</p>
                <p class="num">微信号：marvin</p>
            </div>
            <div class="code">
                <div class="coder"></div>
                <div class="codel"></div>
            </div>
        </div>
        <div class="set">
            <div class="icon">
                <img src="img/set.png" alt="">
            </div>
            <div class="text">相册</div>
            <div class="right">
                <img src="img/right.png" alt="">
            </div>
        </div>
        <div class="set add">
            <div class="icon">
                <img src="img/set.png" alt="">
            </div>
            <div class="text">收藏</div>
            <div class="right">
                <img src="img/right.png" alt="">
            </div>
        </div>
        <div class="set add">
            <div class="icon">
                <img src="img/set.png" alt="">
            </div>
            <div class="text">钱包</div>
            <div class="right">
                <img src="img/right.png" alt="">
            </div>
        </div>
        <div class="set add">
            <div class="icon">
                <img src="img/set.png" alt="">
            </div>
            <div class="text">卡片</div>
            <div class="right">
                <img src="img/right.png" alt="">
            </div>
        </div>
        <div class="set">
            <div class="icon">
                <img src="img/set.png" alt="">
            </div>
            <div class="text">表情</div>
            <div class="right">
                <img src="img/right.png" alt="">
            </div>
        </div>
        <div class="set">
            <div class="icon">
                <img src="img/set.png" alt="">
            </div>
            <div class="text">设置</div>
            <div class="right">
                <img src="img/right.png" alt="">
            </div>
        </div>
        <div class="nav">
            <div class="item">
                <div class="star"></div>
                <p>微信</p>
            </div>
            <div class="item">
                <div class="star"></div>
                <p>通讯录</p>
            </div>
            <div class="item">
                <div class="star"></div>
                <p>发现</p>
            </div>
            <div class="item">
                <div class="star"></div>
                <p>我</p>
            </div>
        </div>
    </div>
</body>
</html>

更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

tz 微信支付

微信支付

tz 支付宝

支付宝