网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS尺寸属性.pptx

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。CSS3的属性CSS尺寸属性

目录CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题5

5.4CSS尺寸属性5.4.1宽度属性width语法：width:auto|lengthmargin-left+border-left+padding-left+width+padding-right+border-right+margin-right

5.4CSS尺寸属性5.4.2高度属性height语法：height:auto|length示例代码如下。div{height:2in;}div{position:absolute;top:-2px;height:5px;}

5.4CSS尺寸属性5.4.3最小宽度属性min-width语法：min-width:none|length示例代码如下。p{min-width:200px;}

5.4CSS尺寸属性5.4.4最大宽度属性max-width语法：max-height:none|length示例代码如下。p{max-height:200%;}

5.4CSS尺寸属性5.4.5最小高度属性min-height语法：min-height:none|length示例代码如下。p{min-height:200px;}

5.4CSS尺寸属性5.4.6最大高度属性max-height语法：max-width:none|length示例代码如下。p{max-width:200%;}

5.4CSS尺寸属性【例5-14】设置文本样式案例，本例文件5-14.html的显示效果，如图5-17所示。

5.4CSS尺寸属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8title尺寸属性/title/headbodyp图片原始尺寸宽度、高度为300px、200pximgsrc=images/sunshine.jpg---设置最大宽度150px，小于原来的宽度imgsrc=images/sunshine.jpgstyle=max-width:150px;/pp设置最小高度250px，大于原来高度imgsrc=images/sunshine.jpgstyle=min-height:250px;---设置宽度与高度，比例与原始比例不同imgsrc=images/sunshine.jpgstyle=width:50px;height:150px;/pdivstyle=width:200px;height:200px;p用百分比设置宽度和高度/pimgsrc=images/sunshine.jpgstyle=width:50%;height:50%;/div/body/html

祝贺你又学完了一章《网页设计与制作教程Web前端开发第7版》