文章目录1. 前言2. 默认尺寸3. 设定元素的宽度和高度4. 指定最大、最小宽度5. 指定最大、最小高度6. 小结1. 前言尺寸这个词想必是比较好理解的因为买衣服的时候都得讲究一个尺寸。具体到网页设计上尺寸就是指的元素的大小再说的明白一点就是指的元素的宽度和高度。通过CSS可以设定元素的宽度、高度本篇就来具体介绍下。2. 默认尺寸为了能体现元素到底占有多大地方需要给元素设定一个边框这样才能看到边界。所以代码如下.box-border{border:1px solid black;}当元素具备box-border样式类时该元素就有边界了我们能看到它所占的宽度、高度。接下来我们看一下元素默认会占有多大的尺寸pclassbox-border默认尺寸/p上述代码为p段落设置了边框但是并未明确指定宽度、高度其效果如下通过上述效果我们可以看出默认情况下元素宽度会占满上级元素的宽度而元素高度会根据内容的高度决定。3. 设定元素的宽度和高度我们可以通过width/height设定元素的宽度、高度pclassbox-border fixed-size设置宽度和高度/p对应CSS代码.fixed-size{width:200px;height:40px;}上述代码明确制订了.fixed-size选择的元素的宽度为200px高度为40px所以该区域的高度和宽度是明确确定的不会随窗口大小变化。4. 指定最大、最小宽度可以通过max-width、min-width设定元素的宽度范围此时元素宽度可以变化但是只能在指定的范围内变化。如下pclassbox-border max-min-width设置最大、最小宽度/pCSS代码.max-min-width{max-width:100px;min-width:80px;}效果如下在这个例子中由于我们设定了最大宽度100px而全部文字宽度超出了100px所以出现了换行保证元素占有的宽度最大只能到100px。同样的如果窗口缩到很小该元素也会至少占有80px的宽度空间。5. 指定最大、最小高度可以通过max-height/min-height设置元素的最大、最小高度pclassbox-border max-min-height设置最大、最小高度;设置最大、最小高度;设置最大、最小高度;设置最大、最小高度;设置最大、最小高度/pCSS代码.max-min-height{max-height:30px;min-height:10px;}对应效果如下由于最大高度已经设置为30px所以文字内容再多也不会改变元素的高度最终导致文字溢出了p元素占有的空间。6. 小结一般情况情况下大家能理解max/min/max-width/min-widht/max-height/min-height这些样式代码的含义即可。入门阶段能够自己编写max/min指定元素大小就差不多了。