资讯专栏INFORMATION COLUMN

CSS3 Resize简单探索

宠来也 / 1557人阅读

摘要:用户可调整元素的高度。不继承,大部分标签默认值是如果希望此属性生效,需要设置元素的属性,值可以是或。应该是只有最终表现形式是会导致这个属性失效。二浏览器支持度的支持性则较好上还有的回调,但基本没有浏览器支持。

一.属性

属性值:

描述
none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。

Tips:

不继承,大部分标签默认值是NONE

如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。
(应该是只有overflow最终表现形式是visible会导致这个属性失效。)

二.浏览器支持度:

CSS3 resize的支持性则较好

PS: DOM上还有resize的回调,但基本没有浏览器支持。

三.高宽调整

动态改变的时候,动态改变对应DOM上style的高宽

最小高宽由height/width或者min-width/min-height的最小值决定,并且style上的高宽不会小于这个最小值。

最大高宽由max-width/max-height决定,但style上的高宽可大于这个最大值。

结论:兼容性还行,给定高宽后只能比定值大,不能定值小,使用场景有局限性。

参考链接:http://www.w3school.com.cn/cs...

支持度判断链接:http://caniuse.com/#search=re...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112143.html

相关文章

  • CSS3 Resize简单探索

    摘要:用户可调整元素的高度。不继承,大部分标签默认值是如果希望此属性生效,需要设置元素的属性,值可以是或。应该是只有最终表现形式是会导致这个属性失效。二浏览器支持度的支持性则较好上还有的回调,但基本没有浏览器支持。 一.属性 属性值: 值 描述 none 用户无法调整元素的尺寸。 both 用户可调整元素的高度和宽度。 horizontal 用户可调整元素的宽度。 ve...

    Anleb 评论0 收藏0
  • 关于移动端 rem 布局的一些总结

    摘要:所有权保留,请勿用于商业目的。年月日补充写过这篇博客之后,又陆续读过几篇关于布局的文章。移动开发在必要情况的下,可以适当使用来调整字体大小,但做成完全自适应则是一种存在问题的做法。 本文作者: 文蔺本文地址: http://www.wemlion.com/2015/a...本文由 @文蔺 创作,转载请保留此声明。 所有权保留,请勿用于商业目的。 【资源一】基础知识恕不回顾 基础知识参考...

    2shou 评论0 收藏0
  • 前端面试之CSS3新特性

    摘要:和这三个特性是新增的和动画相关的特性。使用方式如下和变换类型可以有各种变换类型,即属性值定义不进行转换。设置列之间的宽度样式和颜色规则和和用户界面中,新的用户界面特性包括重设元素尺寸盒尺寸以及轮廓等。 除了html5的新特性,CSS3的新特性也是面试中经常被问到的。 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。 element1~...

    glumes 评论0 收藏0

发表评论

0条评论

宠来也

|高级讲师

TA的文章

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