aspect-ratio让元素保持固定的高宽比例，很实用，本文会详细介绍该属性在各种场景下的尺寸表现，相信会对您的学习有所帮助的。
文章关键字 ‘height’
Chrome 88已经支持aspect-ratio属性了，学起来
2021年02月17日，星期三canvas HTML属性尺寸和CSS尺寸多个细节深入
2018年07月8日，星期日原本以为canvas元素尺寸和img元素一样，结果深入一研究发现，还是有不少差异的，有兴趣可以进来看看，说不定可以学到点东西。
HTML textarea cols,rows属性和宽度高度关系研究
2016年02月4日，星期四<textarea>元素，俗称“文本域”，或者“多行文本框”，其自带原生的HTML属性rows表示行的意思，可以改变<textarea>的可视区域高度，cols表示列，可以改变<textarea>的可视区域宽度。
下面问题来了，我想很多小伙伴知道cols和rows可以影响文本域的尺寸，那cols和rows不同的数值和最终展示的像素尺寸之间有没有什么关系呢？可不可以通过公式计算呢？最终表现是否还受到其他CSS属性的影响呢？
本文就将解答上面的这些疑惑，一起进去看看吧~
CSS中height:100%和height:inherit的异同
2015年02月15日，星期日不知大家有没有相关CSS中height:100%和height:inherit的有什么异同？是否可以替换使用？height:inherit的价值在哪里？
本文就将回答这一系列问题，同样的，有截图，有demo，还有必要的源代码展示，总之希望本文的内容对您的学习有所帮助。
内容loading加载后高度变化CSS3 transition体验优化
2015年01月22日，星期四现在web技术不断发展，视图与数据渲染更多由前端呈现，后台更多与数据打交道。于是，我们会经常看到这样的交互场景。页面加载，看到一个框框里面有个菊花在转，然后内容呈现；或者点击个按钮，菊花在转，然后列表动态加载呈现。
确实，功能上OK，有菊花，用户也愿意等。但是，大家有没有觉得所有交互，出现菊花→出现内容，都是“砰砰砰”很生硬的感觉，尤其当内容是动态，高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉，整个交互流程都是很流畅的，就像山涧的泉水，涓涓细流到山脚，而不是巨人在峡谷走路的感觉。
所以，如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现，势必会增强用户体验。
而本文就将分享，我是如何渐进处理，让动画过渡呈现更自然的…… 必须的，demo，截图，源代码展示一个不少，希望本文的内容能够对您的学习有所帮助。
“更多|收起”交互中渐进使用transition动画
2012年10月19日，星期五虽然，web世界中，交互动画效果N多多，但是，很多都是约定俗成的，或者称之为“有固定套路的”。
根据David Kaneda创建的Transitions动画CSS代码，我们可以将效果归结为这几大类：slide(滑来滑去), fade(淡入淡出), flip(飞来飞去), pop(大大小小).
如居中弹框呈现与隐藏，适合pop效果；绝对定位浮动层（如智能提示下拉框，自定义时间选择控件）等的呈现与隐藏使用fade效果；幻灯片播放的广告位效果一般为slide效果；点击某商品飞入页面右下角或左上角的购物车就是flip效果（类似最新FireFox浏览器关闭标签页效果）。
而对于页面上，“展开更多|收起更多”这类交互……
CSSOM视图模式(CSSOM View Module)相关整理
2011年09月9日，星期五
就在8月份，也就是上次gf大姨妈来的时候，W3C出炉了CSSOM视图模块草案。CSSOM视图模块(CSSOM View Module)定义了一些 API，Web 开发人员使用这些 API 可以进行检查，也可以以编程方式更改文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动。
本文的内容就是将CSSOM视图模块相关的一些属性，方法等一个一个整理出来，包括兼容性，使用等等。每个API基本上都提供demo页面测试，使用的源代码展示等等。内容较多，请耐心阅读。相信本文的内容会对您的学习有所帮助的。
纯CSS实现侧边栏/分栏高度自动相等
2010年03月25日，星期四为了表现的美观或是一些功能的需要，我们经常希望侧边栏/分栏的高度保持一致。我们可能会使用min-height属性，IE6不支持min-height但是height会自动撑高，所以min-height + _height的组合也是常用手段之一；另外就是使用背景图片了，利用背景图片的垂直平铺，可以模拟分栏的等高背景效果，但是，此方法对布局宽度有一定的要求，如果布局宽度改变，背景图片可能也要做一番修改。但是这些方法都有局限性，没有从根本上解决问题。
本文就将真是分栏高度相等的的技术，使用margin负值实现任意分栏的高度自动相等。提供详尽的插图，代码示意。提供必要的demo，希望能对您的学习有所帮助。
CSS float浮动的深入研究、详解及拓展(一)
2010年01月21日，星期四保证是您没有见过的对浮动的原理本质研究最透彻的文章，没有之一。浮动专题内容较多，本篇是第一部分，重点分析了浮动的意义，深入研究了浮动显示的原理。本文内容较深，概念抽象，适合于一定CSS基础的人阅读，我尽量将我想表达的内容表述清楚，提供详尽的插图，必要的动画演示。多是个人观点，如有异议欢迎反驳。
css行高line-height的一些深入理解及应用
2009年11月28日，星期六
前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章，学到了不少东西，颇有感觉，于是决定结合自己的一些经验与理解写篇内容互补或者说是角度不同的文章吧。
本文核心重点在于inline box模型下的line-height高度问题，希望可以纠正css中对高度的正确认识，并依次展开列举了一些常见的有关line-height的应用，提供demo页面，希望对您的学习有所帮助。
我的应用
我的应用