css中神奇的盒模型-----（box-sizing：border-box）

盒子模型的应用

f1

f2

盒子模型的应用

f1

f2

盒子模型的应用

f1

f2

看主要代码：

.wrap {

box-sizing: border-box;

width: 45%;

padding: 10px;

float: left;

text-align: center;

box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.20);

border-radius: 10px;

font-size: 13px;

color: #333333;

margin-left: 15px;

margin-bottom: 20px;

}

在这里，我将

• 容器wrap的盒模型设置为*box-sizing: border-box;—改变了盒子的结构（不再是默认的content-box结构）

即width=content+padding+border(此时，当div的宽度为50%时，而border和padding为px时，那么content会随着实际的宽度进行自动缩放；)

• 同时将width设置为百分比（因此wrap会随着视口大小而自适应）

• 指定了padding（采用px的形式）

• 指定了margin（采用可px的形式）

PS：也可以给padding与margin设置百分比的形式

1）margin，padding设置为百分比形式：

给元素的内边距和外边距的各个边设置为10%，意味着“包含元素宽度的10%”，因此，随着示例输出窗口的大小增加，内边距和外边距也增加了。

补充：盒子模型的高级使用

默认：这里容器使用了border-box模型

1）通过设置盒子的宽和高的约束

• 通过min-width,max-width,min-height,max-height 属性，来设置大小约束，以更灵活的方式控制内容盒的大小----通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式

------max-width的好处是将容器的媒体（即图像和视频）控制在容器内

如下设置：

①：

width:70%;

max-width:1280px;

min-width:480px;`

②：再使用margin设置该容器再父盒子中水平居中显示

margin： 0 auto

**结果：**当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。当宽度低于480px时，视口将小于容器，您必须滚动才能看到完全的内容

问题来了：当随着容器的大小变化时，且当容器大小变化到比图片更窄时，那么图片会出现溢出现象

如：

给图片设置一下样式后：

img {

display: block;

margin: 0 auto;

max-width: 100%;

}

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。