前端提高篇（三十八）CSS进阶6：盒模型及使用（IE6混杂盒模型，拖拽，轮廓紧跟潮流大前端和全栈是以后前端的一个趋势，

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

boxContentWidth = boxWidth

border和padding1都是在设置的width外添加的

这两篇文章都有很详细的解释：文一，文二

案例：关于一行放三个li的问题

1.定义一个ul，宽度300，底下跟着3个li，每个li宽度100

在这里插入图片描述

ul,li {

padding: 0;

margin: 0;

}

ul {

width: 300px;

height: 100px;

}

li {

width: 100px;

height: 100px;

display: inline-block;

background-color: rosybrown;

}

效果：可以看到，一行放不下三个li，因为我们在写li时，有换行，系统就会把换行当作空格显示

在这里插入图片描述

我们在ul设置font-size为0，可以解决这个问题，（li内没有出现空格问题，是li之间有空格，所以找ul解决）

而li是会继承font-size的设置的

在上面写出的css代码中，我们没有设置li里的font-size，li会向上找ul的font-size，再没有，就用body里的默认的font-size

所以，当我们设置ul的font-size为0时，也要再设置li的font-size，否则字就看不见了

ul设置font-size，li没有设置font-size时：

在这里插入图片描述

ul设置font-size，li也设置font-size时：

在这里插入图片描述

2.当加入border时，每个li的boxWidth = width + border*2=102px，超出了ul的范围

在这里插入图片描述

此时，如果我们使用IE6混杂盒模型，就能轻松解决这个问题，因为它的border是在width里腾出来的，且不影响其他box的盒模型

box-sizing: content-box | border-box;

默认是content-box，即标准盒模型

设置为border-box，就是IE6混杂盒模型

设置为混杂盒模型效果：

在这里插入图片描述

控制box大小（拖拽）

resize: none | both | horizontal | vertical

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心