摘要:在世界中,提出了的应用场景自适应布局或者是流式布局中才会出现,从最小和最大上面我们知道他们是具有边界行为的属性。在端开发的时候的使用起着很关键的作用。
在css世界中,提出了min/max-weight的应用场景:自适应布局或者是流式布局中才会出现,从最小和最大上面我们知道他们是具有边界行为的属性。
在现在的pc端开发中,为了适应各种不同分辨率的显示屏,min/max-width就会起到很关键的作用。
应用场景
下面列举一个自己遇到的小情况(电脑分辨率为1920*1080),正常情况如下:
当我们不设置min-weight的时候
乍眼一看,没什么变化,但是这也是理所当然的,最小宽度这个边界值还没有触发,当我们缩小屏幕的时候,就会出现下面的这种情况:
此时的页面布局就会出现错乱,导致很差的视觉效果
接下来我们恢复对边界值的设置,再来看下效果:
此时当我们达到我们设置的最小宽度的时候,页面就不会出现错乱情况了,max-weight的应用场景和其类似,有兴趣的可以自己实践下。
在pc端开发的时候min/max-weight的使用起着很关键的作用。
下面介绍书中的一些知识点:
min-height/min-width 的初始值为auto
max-height/max-width 的初始值为none
max/min-width 超越!Important,具有最高优先级
img { max-width: 256px; } <--此时图片的真实宽度应该为256px-->
超越最大
.container { min-width: 1400px; max-width: 1200px; }
从字面来来看,超越最大,一个容器的最小宽度竟然比最大宽度还打,超越最大意思不就是min超越max,因此容器的实际宽度为1400px。
上面就是自己对min/max-height/width的理解,很多在张鑫旭大佬的css世界中学习到了很多的东西,希望大家有时间可以看下,欢迎补充。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113641.html
摘要:在世界中,提出了的应用场景自适应布局或者是流式布局中才会出现,从最小和最大上面我们知道他们是具有边界行为的属性。在端开发的时候的使用起着很关键的作用。 在css世界中,提出了min/max-weight的应用场景:自适应布局或者是流式布局中才会出现,从最小和最大上面我们知道他们是具有边界行为的属性。 在现在的pc端开发中,为了适应各种不同分辨率的显示屏,min/max-width就会起...
摘要:我发现即使都是用的做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。流畅于流畅于其实这两个没法比,因为是直接缩放,会拉伸元素的,但如果用的是一个纯色的,倒是可以用。 我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。 transition支持的属性类型 首...
摘要:哪些属性可以继承哪些不可继承可继承属性字体系列属性组合字体规定元素的字体系列设置字体的粗细设置字体的尺寸定义字体的风格偏大或偏小的字体文本系列属性文本缩进文本水平对刘行高增加或减少单词间的空白增加或减少字符间的空白控制 CSS哪些属性可以继承哪些不可继承 可继承属性:1.字体系列属性font:组合字体font-family:规定元素的字体系列font-weight:设置字体的粗细fon...
摘要:一无继承性的属性规定元素应该生成的框的类型文本属性垂直文本对齐规定添加到文本的装饰文本阴影效果空白符的处理设置文本的方向盒子模型的属性,,,,,,,,,,,,,,,,,,,,,,,,,背景属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性:vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 ...
阅读 1009·2021-11-22 13:52
阅读 923·2019-08-30 15:44
阅读 569·2019-08-30 15:43
阅读 2423·2019-08-30 12:52
阅读 3472·2019-08-29 16:16
阅读 635·2019-08-29 13:05
阅读 2941·2019-08-26 18:36
阅读 1973·2019-08-26 13:46