CSS3四个自适应关键字——fill-available、max-c…
2018-06-24 01:51:13来源:未知 阅读 ()
前面的话
一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ,还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字
[注意]IE浏览器不支持,webkit内核浏览器需添加-webkit-前缀
fill-available
width:fill-available表示撑满可用空间
举例来说,页面中一个<div>
元素,该<div>
元素的width
表现就是fill-available
自动填满剩余的空间
出现fill-available
关键字值的价值在于,可以让元素的100%自动填充特性不仅仅在block
水平元素上,也可以应用在其他元素
下面的例子中,inline-block元素宽度撑满了可用宽度
<style> div{ background-color: pink; display:inline-block; width:-webkit-fill-available; } </style> <div>小火柴的蓝色理想</div>
类似地,高度也有此特性
下面的例子中,div元素高度撑满了可用高度
<style> div.inner{ background-color: pink; height:-webkit-fill-available; } </style> <div style="height: 100px;"> <div class="inner">小火柴的蓝色理想</div> </div>
【等高布局】
于是,利用fill-available可以轻松地实现等高布局
<style> .inner{ width:100px; height:-webkit-fill-available; margin:0 10px; display: inline-block; vertical-align: middle; background-color: pink; } </style> <div style="height: 100px;"> <div class="inner">HTML</div> <div class="inner">CSS</div> <div class="inner">JS<br>jQyery<br>Vue</div> </div>
fit-content
width:fit-content表示将元素宽度收缩为内容宽度
下面是一个实例
<style> div{ background-color: pink; width:-webkit-fit-content; } </style> <div>小火柴的蓝色理想</div>
【水平居中】
width:fit-content
可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto
实现元素向内自适应同时的居中效果了
<style> div{ background-color: pink; width:-webkit-fit-content; margin:auto; } </style> <div>小火柴的蓝色理想</div>
类似地,高度也有此特性,但不常用
min-content
width:min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度
首先,要明白这里的“最小宽度值”是什么意思。替换元素,例如图片的最小宽度值就是图片呈现的宽度,对于文本元素,如果全部是中文,则最小宽度值就是一个中文的宽度值;如果包含英文,因为默认英文单词不换行,所以,最小宽度可能就是里面最长的英文单词的宽度
<style> .outer{ width:-webkit-min-content; } </style> <div class="outer"> <div style="height:10px;width:100px;background:lightgreen"></div> <div style="background-color: pink;">小火柴的蓝色理想</div> </div>
max-content
width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本,则相当于文本不换行
<style> .outer{ width:-webkit-max-content; border:1px solid black; } </style> <div class="outer"> <div style="height:10px;width:100px;background:lightgreen"></div> <div style="background-color: pink;">小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想</div> </div>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash