本文目錄導(dǎo)讀：

1. 設(shè)置盒子的寬度
2. 設(shè)置盒子的高度
3. 使用百分比設(shè)置寬度和高度
4. 使用CSS函數(shù)設(shè)置寬度和高度

CSS盒子的寬度和高度設(shè)置是Web開發(fā)中的基礎(chǔ)技能，下面將介紹如何設(shè)置CSS盒子的寬度和高度。

設(shè)置盒子的寬度

在CSS中，可以使用width屬性來設(shè)置盒子的寬度，該屬性的值可以是像素、百分比或其他相對(duì)單位，將盒子的寬度設(shè)置為200像素，可以使用以下代碼：

width: 200px;

設(shè)置盒子的高度

與寬度類似，可以使用height屬性來設(shè)置盒子的高度，該屬性的值也可以是像素、百分比或其他相對(duì)單位，將盒子的高度設(shè)置為300像素，可以使用以下代碼：

height: 300px;

使用百分比設(shè)置寬度和高度

除了使用像素值外，還可以使用百分比來設(shè)置寬度和高度，這將使盒子的大小相對(duì)于其包含塊（通常是父元素）的寬度或高度，將盒子的寬度設(shè)置為父元素寬度的50%，可以使用以下代碼：

width: 50%;

使用CSS函數(shù)設(shè)置寬度和高度

CSS還提供了一些函數(shù)來計(jì)算盒子的寬度和高度。calc()函數(shù)可以用于計(jì)算兩個(gè)值之間的差值或乘積，從而動(dòng)態(tài)地設(shè)置盒子的寬度和高度，將盒子的寬度設(shè)置為父元素寬度減去盒子的左右邊距，可以使用以下代碼：

width: calc(100% - 2 * 10px);

上述代碼將盒子的寬度設(shè)置為父元素的100%減去左右邊距的20像素。

CSS提供了多種方法來設(shè)置盒子的寬度和高度，包括像素值、百分比、相對(duì)單位以及CSS函數(shù)等，***可以根據(jù)自己的需求選擇***適合的方法。