CSS特性探秘系列(5):min

日期:2021-03-06 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

1、基础含意
min-width 特性为给定元素设定最少宽度。它能够阻拦 width 特性的运用值小于 min-width 的值。min-width 的值会另外遮盖 max-width 和 width。

2、可赋值
常见百分比、固定不动px|em|ex等,别的特性值如max-content,min-content适配性很不太好。

div{min-width:100em;}

div{min-width:800px;}

……

3、适配性
IE7+,常见当代访问器,有关IE6的适配解决,提议应用js操纵,IE6将慢慢撤出前端开发舞台。

4、运用
常见在百分比宽度合理布局中,放缩访问器对话框,以防对话框很小时危害网页页面的合理布局 美观大方。

有关特性:max-width,min-height,max-height

大家在做合理布局设计方案时,常常有这样的合理布局,两侧或1边是导航栏类专用工具栏 ,正中间是內容地区。
 
但大家期待正中间的内地区可以全自动融入,伴随着不一样的辨别率和访问器的尺寸全自动融入高宽比和宽度,以得到较好的显示信息实际效果。
 
大家假定正中间的內容地区是个div,假如大家不确立设定它款式的width特性,它是能够全自动融入的,按说这考虑了规定。
 
可是当访问器的宽渡过小时,小到早已不可以齐整的显示信息大家的內容,网页页面的显示信息就会错乱不堪入目。
 
这时候大家能够为该內容div设定1个min-width,例如在css中:


拷贝编码
编码以下:

#content{
min-width:600px;
}

 这个特性的作用就像它的姓名1样简易:最少宽度。该div還是全自动融入宽度,但它多了个标准,当它自融入的宽度小于设定的最少宽度时,就会把该div的宽度设定为最少宽度,已不全自动融入。
 
这个特性在firefox和ie7中是可使用的,但在ie6中不适用,大家能够用下面这段编码替代:


拷贝编码
编码以下:

#content{
_width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');
}

 前面的这段:


拷贝编码
编码以下:

((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700

 只是个判断标准,判断网页页面body的宽度,这里的是,假如网页页面body的宽度小于700(这个要依据实际的网页页面来特定),就把content的宽度特定为600,不然就让它自融入宽度。
 
实际上min-height也同理!

上一篇:css3的transition特性详解 返回下一篇:没有了