CSS中的border-box和content-box有什么区别? [英] What is the difference between border-box and content-box in CSS?

问题描述

CSS中的border-box和content-box有什么区别? 在这两个方框之间，我不清楚.例如， box-sizing:border-box;和box-sizing:content-box; 两种样式的输出看起来相似.

What is the difference between border-box and content-box in CSS? I am not clearly understand between these two boxes. For example, box-sizing:border-box; and box-sizing:content-box; The output of the two styles look similar.

推荐答案

框大小: border-box ;使用人们与Internet Explorer关联的盒模型，其中填充和边框的尺寸包含在元素的尺寸中. ^(图片源)

While box-sizing: border-box; uses the box-model that people have come to associate with Internet Explorer, where the dimensions of the padding and border are included in the element’s dimensions. ^{(image source)}

示例:

^(图片源)

^{(image source)}

已添加演示.

$("#content").on("click", function() {
  $("*").css("box-sizing", $(this).text());
});

$("#border").on("click", function() {
  $("*").css("box-sizing", $(this).text());
});

.parent {
  width: 50%;
  border: 5px solid #E18728;
  float: left;
}

.child {
  width: 90%;
  padding: 20%;
  border: 4px solid black;
  margin: .5em auto;
}

.twins {
  width: 50%;
  padding: 1em;
  border: 4px solid black;
  float: left;
}


/* styling for Pen, not related to box-sizing or layout */

body {
  font-family: sans-serif;
  font-size: 1.1em;
}

.buttons {
  margin-bottom: .5em;
}

p:not(.intro) {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <p class="intro">Click the <code>border-box</code> button to fix the layout with the power of Box Sizing!</p>
  <button id="content">content-box</button>
  <button id="border">border-box</button>
</div>
<div class="parent">
  <p>Parent div with 50% width.</p>
  <div class="child">
    <p>Child div with 90% width, 4px black border, and 20% padding </p>
  </div>
  <div class="twins">
    <p>Child div with 50% width, 4px black border, and 1em padding</p>
  </div>
  <div class="twins">
    <p>Child div with 50% width, 4px black border, and 1em padding</p>
  </div>
</div>

这篇关于CSS中的border-box和content-box有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！