域名查询站长之家,国外科技网站欣赏,湘潭网站建设公司,黄冈做网站的公司哪家好本文摘自这一年来自己在工作中经历的几个比较好的CSS问题(不一定复杂#xff0c;但个人觉得都挺值得一说)#xff0c;同时也准备了2个JS问题一、CSS篇1.1 元素默认蓝色边框input标签元素(如button、text 、areatext)的一些事件(如click、focus等)#xff0c;在很多浏览器下默… 本文摘自这一年来自己在工作中经历的几个比较好的CSS问题(不一定复杂但个人觉得都挺值得一说)同时也准备了2个JS问题一、CSS篇1.1 元素默认蓝色边框input标签元素(如button、text 、areatext)的一些事件(如click、focus等)在很多浏览器下默认会有蓝色边框出现如把一个普通button的background和border都设置为none后触发点击后样式如下rgba这是由元素默认的轮廓线产生的这是浏览器的一种防护机制起到突出元素的作用把它干掉就行了方法如下// 方法1:outline: none / medium;// 方法2outline-width: 01.2 背景透明文字不透明我们通常是使用 opacity来做背景的透明化处理该属性被所有浏览器支持可以大胆使用透明度从0.0(完全透明)到1.0(完全不透明)但该方法会使其所有子元素都透明此时若只想让背景透明其他不透明则可以使用rgba处理背景background-color: rgba( red , green , blue , alpha )其中这个alpha 即设置透明度取值在0~1之间。该方法除IE9以下不可用外其他浏览器均可用看一下效果rgba同理我们也可以用这个方法把整个背景做透明了即多写一个div作为modal层做透明处理可以明显看到上面文字并未透明整体背景透明上述种效果代码如下// htmlsection div classitem-pic header classheader1 h4你会微笑放手,说好不哭让我出新专辑h4 header div div classitem-pic header classheader2 h4你会微笑放手,说好不哭让我出新专辑h4 header div div classitem-pic div classhandle-opacity header h4你会微笑放手,说好不哭让我出新专辑h4 header div divsectionstyle langless.header1 { opacity: .6;}.header2 { background-color: rgba(0, 0, 0, 0.45);}.handle-opacity { position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.45); header { background-color: rgba(0, 0, 0, 0.45); }}style1.3 div内置img元素底部总有间距用一个div包裹一个img会出现img不能完全覆盖div空间总会在底边留下一点空隙。div底部间隙这种现象产生的原因是img是行内元素浏览器为下行字符(如g、y、j、p、q)留下的一些空间这些字符是会比其他字符多占据底部一些空间(具体以当前字体大小有关)这种规则会影响行内元素img标签(其默认垂直对齐方式是依照基线来的即vertical-align: baseline)同样行内元素都会和外部元素留这么一丢丢安全距离。上图右侧就是加了文字的效果这样就更说明一切了。现在我们知道这种现象主要是由于下行字符串保护机制和img是行内元素这两个因素导致的那解决方案就从这两处入手整理如下div设置font-size: 0或line-height: 0进而行高为0img设置 vertical-align: top 或者 middle/使其不再以默认基线为对齐方式img设置 display:block使其变成块级元素。综上个人认为方法3是最好用的方法1不推荐使用。1.4 元素自动填充上背景色该现场多在表单输入等场景上会出现初次看到确实很怪异效果如图默认颜色即当浏览器(chrome)给输入框自动填充内容后也会自动给输入框带上背景(黄或灰蓝)该问题是由于chrome会默认给自动填充的input、select、textarea等加上:-webkit-autofill私有伪属性造成的比较好的解决方案就是做样式覆盖代码如下input:-webkit-autofill{ box-shadow: 0 0 0px 1000px white inset !important;}select:-webkit-autofill{ box-shadow: 0 0 0px 1000px white inset !important;}textarea:-webkit-autofill{ box-shadow: 0 0 0px 1000px white inset !important;} 比较渣的办法是设置禁止自动填充但还是别那样做了…1.5 transform 基数值导致字体模糊transform作为CSS3最为自豪的属性已经成为了当前前端开发中不可或缺的方法但它有个渲染的问题即当元素设置有transform且其值为基数或小数同事其整体高度也有基数时其内部文字会变模糊如图模糊上图上模糊状态下的下图是修正过的具体原因经查可能是因为transform变换会在浏览器上单独创建一个绘画层并重新进行渲染在此渲染过程中也处理了周围的文字如果高度为奇数的文字可能会存在半个像素的计算量浏览器对这半个像素会进行优化渲染所以边缘会出现模糊的情况。解决方案即不要给transform属性值设置奇数和小数值调整整体元素高度不要为基数。1.6 :last-child 和 :last-of-type作为CSS常用伪类选择器:last-child经常会被用到但有时遇到极端情况它会意外失效让人摸不着头脑例子如下3个img标签包裹在card中当前需求是使最后一张图的边框呈粉色代码如下// htmldiv classcard img v-for(item,i) in pics:keyi:srcitem /div// cssstyle langless.card { img { width: 150px; margin-right: 10px; :last-child { border: 5px solid pink; } }}style同理用:last-of-type也能实现.card { img { width: 150px; margin-right: 10px; :last-of-type { border: 5px solid pink; } }}效果如下有效现在要往img后加一个span发现:last-child已失效// htmldiv classcard img v-for(item,i) in pics:keyi:srcitem / spannext is ...spandiv// cssstyle langless.card { img { width: 150px; margin-right: 10px; :last-child { border: 5px solid pink; } }}style失效而此时:last-of-type依然没问题有效2现在得出结论:last-child选取一群兄弟元素中的最后一个元素且最后的这个元素必须是所声明的指定元素(注意2个条件):last-of-type选取一群兄弟元素中的最后一个指定类型的元素。可知:last-of-type更严谨一些不容易产生意外bug我更推荐使用它。同理适用于:nth-last-child(n)和:nth-last-of-type(n)二、DOM篇这部分我会叙述一些DOM操作遇到的一些容易被忽视的问题。2.1 IOS日期显示问题经常做H5移动端开发的朋友我想对这个问题肯定不陌生那就是在部门IOS版本(IOS5及以下)中对以“-”间隔的字符串时间格式的解析是不成功的比如我们写了这么一个鸡肋时间格式适配器function DateFormat(date) { if(!date) return null; date new Date(date); let Y date.getFullYear(); let M (date.getMonth() 0 date.getMonth() 8) ? 0${date.getMonth() 1} : ${date.getMonth() 1}; let D (date.getDate() 0 date.getDate() 9) ? 0${date.getDate()}: ${date.getDate()}; return Y-M-D}此时如果在IOS5及以下版本的iphone下传入 2019-12-31就会呈现出 NaN-NaN-NaN而其他IOS版本及安卓系统都是没问题的。针对上述问题要做兼容适配即把以-间隔的事件字符串替换成以/即可同样是这个适配器添加一段代码function DateFormat(date) { if(!date) return null; if(typeof date string date.indexOf(T)!-1 date.indexOf()!-1) { date date.replace(/-/g, /).replace(T, ).substring(0,date.indexOf(.)) } date new Date(date); let Y date.getFullYear(); let M (date.getMonth() 0 date.getMonth() 8) ? 0${date.getMonth() 1} : ${date.getMonth() 1}; let D (date.getDate() 0 date.getDate() 9) ? 0${date.getDate()}: ${date.getDate()}; return Y-M-D}2.2 ENTER键使当前页刷新这个真的很诡异的问题当在一个表单中执行了ENTER键提交后如果是打开新页面显示提交结果则会发现当前表单页面也跟着刷新了这种体验当然是很糟糕的。经查证该问题的产生条件为Form中只有一个input时此时执行ENTER键会自动提交表单并刷新页面。解决方案也很粗暴直接在input输入框附近写一个隐藏标签这样就有2个input了即避免了产生默认刷新的bug实例如下form input typetext v-model.trimsearchText placeholder搜索您感兴趣的内容 keyup.entergoSearch / input idhidden typetext styledisplay:none keyup.entergoSearch /form❤️爱心三连击如果你觉得这篇内容对你挺有启发我想邀请你帮我三个小忙点个「在看」让更多的人也能看到这篇内容(喜欢不点在看都是耍流氓 -_-)欢迎关注我的5000star文章合集 https://github.com/ljianshu/Blog希望可以带给你点启发如果想进前端交流群一起探讨技术请在后台回复「1」亲点这涨工资
