刪除'box-sizing：border-box'屬性

我想刪除box-sizing屬性，我不想將其設置爲默認值（content-box）。我有這樣的：刪除'box-sizing：border-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; }

當我在谷歌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>

來源

2017-08-28 Floriane

這個問題將變得更加清晰，如果您還包括相應的HTML代碼。 –

箱子大小不能簡單地「刪除」。它有一個默認值「content-box」。如果將它從開發人員工具中刪除並不像從代碼中刪除它一樣，這意味着還有其他規則影響到其他地方。 – Salketer

也許有另一個樣式表應用這種風格。我也認爲你必須包含相應的HTML代碼。 –

盒大小的默認值是內容的盒子，所以如果你想盒大小的值是邊界框，你必須明確地賦值。之所以它的工作如果沒有選擇

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

，因爲在瀏覽器，它會選擇以前的線，也被定義邊界框

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

來源

2017-08-28 09:44:35 Rakesh

所以，如果我理解正確，我不能刪除箱子尺寸屬性？因爲當我給它任何屬性（初始，邊框......）時，這不是對齊的。 – Floriane

是的，你不能刪除它，如果你刪除它，它的默認值將被分配，這是內容框，我猜內容框正在打破你的設計。所以分配邊框。 – Rakesh

刪除'box-sizing：border-box'屬性

回答

相關問題