删除'box-sizing: border-box‘属性

Question

我正在尝试删除box-sizing属性，我不想将其设置为默认值(content-box)。我有这个：

.glyphicon-menu-up:before {
content: "\e260"; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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

html {
  font-size: 10px;
  -webkit-tap-highlight-color: transparent; }

当我使用Google Chrome并取消选中该框时，所有内容都已对齐，并且符合我的要求：

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

但是当我在我的程序中删除这一行时，它不会改变任何东西，我的元素没有对齐。

HTML：

<app-root _nghost-c0="" ng-version="4.3.3"><div _ngcontent-c0="">
                <list-container _ngcontent-c0="" _nghost-c1=""><div _ngcontent-c1="" class="row row-reduced" id="chat-threads">
                        <div _ngcontent-c1="" class="conversation-top-bar-container">
                            <h3 _ngcontent-c1="" class="top-bar-title">
                                Messagerie
                                <span _ngcontent-c1="" class="top-bar-unread-message" title="5 messages non-lus">
    5
  </span>
                            </h3>

                            <div _ngcontent-c1="" class="top-bar-btn" id="top-bar-btn">
                                <button _ngcontent-c1="" class="top-bar-btn create" title="Créer une nouvelle discussion">

                                    <i _ngcontent-c1="" class="fa fa-pencil-square-o"></i>
                                </button>

                                <button _ngcontent-c1="" class="top-bar-btn settings" title="Réglages">
                                    <i _ngcontent-c1="" class="fa fa-cog"></i>
                                </button>

                                <div _ngcontent-c1="" id="outside"></div>

                                <button _ngcontent-c1="" class="top-bar-btn reduce" title="Réduire la liste">
                                    <i _ngcontent-c1="" class="fa fa-minus"></i>
                                </button>
                            </div>
                        </div>

                        <div _ngcontent-c1="" class="settings-notification" id="settings-notification">
                            <div _ngcontent-c1="" class="tr triangle">
                                <div _ngcontent-c1="" class="tr inner-triangle">
                                </div>
                            </div>
                            <div _ngcontent-c1="" class="sound-signal">
                                Signal sonore :
                                <input _ngcontent-c1="" checked="checked" id="soundsignal1" name="soundsignal" type="radio">
                                <label _ngcontent-c1="" for="soundsignal1">Oui</label>
                                <input _ngcontent-c1="" id="soundsignal2" name="soundsignal" type="radio">
                                <label _ngcontent-c1="" for="soundsignal2">Non</label>
                            </div>

                            <div _ngcontent-c1="" class="flash-signal">
                                Signal visuel :
                                <input _ngcontent-c1="" checked="checked" id="flashsignal1" name="flashsignal" type="radio">
                                <label _ngcontent-c1="" for="flashsignal1">Oui</label>
                                <input _ngcontent-c1="" id="flashsignal2" name="flashsignal" type="radio">
                                <label _ngcontent-c1="" for="flashsignal2">Non</label>
                            </div>
                        </div>

                        <div _ngcontent-c1="" class="conversation-wrap">
                            <list-item _ngcontent-c1="" _nghost-c3=""><div _ngcontent-c3="" class="media conversation">
                                    <div _ngcontent-c3="" class="pull-left">

                                        <!----><div _ngcontent-c3="" class="logo-participants-title">
                                            <!----><div _ngcontent-c3="" class="logo-nottalk">
                                                FP
                                            </div>

                                            <!---->
                                        </div>

                                        <!---->

                                        <div _ngcontent-c3="" class="media-body">
                                            <div _ngcontent-c3="" class="message-unread">

                                                <!----><div _ngcontent-c3="" class="media-participants-title">
                                                    <!----><h5 _ngcontent-c3="" class="media-heading contact-name">
                                                        Flofloflo Peron
                                                    </h5>

                                                    <!---->

                                                    <!---->
                                                </div>

                                                <!---->

                                                <!----><small _ngcontent-c3="" class="message-preview">
                                                    RERE</small>
                                            </div>
                                        </div>
                                        <a _ngcontent-c3="" class="div-link">Select</a>
                                    </div>
                                </div>
                            </list-item>
                        </div>
                    </div>
                </list-container>
            </div>

Answer 1

box- have的默认值是content-box，所以如果你想让box-have的值是border-box，你必须显式地指定它。当您取消选中它时，它起作用的原因

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

因为在浏览器中它会选择上一行，这也是定义的边框

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