japlus的博客

CSS -webkit-scrollbar 搭配flex时，滚动条按钮会显示两个

<div id="outer" style="height: 200px;overflow: auto; width:100px"> <div id="inner" style="height:100%"> <div style="line-height: 50px">0</div> <div style="line-height: 50px">1</div> <div s.

border，dashed 设置大一点就变成最大化图标了 <div style="box-sizing:border-box;width: 100px;height: 100px;background-color:#eee;border: 20px dashed #f90;"></div>

问题由于中英文国际化问题，导致表单中input输入框前的标题长度不一。表单input布局一般有两种方式，一种是左右结构，一种是上下结构。上下结构能够很好地解决标题国际化切换导致的长短不一的问题，代价是牺牲页面高度。需求优化上下结构表单。谷歌登录表单有种效果：input未输入时，标题显示在输入框中，输入之后，标题上移。如果输入框有内容，则失焦后标题位置仍然在上方。实现使用html5的<fieldset>和与之搭配的<legend>标签可以方便完成表单标题

介绍textarea相较于input输入框多了换行的功能。但是有些场景设计下（尤其是移动H5的需求），希望输入框高度开始只有一行高，输入文字换行后，高度自动撑开。这个时候使用textarea就显得不那么好用了经过一段时间百度，许多资料都说使用js来获取textarea的滚动条的高度信息，动态计算和调整textarea的高度。问题这种方法的问题是，它是基于类似监听滚动条是否出现来控制textarea高度变化。在输入文字的时候，换行若文字超过高度，则滚动条出现，然后触发js调整高度。然而

1.vertical-align + line-height2.flex3.display:absolute + transform4.margin:auto 4.1 flex + margin:auto 4.2 absolute + margin:auto5.table-cell

思路鼠标滚轮可以滚动元素的纵向滚动条，那么使用css transform变换，使纵向滚动条横向展示，是否可以实现滚轮控制横向滚动效果呢

w3school定义是：overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。对于overflow:auto的初级理解是，设置父元素height/width，若子元素溢出，则自动显示纵向/横向滚动条。.........