min-width属性(CSS设置)

发布时间：2021-10-04 17:10 所属分类：热门主题浏览次数：

　　min-width属性

　　最小宽度min-width与最大宽度max-width款式有什么作用？最小宽度最大宽度用于什么地方呢？如何使用？

　　在DIV+CSS布局中网页中插入htmlimg图片

　　接下来DIVCSS5让大家学会掌握min-width与max-width根底语法结构以及经过事例学习用法。

　　min-widthmax-width目录

　　根底语法结构

　　实践使用地方

　　用法事例

　　总结

　　一、CSS根底语法结构-TOP

　　min-width与max-width后面均跟详细数字+html单位

　　min-width:50px最小宽度为50px

　　max-width:50px最大宽度为50px

　　CSS款式结构

　　div{min-width:50px}

　　div{max-width:50px}

　　扩展阅览

　　1、cssmin-height

　　2、cssmax-height

　　3、csswidth

　　4、cssheight

　　二、实践使用说明-TOP

　　最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度约束比较多。比方一个图片为主列表，目标里图片巨细不定时分，为了不想让他太小不统一这个时分咱们可以使用css最小宽度款式。再如，一个盒子里有文章有图片混排的时分，有时图片宽度不能确认，这个时分假如htmlimg图片宽度超出了div盒子宽度，或许图片就会撑破div盒子造成图片混乱。

　　扩展阅览：

　　1、css设置图片高度宽度

　　2、CSS处理图片过大撑破DIV网页

　　3、cssimg

　　4、htmlimg标签

　　三、min-width与max-width用法事例-TOP

　　咱们设置2个div盒子，分别设置最大与最小宽度款式、同时设置css边框为1pxcss色彩为红色的实线盒子、css高度为100px。第一和第二个盒子CSS命名分别为divcss5-min-width、.divcss5-max-width；第一个盒子内图片原图片巨细为宽为165px高度60px；第二个盒子内图片原图片巨细为宽度为375px高度65px。

　　1、事例css代码

