Question

我学习CSS已经好几周了，但我还是不能完全理解下面的陈述。我认为这是一个媒体查询，但如果我从CSS代码中删除它，它会导致网格系统的失败。请原谅我没有好好学习英语。:)）

@media print {
/*...*/;
}

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

原始代码：

@media print {
    * {
        text-shadow: none !important;
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    a,a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="javascript:"]:after,a[href^="#"]:after {
        content: "";
    }

    pre,blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }
       @    page {
        margin: 2cm .5cm;
    }

    p,h2,h3 {
        orphans: 3;
        widows: 3;
    }

    h2,h3 {
        page-break-after: avoid;
    }

    .navbar {
        display: none;
    }

    .table td,.table th {
        background-color: #fff !important;
    }

    .btn>.caret,.dropup>.btn>.caret {
        border-top-color: #000 !important;
    }

    .label {
        border: 1px solid #000;
    }

    .table {
        border-collapse: collapse !important;
    }

    .table-bordered th,.table-bordered td {
        border: 1px solid #ddd !important;
    }
}

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

您识别的块是print media query，它定义了如果有人选择打印页面应如何设置样式。

单独删除此块对页面在浏览器中的显示方式无效。

在最底部（打印媒体查询之外是这个）：

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

我希望它会删除这会导致网格中断。

这会重置框模型，以便宽度和高度决定元素的边框（宽度/高度值中包含的填充和边框）。在元素上指定的任何填充或边框都布置并在此指定的宽度和高度内绘制。

通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算内容宽度和高度。

参考是here。

Answer 2

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

删除该位代码是导致网格失败的原因。该系统将传统的CSS盒模型改为边框模型。究竟是什么意思？

假设你有一个div，你想给它一些填充和边框。

传统

将宽度设置为200px，左右填充为20px，2px边框将导致div呈现244px宽，内容区域为200px。让它在200处渲染的方法是从宽度（或高度）中减去边框和填充。

边界框

设置box-sizing: border-box会将元素设置宽度的任何填充和边框关闭，而不是添加到元素。因此，上一个示例中的div将以200px渲染，内容区域为156px，无需进行任何调整。

网格中断是因为 - 当你删除这段代码时 - 你会改回传统模型，这是以col div完全不同的方式进行数学运算。

进一步阅读

如果您想了解更多信息，我建议您查看Chris Coyier's take on this subject，或者只是在box-sizing: border-box进行常规搜索，您就会找到答案。

Answer 3

您发布的大部分代码确实是媒体查询（适用于print，因此仅在打印页面时适用。）

然而，最后一块代码 - 不是该媒体查询的一部分，因此始终适用。这是重要的一点。

这段代码为所有元素设置box-sizing: border-box，正如您所发现的，它对于Bootstrap的网格系统非常重要。

设置border-box告诉浏览器元素的width设置应该包含边框。如果没有此设置，边框将被定义为在元素之外。

这意味着，如果你有（例如）两个元素，每个元素都设置为width:50%并且边框为1px且使用border-box，则它们确实会占用100％的宽度。

然而，如果没有border-box，它们占据100％宽度加上4px（两个元素之间的4个左/右边界中的每一个都是1px），因此会突破布局。

这些陈述在CSS（twitter-Bootstrap）中意味着什么？

3 个答案:

传统

边界框

进一步阅读