css
Dimple_z
Watch less, do more.
展开
-
简单理解回流与重绘
浏览器的渲染过程: 解析HTML,生成DOM树,同时解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree) 回流(Layout):得到节点的几何信息(位置,大小) 重绘:根据渲染树以及回流得到的几何信息,得到节点的绝对像素 呈现 回流和重绘的区别: 当布局和尺寸改变时,会发生回流和重绘 只有颜色发生变化时,只会发生重绘 回流一定会引起重绘,重绘不一...原创 2020-02-29 19:51:06 · 297 阅读 · 0 评论 -
三列布局之圣杯布局和双飞翼布局
什么是三列布局? 简单理解就是,页面有三个等高的模块,左右两个模块宽高固定,中间模块的宽度随视口的变化而变化。 注意点: 为了保证中间模块正常显示,需设置视口最小宽度 要保证中间列优先加载(所以不能单纯用浮动解决) 在整体布局中,尽量少用绝对定位 圣杯布局 HTML: <div class="container"> <div class="center">...原创 2020-02-20 21:25:22 · 226 阅读 · 0 评论 -
超级简单实现竖向折叠二级菜单
用jQuery的几个方法快速实现竖向折叠二级菜单,点击一级菜单出现二级菜单,带动画效果 注意点:不要给一级菜单的li设定宽度,因为点击后li会自然撑大 <script> window.onload=function(){ $('.nav li').click(function(){ $(this).child...原创 2020-02-09 19:24:55 · 1971 阅读 · 0 评论 -
手动实现模态框
手动实现模态框 设置一个用于遮罩整个页面的div,其css样式为: .mask{ width:100%; height:100%; display: none; position:fixed; background:rgba(0,0,0,0.3); z-index: 998; } js部分代码: //模态框frame $('.frame')...原创 2020-02-08 11:40:13 · 316 阅读 · 0 评论 -
css纯靠径向渐变实现单个和多个缺角效果
主要运用径向渐变实现div的缺角效果 单个缺角 background-image: linear-gradient(45deg,#f0343c 90%,transparent 10%); 上下左右缺角分别为45°,135°,225°,415° (每次顺时针旋转90°) 多个缺角 background-image: linear-gradient(45deg,transparent 0%,t...原创 2020-01-23 20:34:15 · 614 阅读 · 0 评论