box-sizing-30

如何在VSCode解决办法可以设置div的box-sizing:border-box(盒模型)~

有的。

语法

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

属性值1、content-box 。

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

属性值2、border-box 。

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

属性值3、inherit 规定应从父元素继承 box-sizing 属性的值。

css里的一段文本我设置了悬停效果，但是鼠标一放上去，有几个字就会换到下一行

盒子模型概述：

所有HTML元素都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：

盒子模型组成以及对应区域

盒子模型的组成：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

以上是html中盒子模型的结构，每个元素都可以用这个盒子模型来解析。在开发中，一个元素的样式表现形式，也是由这个盒子模型的每个部分来表现的。对应到css中样式的属性有一下几个纬度——

width, height, padding, border, margin。由于在不同的浏览器中，这几个属性所表示的盒子模型中的部分有所差异，所以又分为了标准盒子模型和怪异盒子模型。

一，标准盒子模型

解释：在标准盒子模型下

（1）css中的width, height属性，分别表示的是盒子模型中content的宽度和高度。

（2）css中的padding，表示的是盒子模型的的padding部分。

（3）css中的border，表示的是盒子模型中的border部分。

（4）css中的margin，表示的是盒子模型中的margin。

二，怪异盒子模型（ie盒子模型）

解释：在怪异盒子模型下

（1）css中的width, height属性，分别表示的是盒子模型中content的宽度和高度加上盒子模型中padding和border的宽度。

（2）css中的padding，表示的是盒子模型的的padding部分。

（3）css中的border，表示的是盒子模型中的border部分。

（4）css中的margin，表示的是盒子模型中的margin。

**段落性总结 —— 标准盒子模型和怪异盒子模型的区别**。

从上述的内容可以看出，标准盒子模型和怪异盒子模型的区别，完全体现在css中width和height这两个属性对盒子模型的表现上。

标准盒子模型：css中width/height=content的width/height。

怪异盒子模型：css中width/height=content的width/height+padding+border。

导致的结果：

由于标准盒子模型和怪异盒子模型的存在，这就导致当同一段css代码作用在同一个元素上时，在不同盒子模型下的浏览器中，元素所占的宽度和高度却不同。

三，css3中box-sizing下的盒子模型。

语法：（属性）box-sizing: （属性值）content-box/border-box/inherit；

box-sizing对盒子模型的影响：

（1）当“box-sizing“的值为”content-box“时，css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。

（2）当“box-sizing“的值为”border-box“时，css中的width所包含的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。

总结：box-sizing属性，让开发人员可以控制浏览器的是以标准盒子模型表现，还是以怪异盒子模型表现。

box-sizing的兼容性：

到此盒子模型的所有内容全部阐述完毕。

最佳方案：由于box-sizing的兼容性在ie8及以上，那在不要求兼容ie8一下的项目中，可以使用box-sizing给所有元素统一设置盒子模型的表现形式。个人推荐:。

*{box-sizing:'border-box'}。

这样只要设置的width的宽度，就是这个元素在页面中真实的宽度了。不用再去计算padding和border对width的影响。

对于需要兼容ie8的项目，就需要针对不同的浏览器，添加特定的代码。或者避免指定宽度的元素border和padding的设置。

相关内容：

1.行内元素之间的水平margin，即两个元素margin之和。

2.块级元素之间的竖直margin， 即取最大的。

3.嵌套盒子之间的margin，即父元素的padding+子元素的margin。

4.margin可以设置为负值。

不同浏览器的css前缀：Element {。

-moz-box-sizing: content-box;。

-webkit-box-sizing: content-box;。

-o-box-sizing: content-box;。

-ms-box-sizing: content-box;。

box-sizing: content-box;。

参考：

w3c标准：https://www.runoob.com/cssref/css3-pr-box-sizing.html。

html代码文本框加上这个-moz-box-sizing:content-box; box-sizing:border-box;，火狐浏览器就不会超出。

你在.diyiduan:hover里面设置了box-sizing:border-box，可是在.diyiduan中没有设置。

box-sizing:border-box的意思是边框和边距都算在width里面，所以宽度就有区别了。

box-sizing:border-box是什么意思？

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内。

padding-box，padding计算入width内。

border-box，border和padding计算入width之内，其实就是怪异模式了~。

你采用了border-box属性，火狐兼容这个属性，所以边框被算进高度里面，如果不采用的话，边框是在文本框的高度基础上再加上去的，比如，你设置高度为20；box-sizing:border-box，那么文本框高度是20；但是如果不添加box-sizing:border-box的话，文本框的高度会是22，所有就比别的高出2像素。

通常为了让一个盒子有一定的内边距，此时设置box-sizing:border-box,可以看到一个内边距的效果。

原文地址：http://www.qianchusai.com/box-sizing-30.html