search

Home  >  Article  >  Web Front-end  >  CSS3:box-sizing: No more worrying about the box model_html/css_WEB-ITnose

CSS3:box-sizing: No more worrying about the box model_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:38:291151browse

Off topic:

The standard pursued by W3C is content-box, which requires calculation of borders, padding and content; but personally,
I prefer the traditional IE6 Weird mode, no need to consider whether the container will be stretched (disrupting the layout);

Box model differences

Box size calculation principle

W3C standard box = (border padding content block size), drag Moves the whole body in one move;
Traditional IE6 box = overall width and height (border, padding and adjustment with the size of the box)

If the occupied position is calculated, both boxes must include margin (Margin)

In short, the W3C standard box needs to add various sizes to get the overall width and height, while traditional IE6 subtracts the intrinsic element size from the whole to achieve the adjustment effect

CSS3: box-sizing

box-sizing : content-box | border-box | inherit;, there is also a padding-box for Firefox, which is almost useless!!!

  • content-box: Standard W3C box model
  • border-box: Traditional IE6 box model
  • padding-box: Currently only effective for Firefox, it is also minus the adaptation...but Start with padding
    • Verification and effect

    Code

    Simple code, three boxes

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>box-sizing</title>    <style> .demo1,.demo2,.demo3{ width:200px; height:200px; background-color: #2277AD; margin:20px; } .demo1{ box-sizing: content-box; border:30px solid #12D732; padding:10px; } .demo2{ box-sizing: border-box; border:30px solid #12D732; padding:10px; } .demo3{ box-sizing: padding-box; border:30px solid #12D732; padding:10px; } </style></head><body>    <div class="demo1">        我是盒子内部的内容啊!!    </div>    <div class="demo2">        我是盒子内部的内容啊!!    </div>    <div class="demo3">        我是盒子内部的内容啊!!    </div></body></html>

    Rendering

  • Standard model box size (280X280) = 200 10*2 30*2 ? Additive effect

  • Traditional IE6 box size (200X200) = 120 10 * 2 30*2 ? Subtract the effect from padding starts

    • Summary
  • This attribute supports IE8, and other browsers basically support it (there should be very few people using very old FF, CHROME, etc.)
    • I feel that border-box is very suitable for typesetting and layout, because you don’t have to worry about padding, which will cause the box to be larger than the wrapping layer size, cause line breaks, or other messy problems

    Standard boxes also have their advantages. The size of the content block can be controlled in a targeted manner... Very detailed adjustments are required, but the calculation is more troublesome
      3. Copyright statement: This article is an original article by the blogger and has not been published yet. No reproduction is allowed without the permission of the blogger.
    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Web font effects code_html/css_WEB-ITnoseNext article：Web font effects code_html/css_WEB-ITnose

    Related articles

    See more