2017-08-28 54 views
0

我想删除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> 
+1

这个问题将变得更加清晰,如果您还包括相应的HTML代码。 –

+1

箱子大小不能简单地“删除”。它有一个默认值“content-box”。如果将它从开发人员工具中删除并不像从代码中删除它一样,这意味着还有其他规则影响到其他地方。 – Salketer

+0

也许有另一个样式表应用这种风格。我也认为你必须包含相应的HTML代码。 –

回答

0

盒大小的默认值是内容的盒子,所以如果你想盒大小的值是边界框,你必须明确地赋值。 之所以它的工作如果没有选择

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

,因为在浏览器,它会选择以前的线,也被定义边界框

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

所以,如果我理解正确,我不能删除箱子尺寸属性? 因为当我给它任何属性(初始,边框......)时,这不是对齐的。 – Floriane

+0

是的,你不能删除它,如果你删除它,它的默认值将被分配,这是内容框,我猜内容框正在打破你的设计。所以分配边框。 – Rakesh