登录  /  注册
博主信息
博文 128
粉丝 9
评论 5
访问量 230887
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【CSS入门】理解css中min-width和max-width,width与它们之间的区别联系
 一纸荒凉* Armani
原创
1939人浏览过

css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替,尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系:

min-width 最小宽度 当窗口小于最小宽度时,将出现滚动条
max-width 最大宽度 顾名思义,最宽只能这么宽

1、min-width,max-width的权重高

当元素设置了这2个属性的时候,即使在width后面使用了!important,如果元素实际宽度没在min-width,max-width的范围内,也不会显示width中的值,例如:

  1. div{
  2. min-width: 600px;
  3. width: 400px !important;
  4. }

该div任然显示600px的宽度。

  1. div{
  2. max-width: 400px;
  3. width: 600px !important;
  4. }

这里显示400px的宽度。

2、min-width与max-width值的大小出现冲突

当min-width的值大于了max-width的值的时候,元素最终的宽度显示min-width的值,例如:

  1. div{
  2. max-width: 400px;
  3. min-width: 600px;
  4. }

这里元素将显示600px的宽。

3、利用max-width可以实现元素逐渐变宽的效果

当我们不知道元素的具体宽度,可以结合transition来实现动画延迟效果,如下:

  1. div{
  2. max-width: 0;
  3. overflow: hidden;
  4. transition: max-width 0.25s;
  5. }
  6. div.active {
  7. max-width: 600px;
  8. }

总结:

min-height和max-heigth也同样类似, 在不知道元素具体区域宽高的时候,使用这些属性能很好让网站实现自适应效果。

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学