随风丶逆风的博客

在使用第三方sdk时，偶遇一个小问题，遂记录一下。问题现象第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。问题原因父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置

今天接到一个给页面增加水印的需求。最开始使用绝对定位 position: absolute + z-index + opacity 方式实现了第一版，可以添加水印，但是鼠标事件的目标总是在水印容器元素上，无法复制水印下面的内容，体验非常差。遂在 github 上找到了watermark-dom包，使用简单，顺利完成了需求。如果只是这样使用轮子，能力永远等不到增长，于是阅读了它的源码，除开一些通用化的接口和功能，核心思路和我的相同，但为啥他就可以操作水印下元素内容呢？最后发现其使用了 css 属性 poin

常使用 flex: 1 使得项目均匀分布在弹性盒子容器中，但它内部做了什么却没怎么关注，最近看到了相关话题，跟我想的不太一样，遂查阅相关资料。<style> .flex-container { display: flex; width: 500px; } .flex-item { border: 1px #f00 solid; flex: 1; }</style><div class="flex-container"&.

实际上CSS3有许多亮眼的特性，比如阴影shadow、动画animation、形变transform、渐变gradient、滤镜filter等，合理运用这些特性，可以实现许多高大上的效果。如果觉得有用请点个赞或者收藏。

前提知识CSS选择器匹配规则：从右向左所有选择器全部匹配CSS样式才会生效同一样式同一权重值，靠后声明的才会生效:last-child规范文档：represents the last element among a group of sibling elements相对父节点的所有兄弟节点中的最后一个元素:last-of-type规范文档：represents the...

margin-left: auto;元素右对齐[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J26GDXEu-1575464621703)(Snipaste_2019-12-04_20-46-53.png)]要实现上述右对齐的方式有很多，比如：flex设置justify-content: flex-endabsolute定位设置rigth: 0floa...

开发过程中经常使用遮罩层展示重要信息，同时屏蔽对下层页面的操作，其中一个可以提升用户体验感的地方就是点击非内容区域关闭遮罩层，本文就提供三种思路，四种实现方案。其中遮罩层样式如下：<style lang="less" scoped>.maskParent { width: 100%; height: 100%; position: absolute; lef...

总纲：前端面试知识点大全目录1.css3动画1.1 animation语法：1.2 @keyframes语法2.布局之：左边定宽，右边自适应3.圣杯布局，双飞翼布局4.实现垂直居中和水平居中5.css预加载6.bootstrap原理7.less预处理器8.样式兼容9.link 和@import 的区别10.css样式注意点10.1 CSS 选...

总纲：前端面试知识点大全目录1.请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局2.请罗列出你所知道的 display 属性的全部值3.请解释inline 和inline-block 的区别3.1 display:block3.2 display:inline3.3 display:inline-block4.请解释relati...

总纲：前端面试知识点大全目录1.如何为有功能限制的浏览器提供网页？2.有哪些的隐藏内容的方法？3.栅格系统 (grid system)3.1 Bootstrap3.2 Grid布局4.你用过媒体查询，或针对移动端的布局CSS 吗？5.如何优化网页的打印样式？6.在书写高效 CSS 时会有哪些问题需要考虑？7.使用 CSS 预处理器的优缺点有哪些？8.如果...

总纲：前端面试知识点大全目录1.CSS 中类 (class) 和ID 的区别2.请问 "resetting" 和 "normalizing" CSS 之间的区别？你会如何选择，为什么？3.请解释浮动 (Floats) 及其工作原理4.清除浮动5.描述z-index和叠加上下文是如何形成的？6.请描述 BFC(Block Formatting Context, 块格式化上...

实际的页面开发中经常会遇到左边定宽，右边自适应的需求，特别是一些管理系统，比如左边显示信息或操作列表，右边显示详情，如下所示：  针对这种布局，首先抽象出页面结构如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am

在手机上使用CSS动画时很多时候会感到卡顿，然后网上很多教程说开启GPU加速 transform: translate3d(0,0,0); 可解决，但是为什么开启GPU加速就能让动画顺滑呢?我们从浏览器内部去理解下JS是单线程的，但是浏览器可以开启多个线程，渲染一个网页需要两个重要的线程来共同完成：Main Thread 主线程 Compositor Thread 绘制线程(我自己翻...

今天在使用这个样式属性的时候，发现了一些小问题，值得记录一下。一、transform属性的适用范围这是规范文档上写的，第一条说的就是：这个布局属性只用于块级元素或原子行内元素，或者display属性值为table-row, table-row-group, table-header-group, table-footer-group, table-cell, table-caption...

一、缘由    今天面试，面试官：“小伙子，说说居中的方式有哪些？”    哟，这不是我写的博客前端学习系列——（七）水平居中和垂直居中里的东西吗，巴拉巴拉讲了。    嗯，自我感觉还不错，应该没问题，内心窃喜。    面试官：“嗯，这些可以实现，但是都是比较旧的技术，你能说说一些的新的技术吗？”    此时，我的内心是懵逼的，表情是黑人问号的？还能怎么办，只能默默地低下头，假装可怜呗。。哈哈当然...

不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，就可以避免写出无法复用的样式，同时可以快速定位样式冲突无法应用的问题的根源。一、样式优先级规则： 1....

    确切的说是清除浮动造成的影响，但是清除浮动这个说法一传十、十传百，就将错就错，都这么说了。为子元素设置浮动效果后，会导致父元素的高度坍塌。什么意思呢，就如下面的图所示。.parentBox{ width: 300px; margin: 0 auto; border: 10px solid #f00;}.childBox{ width: 200px;...

无论W3C标准盒子模型，还是IE盒子模型，都具有margin（外边距）、border（边框）、padding（内边距）、content四个属性。其中margin、padding最多支持4个值的设置，分别是x-top、x-right、x-bottom、x-left。他们分别设置为一个、两个、三个、四个时，对应的布局不同。marginmargin: 20px;（外边距 上、下、左、右各20px。）ma...