CSS3實(shí)現(xiàn)寬高固定

在CSS3中，我們可以使用width和height屬性來(lái)固定一個(gè)元素的寬度和高度，這兩個(gè)屬性都接受一個(gè)具體的值，如像素、百分比等，或者auto關(guān)鍵字來(lái)自動(dòng)計(jì)算寬度或高度。

我們可以將一個(gè)元素的寬度設(shè)置為300像素，高度設(shè)置為200像素：

div {
  width: 300px;
  height: 200px;
}

或者，我們可以將一個(gè)元素的寬度設(shè)置為其容器寬度的50%，高度設(shè)置為自動(dòng)：

div {
  width: 50%;
  height: auto;
}

需要注意的是，如果我們將寬度設(shè)置為auto，那么瀏覽器會(huì)自動(dòng)計(jì)算寬度，通常是根據(jù)其內(nèi)容或周圍元素的情況，而如果我們將高度設(shè)置為auto，瀏覽器會(huì)根據(jù)寬度和內(nèi)容的實(shí)際情況來(lái)計(jì)算高度。

CSS3還引入了一個(gè)名為box-sizing的屬性，它決定了元素的寬度和高度是如何計(jì)算的，默認(rèn)情況下，元素的寬度和高度只包括其內(nèi)容、內(nèi)邊距和邊框，而不包括外邊距，如果我們?cè)O(shè)置box-sizing為border-box，那么元素的寬度和高度就會(huì)包括邊框和外邊距。

div {
  width: 300px;
  height: 200px;
  box-sizing: border-box;
}

在這個(gè)例子中，即使我們將寬度設(shè)置為300像素，但由于邊框和外邊距的存在，實(shí)際的寬度可能會(huì)稍微超出300像素，在使用box-sizing屬性時(shí)，我們需要謹(jǐn)慎地計(jì)算元素的寬度和高度。