[分享]css两边消失的线

有时候我们会发现，网页中的某些元素，尤其是边框，在一定的尺寸下，两边会出现消失的线。这个问题其实是由CSS的盒模型引起的。CSS的盒模型分为两种，分别是W3C盒模型和IE盒模型。W3C盒模型是按照元素...

有时候我们会发现，网页中的某些元素，尤其是边框，在一定的尺寸下，两边会出现消失的线。这个问题其实是由CSS的盒模型引起的。

CSS的盒模型分为两种，分别是W3C盒模型和IE盒模型。W3C盒模型是按照元素的内容框计算，包括内容、内边距和边框，不包括外边距。而IE盒模型是按照元素的边框框计算的，包括内容、内边距、边框和外边距。

在W3C盒模型中，元素的宽度=内容宽度+左内边距+右内边距+左边框宽度+右边框宽度，当元素的宽度小于左内边距+右内边距+左边框宽度+右边框宽度时，就会出现消失的线。

/* W3C盒模型的CSS样式 */
.box {
  width: 100px;
  padding: 10px;
  border: 1px solid #000;
} 

而在IE盒模型中，元素的宽度=内容宽度+左内边距+右内边距+左边框宽度+右边框宽度，当元素的宽度小于左内边距+右内边距时，就会出现消失的线。

/* IE盒模型的CSS样式 */
.box {
  width: 100px;
  padding: 10px;
  border: 1px solid #000;
  box-sizing: border-box;
} 

解决这个问题的方法是，可以将元素的盒模型设置为IE盒模型，就可以消除消失的线了。

总结一下，消失的线是由于CSS的盒模型引起的，在W3C盒模型中，当元素的宽度小于左内边距+右内边距+左边框宽度+右边框宽度时，就会出现消失的线，在IE盒模型中，当元素的宽度小于左内边距+右内边距时，就会出现消失的线。解决这个问题可以将元素的盒模型设置为IE盒模型。