资讯专栏INFORMATION COLUMN

对min/max-width/height的认识

vibiu / 1256人阅读

摘要:在世界中,提出了的应用场景自适应布局或者是流式布局中才会出现,从最小和最大上面我们知道他们是具有边界行为的属性。在端开发的时候的使用起着很关键的作用。

在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/52793.html

相关文章

  • min/max-width/height认识

    摘要:在世界中,提出了的应用场景自适应布局或者是流式布局中才会出现,从最小和最大上面我们知道他们是具有边界行为的属性。在端开发的时候的使用起着很关键的作用。 在css世界中,提出了min/max-weight的应用场景:自适应布局或者是流式布局中才会出现,从最小和最大上面我们知道他们是具有边界行为的属性。 在现在的pc端开发中,为了适应各种不同分辨率的显示屏,min/max-width就会起...

    CKJOKER 评论0 收藏0
  • css3动画在手机端流畅度比较

    摘要:我发现即使都是用的做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。流畅于流畅于其实这两个没法比,因为是直接缩放,会拉伸元素的,但如果用的是一个纯色的,倒是可以用。 我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。 transition支持的属性类型 首...

    TwIStOy 评论0 收藏0
  • CSS哪些属性可以继承哪些不可继承 与 CSS优先级算法

    摘要:哪些属性可以继承哪些不可继承可继承属性字体系列属性组合字体规定元素的字体系列设置字体的粗细设置字体的尺寸定义字体的风格偏大或偏小的字体文本系列属性文本缩进文本水平对刘行高增加或减少单词间的空白增加或减少字符间的空白控制 CSS哪些属性可以继承哪些不可继承 可继承属性:1.字体系列属性font:组合字体font-family:规定元素的字体系列font-weight:设置字体的粗细fon...

    lemanli 评论0 收藏0
  • 前端基础之--css中可被继承和不可被继承属性

    摘要:一无继承性的属性规定元素应该生成的框的类型文本属性垂直文本对齐规定添加到文本的装饰文本阴影效果空白符的处理设置文本的方向盒子模型的属性,,,,,,,,,,,,,,,,,,,,,,,,,背景属性一.无继承性的属性   1.display:规定元素应该生成的框的类型   2.文本属性:vertical-align:垂直文本对齐       text-decoration:规定添加到文本的装饰  ...

    LeexMuller 评论0 收藏0
  • CSS属性速查表

    摘要:前面的话本文将按照布局类属性盒模型属性文本类属性修饰类属性这四个分类,对常用属性进行重新排列,并最终设置为一份文件布局类定位浮动多列布局栅格布局显示网格网格线隐式网格前面的话   本文将按照布局类属性、盒模型属性、文本类属性、修饰类属性这四个分类,对CSS常用属性进行重新排列,并最终设置为一份stylelintrc文件   布局类   1、定位 position z-index top b...

    thursday 评论0 收藏0

发表评论

0条评论

vibiu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<