这篇文章发布于 2016年05月20日,星期五,02:06,归类于 css相关。 阅读 2276 次, 今日 154 次
by zhangxinxu from http://www. 一、为何要蹦出这些新玩意?在CSS3的世界里, 想必很多小伙伴都没见过。不知大家有没有跟我一样的感觉,去厕所蹲了个大号,再回到办公室就会遇到之前没见过的前端新特性。 像我这种只学HTML和CSS都有些应接不暇,我想,那些CSS3, HTML5, ES6/ES7, React, Angular, bootstrap, postcss, node都会的小伙伴,应该每天都只睡3-4个小时吧,好厉害! 凡是存在就有其道理。那为何规范里要给稀松常见的 大家说我是先讲各个属性值表示的含义,还是先讲讲为什么要弄这些新属性值呢? 一番深思熟虑,我决定……先讲讲兼容性……
基本上,移动端已经可以愉快地使用了。 据我测试,目前还离不开私有前缀,例如: .min-content { width: -webkit-min-content; width: -moz-min-content; width: min-content; } 好了,要开始往深的地方讲了。 虽然,作为名词 二、CSS2.1的尺寸体系在CSS2.1的世界中,常见的尺寸分为这几类: 2. 收缩与包裹 3. 收缩到最小 大家空间都不够的时候,文字能断的就断,中文是随便断的,英文单词不能断。于是乎,第一列被无情地每个字都断掉,形成一柱擎天。这种行为称之为“preferred minimum width”或者“minimum content width”。 也就是本文的重点角色之一 4. 超出容器限制 例如下面: .box { display: inline-block; width: 100px; height: 20px; padding: 10px; background-color: #f0f3f9; white-space: nowrap; } 尺寸主动超过容器宽度,恰如一江春水向东流。
// ——— 有必要来根低调的分隔线 ———- 好了,至此,大家会发现, 下面问题来了,既然CSS2.1这些特性都有了,那还要额外弄一些新值过来干嘛呢?岂不是白白增加学习成本啊? 我认为有3个好处:
我们下面不妨一边了解下各个 三、理解width:fill-available
出现 div { display:inline-block; width:fill-available; } 此时,元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性。于是,(例如)我们就可以直接使用 您可以狠狠地点击这里:CSS3 width:fill-available下的垂直居中demo 完整关键CSS代码如下: .box { height: 200px; /* 行高控制垂直居中 */ line-height: 200px; } .fill-available { /* 元素内联,响应行高和vertical-align控制 */ display: inline-block; vertical-align: middle; /* 宽度如块状元素般表现 */ width: -webkit-fill-available; width: -moz-fill-available; width: -moz-available; /* FireFox目前这个生效 */ width: fill-available; } 正如上面注释所提到的,FireFox浏览器下,目前(2016-05-20)不是标准的 四、理解width:max-content
不懂没关系,我们看一个对比示例,保证立马就知道! 您可以狠狠地点击这里:CSS3 width:max-content对比测试demo 这是一个 会发现, 五、理解width:min-content
首先,我们要明白这里的“最小宽度值”是什么意思。替换元素,例如图片的最小宽度值就是图片呈现的宽度,对于文本元素,如果全部是中文,则最小宽度值就是一个中文的宽度值;如果包含英文,因为默认英文单词不换行,所以,最小宽度可能就是里面最长的英文单词的宽度。So,大家明白的说。 还没完全弄懂没关系,我们看一个对比例子,您可以狠狠地点击这里:CSS3 width:min-content对比demo 同样的是和 在本例子中,图片的宽度最小值是256像素,不能再缩了;而文字的最小宽度值是字符 下图为对比效果截图: 六、理解width:fit-content
OK,然后,有小伙伴会疑问,既然跟很多CSS声明有一样的表现,那为什么还要再弄个新东西呢? 就拿水平居中效果举例,首先浮动肯定不行,因为只有左浮动和右浮动;绝对定位压根不占据空间,普通流中根本无法应用,而 而 您可以狠狠地点击这里:CSS3 width:fit-content使用与margin auto下水平居中demo 结果,简简单单就居中了,也不要担心其他元素会跟在后面一行显示了: 七、结束语CSS中的元素尺寸分为两类,一类叫做“内部尺寸”,英文写作”Intrinsic Sizing”,尺寸由内部元素决定;还有一类叫做“外部尺寸”,英文写作”Extrinsic Sizing”,宽度由外部元素决定。 考考大家: 看本文之前难度90,看完本文之后,难度10. 如果你觉得还是很难,建议再看一遍,然后不断递归。 好了,其他废话就不多说了,感谢阅读,欢迎交流!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。 (本篇完) 如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右): 相关文章
标签: css3, fill-available, fit-content, inline-block, max-content, min-content, table-cell, width |
|