运行一下

CSS width and height

CSS中的width属性可以定义元素的宽度；height属性可以定义元素的高度。

width和height属性的取值有如下几种方式：

• 具体的数值加单位 - 比如px、pt、cm等
• % - 百分比
• auto - 默认为auto取值，代表浏览器会自动计算高度和宽度

div {
    height: 200px;
    width: 49%;
    background-color: LightBlue;
}

运行一下

---

Height和Width属性设置的高度和宽度，并不会包括padding（内边距）、border（边框）、margin（外边距）所占空间。除非对此进行特殊设置，如将box-sizing属性设置成border-box取值，则宽度会涵盖padding（内边距）所占空间范围。

---

使用max-width属性

CSS中的max-width是一个很常用且实用的属性，用来定义元素的最大宽度。

max-width属性的取值有如下几种：

• 具体的数值加单位 - 比如px、pt、cm等
• % - 百分比
• none - 默认为none取值,即不设置最大宽度的限制

适合使用max-width的场景很多，比如专否引入图片就经常用到max-width，因为有些图片本身的宽度是很宽的，会超过外部div的宽度；而有些图片的宽度又比较小，显示图片本身的像素宽度即可；因此这里很是机动灵活，因此只设置一下max-width即可，因为小图片会显示自身宽度，而大图片超过外部div宽度但因为max-width被设置为100%，所以图片的宽度就会等价于100%了。

再举一个例子，下方这个蓝色背景的div元素，width被设置成了400px，在PC端网页版会表现成400px的宽度，而手机版往往手机屏幕的宽度都会小于400px，于是则会触发预设的max-width:100%，因此在手机版上下面这个蓝色背景的div则会表现出宽度等于外部div元素100%宽度。

简而言之：当width属性的值超过max-width的值，width的值则会被max-width的值所覆盖。

div#inner_box{
    width: 96%;
    max-width: 400px;
    background-color: LightBlue;
    height: 240px;
}

运行一下

---

既然已经知道了max-width属性，那么max-height属性、min-width属性、min-height属性依次类推。