随笔分类 -  html,css

white-space 用法总结
摘要： 阅读全文
posted @ 2020-12-08 18:04 sophel 阅读(202) 评论(0) 推荐(0)
自定义Mega菜单的巧妙实现
摘要：查看了《云制造》官网源码，为其mega菜单的巧妙实现打call。 其另辟蹊径，采取父级主控分支的方法，仅对父级“增加/删除”控制标识，从而控制子层显示。 ——学无止境，保持好奇。May stars guide your way. 阅读全文
posted @ 2019-02-18 11:42 sophel 阅读(486) 评论(0) 推荐(0)
块级元素的text-align对行内元素和果冻元素(inline-block)的作用
摘要：块级元素社设置了text-align:center以后，对其直接行内元素/果冻元素、继承行内元素/果冻元素都会产生“居中效应”。 结果：所有的span按照居中对test4进行填充； li元素因为继承了test4的text-align:center属性，所以li内的文本元素也按照居中形式填充li。 因 阅读全文
posted @ 2018-09-16 11:09 sophel 阅读(1153) 评论(0) 推荐(0)
绝对定位的元素相对于父元素垂直居中的方法
摘要：参考资料：实现绝对定位元素水平垂直居中的两种方法 第一种就是利用偏差补偿法，比较常用，易于理解。 第二种利用了绝对定位的位置拉伸特性（比如，将left和right设置为相同的数值，并将margin-left,margin-right设置成auto,则元素会相对父元素左右水平居中，上下一样的道理）。 阅读全文
posted @ 2018-09-14 14:00 sophel 阅读(1129) 评论(0) 推荐(0)
用nowrap实现div内的元素不换行
摘要：在编写自定义插件my-slider的过程中，发现无论float还是inline-block均不能保证div内的内容不换行（这两个属性在内容超出容器尺寸后，均将剩余内容做换行处理），在浏览器内比较了自己定义的my-slider-item和mui框架定义的mui-slider-item，发现其用了：wh 阅读全文
posted @ 2018-09-14 11:41 sophel 阅读(14241) 评论(0) 推荐(0)
前端css3样式前缀自动补全工具--autoprefixer
摘要：最近在学习一份来自git的动画框架源码，看懂70%的核心代码后，打算自己动手实践一版，然鹅，所有框架搭起来以后，在动画这块却出了问题： 想设计一个slideInLeft的动画，必然想到了要从偏移-10%的位置，移动到0的位置，于是，乐呵呵编写了如下代码： @keyframes fadeInLeft{ 阅读全文
posted @ 2018-03-13 14:00 sophel 阅读(984) 评论(0) 推荐(0)
css3中的变换、动画和过渡
摘要：变换：分为2d变换和3d变换，但一次只能用一个变换属性，多个的话最后一个会覆盖前面所有最终被浏览器实现，变换可以成为过渡和动画的一个待变参数（类似width,opacity等）。 过渡：是动画的初始模型和极简实现，只有初始状态（初始帧）和激活状态（结束帧）。 动画：可定义初始帧、中间帧、结束帧，通过 阅读全文
posted @ 2018-03-07 09:42 sophel 阅读(161) 评论(0) 推荐(0)
行内元素对齐各种问题--从line-height和vertical-align的角度分析
摘要：最近研究行内元素的对齐问题，发现img不管怎么设置，下边都有一块留白，强迫症无法忍受未知，于是开始了查阅探索之旅。 辗转来到张鑫旭的博客，他对行内盒子模型做了详细的介绍，包括“幽灵节点”，“line-height与vertical-align的基友关系”剖析都非常精彩，仅仅是对着所有案例实践、理解一 阅读全文
posted @ 2018-03-01 15:32 sophel 阅读(227) 评论(0) 推荐(0)
css的过渡背景色
摘要：css3新增的渐变背景色属性用法 原博客地址：http://caibaojian.com/css3-background-gradient.html 阅读全文
posted @ 2017-10-25 16:20 sophel 阅读(1542) 评论(0) 推荐(0)