如何从元素中删除 box-sizing:border-box

Question

我需要为大部分页面保留 box-sizing:border-box 但需要在页脚中将其删除。以下不是很有效

*, ::after, ::before {
    box-sizing: border-box;
    
    
.footContainer *,.footContainer ::after, .footContainer ::before{
  box-sizing:content-box;
 }
    
    
.footerContainer {
    display:flex;
    background-color: #538231;
    padding: 0vw;
    justify-content:space-evenly;
    align-items:center;
    font-size:1vw;
}


.socialMedia a{
    display:flex;
    flex-direction:column;
    color: white;
    border: 0px solid white;
    margin: 1vw;
    justify-content:center;
    align-items:center;
}

.socialMedia a {
    outline: none;
   
    
    color: white;
    text-decoration: none;
}

.fa2 {
    padding: 0 1vw;
    font-size: 2.25vw!important;
    width: 2.5vw;
    text-align: center;
    text-decoration: none;
    margin: 0;
}

#footContainer *,#footConatiner ::after,#footContainer ::before{
    box-sizing:unset;
}

<div class="footerContainer" style="margin-bottom:1vw;box-sizing: unset;">

  <span style="color:white" class="cr">Copyright © 2019, All Rights Reserved, Sustainable Weston Action Group </span>
  <div style="display:flex;justify-content:center;box-sizing: unset;">
    <div id="zero" class="socialMedia" style="
    box-sizing: unset;
">
      <a href="mailto:swag@sustainablewestonma.org">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/mail3-whiteongreen.png">
        <!--Send us an email-->
      </a>
    </div>
    <div id="first" class="socialMedia">
      <a href="https://www.facebook.com/groups/1960906387454685/">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/facebook-square-brands-green.png">
        <!-- Like us on Facebook-->
      </a>
    </div>
    <div id="second" class="socialMedia">
      <a href="https://twitter.com/Weston_SWAG">
        <img style="border:solid 1px white;border-radius:50%" class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/twitter-square-brands-green.png">
        <!-- Follow us on Twitter-->
      </a>
    </div>
    <div id="third" class="socialMedia">
      <a href="https://instagram.com/sustainablewestonactiongroup/">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/instagram-brands-green.png">
        <!--Follow us on Instagram-->
      </a>
    </div>

  </div>
</div>

Answer 1

您在第一个选择器块之后没有右括号，并且在您重置框大小属性的选择器块中，您将 class .footContainer 而不是 .footerContainer

*, ::after, ::before {
    box-sizing: border-box;
}
    
.footerContainer *,.footerContainer ::after, .footerContainer ::before{
  box-sizing:content-box;
 }
    
    
.footerContainer {
    display:flex;
    background-color: #538231;
    padding: 0vw;
    justify-content:space-evenly;
    align-items:center;
    font-size:1vw;
}


.socialMedia a{
    display:flex;
    flex-direction:column;
    color: white;
    border: 0px solid white;
    margin: 1vw;
    justify-content:center;
    align-items:center;
}

.socialMedia a {
    outline: none;
   
    
    color: white;
    text-decoration: none;
}

.fa2 {
    padding: 0 1vw;
    font-size: 2.25vw!important;
    width: 2.5vw;
    text-align: center;
    text-decoration: none;
    margin: 0;
}

#footContainer *,#footConatiner ::after,#footContainer ::before{
    box-sizing:unset;
}

<div class="footerContainer" style="margin-bottom:1vw;box-sizing: unset;">

  <span style="color:white" class="cr">Copyright © 2019, All Rights Reserved, Sustainable Weston Action Group </span>
  <div style="display:flex;justify-content:center;box-sizing: unset;">
    <div id="zero" class="socialMedia" style="
    box-sizing: unset;
">
      <a href="mailto:swag@sustainablewestonma.org">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/mail3-whiteongreen.png">
        <!--Send us an email-->
      </a>
    </div>
    <div id="first" class="socialMedia">
      <a href="https://www.facebook.com/groups/1960906387454685/">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/facebook-square-brands-green.png">
        <!-- Like us on Facebook-->
      </a>
    </div>
    <div id="second" class="socialMedia">
      <a href="https://twitter.com/Weston_SWAG">
        <img style="border:solid 1px white;border-radius:50%" class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/twitter-square-brands-green.png">
        <!-- Follow us on Twitter-->
      </a>
    </div>
    <div id="third" class="socialMedia">
      <a href="https://instagram.com/sustainablewestonactiongroup/">
        <img class="fa2" src="https://www.sustainablewestonma.org/.swag/public/images/instagram-brands-green.png">
        <!--Follow us on Instagram-->
      </a>
    </div>

  </div>
</div>

如何从元素中删除 box-sizing:border-box

how to remove box-sizing:border-box from element

css

border-box