对网页样式的设置一个基本的需求就是对各元素的尺寸进行设置，设置元素的宽度和高度。
width 属性和 height
calc() 设置计算值。
1、数值设定
通过使用确定的数值加上单位的形式进行设置：
<html>
<head>
<meta charset="utf-8">
<title>CSS尺寸设置</title>
<style type="text/css">
div {
border: 1px solid black;
}
.container {
width: 500px;
height: 500px;
background-color: red;
}
.item {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>页面效果：
.container 和 .item 样式都使用确定的数值指定了元素的尺寸， width: 500px; 指定了元素宽度500像素。height: 500px; 指定了元素高度500像素。
px(像素)。其他单位本篇不做介绍。
2、百分比设置
.item 选择器对应样式中的 width 和 height 都设置成 40%：
.item {
width: 40%;
height: 40%;
background-color: green;
}.item 元素的尺寸仍然是 200px 乘以 200px，即按照其父级容器的宽度和高度乘以对应设置的百分比。
3、calc方法计算
calc方法进行计算，将上述代码中 .item 选择器对应样式中的 width 设置为 calc(40% + 50px);：
.item {
width: calc(40% + 50px);
height: 40%;
background-color: green;
}页面效果：
.item 的元素的宽度为 250px， 即上级元素的宽度 500px 乘以 40% + 50px。
calc()方法支持 “+”, “-”, “*”, “/” 运算
calc()方法使用标准的数学运算优先级规则
+” 两侧都保留有一个空格。
4、尺寸溢出
.item 元素，则 .container 元素的尺寸就不足以容纳其子级元素的高度，可以称为 .container
可以看到，默认情况下子级元素超出了父级元素的范围，显示到了外面。
CSS可以对容器的溢出情况进行显示控制，设置的属性有：
overflow： 同时针对水平方向和垂直方向进行设置。
overflow-x：只针对水平方向进行设置。
overflow-y：只针对垂直方向进行设置。
溢出设置可以设置的值有：
visible：此时子元素会显示到父级元素外面，如上图所示。
auto：会自动比较子元素和父元素的尺寸判断是否出现滚动条进行滚动显示。
scroll：始终出现滚动条
hidden：隐藏子元素超出父元素尺寸的部分，不出现滚动条
inherit：从父元素继承对应值
.container 添加 overflow-y
.container {
width: 500px;
height: 500px;
background-color: red;
overflow-y: auto;
}overflow-y: auto;
此时减少一个子元素，页面就不会出现滚动条：
overflow-y: scroll;
overflow-y: hidden; 时页面效果：
5、自动尺寸
width 或 height 的值为 auto，使其拥有自动的宽度或高度，即宽度或高度自动跟随子级元素的尺寸而变化。当然也可以同时设置 width 和 height 为 auto
本篇只演示height设置为自动高度的情况：
<html>
<head>
<meta charset="utf-8">
<title>CSS自动尺寸</title>
<style type="text/css">
div {
border: 1px solid black;
}
.container {
width: 500px;
height: auto;
background-color: red;
}
.item {
width: calc(40% + 50px);
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>页面效果：
可以看到父级元素的高度自动被子级元素的高度撑开，此时减少一个子级元素：
auto时，可以设置对应方向尺寸的最大最小值：
min-height：设置元素的最小高度
max-height：设置元素的最大高度，根据此高度判断是否发生高度溢出
min-width：设置元素的最小宽度
max-width：设置元素的最大宽度，根据此高度判断是否发生宽度溢出
修改上述代码：
.container {
width: 500px;
height: auto;
min-height: 250px;
max-height: 350px;
overflow-y: auto;
background-color: red;
}200px，父元素高度为设置的min-height:250px;：
当子元素高度大于父元素设置的最小高度小于设置的最大高度时，父元素跟随子元素高度：
当子元素高度大于父元素最大高度时，产生溢出，按父元素设置的溢出规则进行显示：
div 元素进行了垂直方向上的演示， 其他元素及水平方向设置建议读者自行尝试。
width 和 height 生效必须先手动将其设置为行块级元素（设置 display:inline-block;）。在使用百分比设置尺寸的时候必须确保父级元素有确定的尺寸。
