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

f1

f2

盒子模型的应用

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%;

}

如图便不会出现溢出现象，其实原理相似于bootstrap框架中响应式图片的原理（.img-responsive)
使用display: block;margin: 0 auto;是为了让img在父元素中以块级元素的形式居中显示，

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！