　　.divcss5-min-width,.divcss5-max-width{height:100px;border:1pxsolid#F00}

　　.divcss5-min-widthimg{min-width:200px}

　　.divcss5-max-width{margin-top:10px}

　　/*css注释：margin-top设置divcss5-max-width目标上间距为10px*/

　　.divcss5-max-widthimg{max-width:200px;}

　　2、CSS+DIV事例html源代码片段

原图片巨细：

<imgsrc="http://www.divcss5.com/img201301/divcss5-logo-2013.gif"/>

宽为165px高度60px

<imgsrc="http://www.divcss5.com/img201301/topad1.gif"/>

　　宽度为375px高度65px

　　事例如下：

<divclass="divcss5-min-width">

<imgsrc="http://www.divcss5.com/img201301/divcss5-logo-2013.gif"/>

　　div>

<divclass="divcss5-max-width">

<imgsrc="http://www.divcss5.com/img201301/topad1.gif"/>

　　div>

　　3、事例在浏览器作用截图

　　cssdiv最小宽度最大宽度min-widthmax-width用法事例截图

　　cssdivMin-width与max-width事例作用截图

　　4、max-width最大宽度与min-width最小宽度事例小结

　　咱们设置两个盒子一个“divcss5-min-width”设置目标里img图片最小宽度为200px，而实践图片只要165px，所以图片被拉伸到200px；一个“divcss5-max-width”设置目标里img图片最大宽度为200px约束，而实践目标里图片宽度是375px，这个时分咱们设置了此图片最大宽度为200px,所以图片被CSSmax-height缩小到200px

　　四、max-width与min-width总结-TOP

　　Cssmax-width与cssmin-width可以同时在一个CSS选择器使用设置一个目标最大最小宽度款式。一般对图片目标设置此两项款式比较多，但在IE6中不支撑此两个属性，IE7及以上浏览器均支撑，这个时分咱们需要IE6支撑兼容CSSmin-width、ie6兼容max-width办法（http://www.divcss5.com/jiqiao/j298.shtml）。

　　CSS设置

　　CSS布景这儿指通过CSS对目标设置布景特点，如通过CSS设置布景各种款式。

　　布景语法：

　　background:background-color||background-image||background-repeat||background-attachment||background-position

　　CSS中布景单词：

　　backgroundCSS手册查询-background手册

　　background-color设置色彩作为目标布景色彩

　　background-image设置图片作为布景图片

　　background-repeat设置布景平铺重复方向

　　background-attachment设置或检索布景图像是随目标内容翻滚还是固定的。

　　background-position设置或检索目标的布景图像方位。

　　Background布景款式的值是复合特点值组合，也便是布景单词的值能够跟多个特点值，值与值之间运用一个空格间隔链接上即可。

　　如：

　　background:#000url(图片地址)no-repeatlefttop

　　Cssbackground布景作用：

　　1、设置纯色布景。布景background能够设置目标纯色的布景色彩，

　　2、设置图为布景。能够设置目标布景为图片，假如布景是图片能够让图片重复平铺横铺，或将图片作为目标布景固定在目标任何方位。

　　Background剖析解析图

　　background布景语法结构剖析图

　　Cssbackground复合布景结构剖析图

　　Body{background:#FFFurl(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)no-repeat00fixed}

　　设置网页布景款式

　　Html原始布景与CSS布景对照

　　Html是指对应作用的table布景设置

　　Html布景单词：

　　Bgcolor设置布景色彩与CSS布景色彩对应background-color

　　Background设置图片作为布景与CSS布景图片对应background-image

　　最原始HTML布景设置演示代码：

<tablebgcolor="#996600">

<tr>

<tdbackground="http://www.divcss5.com/img/css-logo.gif"

　　width="130"height="100">td>

　　tr>

　　table>

　　这儿设置了table布景色彩为#996600，然后设置了td的布景图片为http://www.divcss5.com/img/css-logo.gif

　　二、布景色彩-TOP

　　background-color:#FFF

　　div{background-color:#FFF}

　　设置目标布景为纯白色

　　假如是给table设置布景色彩能够运用bgcolor="色彩值"即可设置目标布景色彩。

　　假如是CSS布景色彩，可运用background-color:色彩值;或background:色彩值设置目标布景色彩。

　　CSS布景色彩设置DIV+CSS演示图：

　　html布景，CSS布景实例演示

　　以上截图别离运用background-color和background来设置目标布景色彩

　　三、CSS图片布景-TOP

　　这儿说的是以图片作为布景图片-CSS布景图片详细介绍：http://www.divcss5.com/jiqiao/j80.shtml

　　CSS能够运用background或background-image直接引证图片地址来设置图片作为目标布景。

　　background:url(http://www.divcss5.com/img/logo.gif);设置DIVCSS5的LOGO图片作为布景

　　或

　　background-image:url(http://www.divcss5.com/img/logo.gif);具有相同作用。这样设置图片作为布景有个缺陷便是图片会上下左右的重复，接下来咱们只需看以下图例教程即可把握CSSbackground

　　CSSbackground解剖图

　　图片布景款式（固定、翻滚）

　　完成这个作用运用CSS单词是background-attachment当然通常情况下布景默认是固定的假如是自己运用CSSbackground简写则如上图。

　　background-attachment运用解析：

　　background-attachment:fixed；布景固定

　　background-attachment:scrollcss布景图片是随目标内容翻滚

　　图片background布景语法：

　　background-image:url(url)

　　background-image:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif）设置目标布景为图片http://www.divcss5.com/img201301/divcss5-logo-2013.gif

　　假如图片作为布景时分要求是否重复平铺，平铺方向等咱们都需求background-position和background-repeat合作运用

　　div{background-image:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif);

　　background-repeat:no-repeat;background-position:5px6px}

　　这儿界说目标div，布景图片为http://www.divcss5.com/img201301/divcss5-logo-2013.gif，而且布景图片不重复，定坐落div目标靠左间隔5px，靠上间隔6px

　　四、DIVCSS布景居中-TOP

　　CSS布景分为左右居中和上下居中，具体左右居中方法见上图。

　　布景图像上下居中，能够运用计算上下高度然后平分设置，如上下高度间隔为500px，那就设置图片居顶部多少PX能够让图片完成上下居中。

　　五、复合布景款式简写-TOP

　　咱们运用时分都需求考虑到代码优简，这儿能够优化的简写代码

　　1、假如只设置布景为单一色彩

　　background-color:#FFF咱们简写为background:#FFF

　　2、图片设置为布景简写

　　background-image:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif);

　　background-repeat:no-repeat;background-position:5px6px

　　咱们简写为：

　　background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)no-repeat5px6px

　　六、CSSbackground（布景）总结-TOP

　　运用图片作为布景在一个网页布局中常常会遇到，期望大家能在实际中把握其知识。一般设置目标图片作为布景特点实例background:#666url(图片地址)no-repeatcentertop;（解说首先设置布景色彩紧跟设置图片作布景紧跟图片是否重复然后跟图片在目标方位。前面的布景色彩能够不必设一起不是必须，一般运用图片作为目标布景假如要设置图片是否重复显现间隔方位将设置图片方位）

　　1、设置图片作为布景假如图片设置图片在X坐标方向重复，假如再设置图片在目标方位的左或右方位时将无效，可设置在目标上或下方位开端显现。

　　2、设置图片作为布景假如图片设置图片在Y坐标方向重复，假如再设置图片在目标方位的上或下方位时将无效，可设置图片在目标左或右方位开端显现。

　　3、假如设置布景完全重复显现，那设置图片在目标上下左右方位开端显现将无线。

　　网页布局时分咱们常常对网页布景设置色彩、布景设置图片，到达咱们需求的美观作用，咱们实践制作写cssbackground布景尽量从简，图片引进时分留意路径正确，如需定位目标布景。

　　经典布景复合特点表达式：

　　.divcss5{background:#FFFurl(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)no-repeat5px6px}

　　这儿既设置布景色彩，布景图片引进，布景图片定位、图片作为布景是否重复的款式。