input聚焦 css动画效果
摘要：参考地址： http://www.htmleaf.com/css3/ui-design/201604253388.html input-style.css 中有多种样式可供参考，拿自己需要的即可。 输入框效果：聚焦后从中间到两端动画展示 html: <input autofocus type="te
阅读全文
posted @
2021-09-16 11:56
咏竹莉
阅读(423)
推荐(0) 编辑
圣杯布局、双飞翼布局
摘要：示意图： 作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要放在文档流前面优先渲染。 区别： 圣杯布局: 为了让中间div内容不被遮挡，将中间div设置了左右padding，将左右两个div想相对布局position： relative ，并分别配合righ
阅读全文
画一个三角形
摘要：.div { width: 0; height:0; border-width: 100px; border-color: transparent red transparent transparent; transform: rotate(90deg); /*顺时针旋转90度*/ }
阅读全文
做一个一直旋转的动画
摘要：.turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称 1s : 动画时间 linear : 动画以
阅读全文
单位em rem % vw vh vmin和vmax的
摘要：em：定义字体大小时以父级的字体大小为基准；定义长度单位时以当前字体大小为基准。 例父级font-size： 14px; 则子级font-size：1em为font-size：14px; 若定义长度时，子级的字体大小如果为14px，则子级width: 2em 为width: 24px rem：以根元
阅读全文
盒模型及如何转换
摘要：盒模型的组成，由里向外 content，padding、border、margin 在ie盒子模型中，width表示content+padding+border这三个部分的宽度 + 边界margin box-sizing： content-box (w3c盒模型，又称标准盒模型)： 元素的宽高大小表
阅读全文
css的重绘与回流
摘要：重绘： 当节点需要更改外观而不影响布局 回流：DOM结构的修改引发DOM几何尺寸变化的时候，发生回流。 常见的几何属性有width、height、padding、margin、border等 减少重绘和回流的方法： 使用css3新增属性： translate替代top等方向值 避免频繁使用style
阅读全文
管理
