框大小(box-sizing)CSS3

Utilizzando la funzione di regolazione delle dimensioni del riquadro di CSS3, è possibile specificare la larghezza effettiva dell'elemento.

Ridefinire la larghezza del riquadro utilizzando la funzione box-sizing di CSS3

Per impostazione predefinita, la larghezza o l'altezza visibile dell'elemento nel sito web dipende da essawidthoheight,paddingeborderValore dell'attributo. Ad esempio, se si assegna un'ampiezza del 100% a<div>L'elemento ha applicato un margine interno e un bordo, quindi apparirà una barra di scorrimento orizzontale, come nell'esempio seguente.

.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;
}