海胆Sur

2021年6月22日

摘要：原因：源于inline-block样式的弊端当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符(此空白符还无法通过控制台分析) 如果字体不为零那么就会占一定的宽度，并且这些间距会随字体的大小而变化解局办法：就是修改行内块inline-block为块级block，或阅读全文

posted @ 2021-06-22 23:23 海胆Sur 阅读(22) 评论(0) 推荐(0)

按照设计稿的像素px值设置fontsize，但实际高度却超过了设置解决

摘要：原因：默认行高line-height的存在可以设置行高为1 （对非块级元素无效）阅读全文

posted @ 2021-06-22 20:54 海胆Sur 阅读(8) 评论(0) 推荐(0)

上外边距margin-top透过父元素下外边距margin-bottom失效解决

摘要：原因：父元素没有设置相应的border和padding 三种解决方法: 给父元素加边框给父元素加内边距让父元素变成独立的BFC (BFC内部元素不会影响外部布局，也就不会穿透了) 阅读全文

posted @ 2021-06-22 19:17 海胆Sur 阅读(9) 评论(0) 推荐(0)

js 遍历 Array 数组的方法

摘要：可选参数 [, thisArg] 循环中 this 指向如果使用箭头函数表达式来传入函数参数， thisArg 参数会被忽略，因为箭头函数在词法上绑定了 this 值。数组相关遍历方法回调函数参数为 item index array .forEach() 当元素为引用类型时，callback 阅读全文

posted @ 2021-06-22 10:04 海胆Sur 阅读(35) 评论(0) 推荐(0)

2021年6月21日

JS 拷贝对象的方法深拷贝与浅拷贝

摘要：浅拷贝与深拷贝的区别在于是否共享相同的引用因为存在共享引用，浅拷贝的修改可能造成源被修改。 js 内置对象复制操作 ...展开语法、Array.prototype.concat()、Array.prototype.slice()、Array.from()、Object.assign() 和 O 阅读全文

posted @ 2021-06-21 23:28 海胆Sur 阅读(26) 评论(0) 推荐(0)

2021年6月20日

CSS 滚动行为 scroll-behavior

摘要：当非滚轮触发页面滚动条变化时决定变化的行为 auto直接跳跃变化 smooth流畅过渡阅读全文

posted @ 2021-06-20 23:25 海胆Sur 阅读(13) 评论(0) 推荐(0)

常见的浏览器内核

摘要： Trident、Gecko、Webkit、Blink Blink 是 webkit 的分支内核 IE 浏览器内核：Trident 内核Chrome 浏览器内核：webkit 2013年以后采用 BlinkOpera 浏览器内核：最初是自己的Presto内核，（2016年奇虎360和昆仑万维收购）后阅读全文

posted @ 2021-06-20 23:08 海胆Sur 阅读(61) 评论(0) 推荐(0)

CSS vertical-align

摘要：设置行内元素盒模型与其行内元素容器垂直对齐方式。只对行内元素、行内块元素和表格单元格元素生效。基线小写字母“x”的最下方恰好是基线中文的基线会略往上图片和overflow:hidden样式的元素的基线位置是最下方(当有文字时图片下方就会存在间隙) 参考博客 DOM操作: elem 阅读全文

posted @ 2021-06-20 21:58 海胆Sur 阅读(13) 评论(0) 推荐(0)

CSS 实现整页滚动 Scroll Snap滚动快照

摘要：参考文章参考视频 main { height: 100vh; scroll-snap-type: y proximity|mandatory; /*proximity是接近时触发翻页，mandatory是强制翻页*/ overflow-y: scroll; } /*隐藏滚动条*/ main::-w 阅读全文

posted @ 2021-06-20 12:19 海胆Sur 阅读(14) 评论(0) 推荐(0)

复制的内容不小心被覆盖了

摘要： windows下按 win + V 可以打开历史剪切板阅读全文

posted @ 2021-06-20 11:09 海胆Sur 阅读(12) 评论(0) 推荐(0)

公告