CSS3 Boxgröße(box-Sizing)

Verwenden Sie CSS3Die Funktion zur Anpassung der Boxgröße, mit der Sie die effektive Breite des Elements angeben können.

Verwenden Sie Boxgröße(box-Sizing) die Boxbreite neu definieren

Standardmäßig ist der Box des Elements sichtbar/der tatsächliche Breite oder die tatsächliche Höhe auf der Webseite abhängtwidthoderheight,paddingundborderEigenschaftswerte. Zum Beispiel, wenn Sie einem Element eine Breite von100% der<div>Das Element enthält einige Innenabstände und Ränder, daher erscheint eine horizontale Scrollleiste, wie im folgenden Beispiel gezeigt.

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　border:　5px　solid　#f08080;
}

这是Web设计人员长期面临的非常普遍的问题。但是，CSS3引入了box-sizing属性来解决此问题，并使CSS布局更加简单直观。该box-sizing属性以如下方式更改默认CSS框模型，即将元素上的任何元素padding或border指定的元素布局并绘制在内容区域内，以使元素的渲染宽度和高度等于指定的CSS width和height属性。

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　border:　5px　solid　#f08080;
　　　　box-sizing:　border-box;
}

如果看到此示例的输出，则会发现滚动条已消失。

使用Box-Sizing创建布局

通过CSS box-sizing属性，使用百分比创建多列布局变得非常简单。现在，您不必担心元素框的最终大小，而无需在其上添加边框或边框。

下面的示例将创建一个两列布局，其中每列具有相等的宽度，并使用float属性并排放置。

.box　{
　　　　width:　50%;
　　　　padding:　20px;
　　　　background:　#f2f2f2;
　　　　float:　left;
　　　　box-sizing:　border-box;
}

同样，您可以使用此简单技术创建更复杂的布局。

.box　{
　　　　width:　30%;
　　　　padding:　20px;
　　　　margin-left:　5%;
　　　　background:　#f2f2f2;
　　　　float:　left;
　　　　box-sizing:　border-box;
}
.box:first-child　{
　　　　margin-left:　0;
}