CSS容易使人蒙圈的几个经典问题

本文摘自这一年来自己在工作中经历的几个比较好的CSS问题（不一定复杂，但个人觉得都挺值得一说），这些CSS问题平时很少遇到，即使遇到后也不一定知道解决方案，即使知道解决方案也不一定知道产生的原理，同时也准备了2个JS问题（之前有整理过一篇较长的JS问题文章，在此不做推新）。本文会更新下去，希望帮到各位朋友。期待您的点赞，谢谢。

成都创新互联是一家专注于网站建设、做网站与策划设计,曹县网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:曹县等地区。曹县做网站价格咨询:18982081108

一、CSS篇

1.1 元素默认蓝色边框

input标签元素（如button、text 、areatext）的一些事件（如click、focus等），在很多浏览器下默认会有蓝色边框出现，如把一个普通button的background和border都设置为none后，触发点击后样式如下：

这是由元素默认的轮廓线产生的，这是浏览器的一种防护机制，起到突出元素的作用，把它干掉就行了，方法如下：

 
 
 
 
  
  
  
  // 方法1: 
  
  
  
  outline: none / medium; 
  
  
  
  // 方法2： 
  
  
  
  outline-width: 0

1.2 背景透明，文字不透明

我们通常是使用 opacity来做背景的透明化处理，该属性被所有浏览器支持，可以大胆使用，透明度从0.0（完全透明）到1.0（完全不透明），但该方法会使其所有子元素都透明，此时若只想让背景透明，其他不透明，则可以使用rgba处理背景：

 
 
 
 
  
  
  
  background-color: rgba( red , green , blue , alpha )

其中这个alpha 即设置透明度，取值在0~1之间。该方法除IE9以下不可用外，其他浏览器均可用，看一下效果：

同理，我们也可以用这个方法把整个背景做透明了，即多写一个div作为modal层做透明处理，可以明显看到上面文字并未透明：

上述种效果代码如下：

 
 
 
 
  
  
  
  // html 
  
  
  
   
  
  
  
     
  
  
  
       
  
  
  
        你会微笑放手,说好不哭让我出新专辑

你会微笑放手,说好不哭让我出新专辑

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;
}

// html
v-for="(item,i) in pics"
:key="i"
:src="item"
/>
// css
.card {
> img {
width: 150px;
margin-right: 10px;
&:last-child {
border: 5px solid pink;
}
}
}

.card {
> img {
width: 150px;
margin-right: 10px;
&:last-of-type {
border: 5px solid pink;
}
}
}

// html
v-for="(item,i) in pics"
:key="i"
:src="item"
/>
next is ...
// css
.card {
> img {
width: 150px;
margin-right: 10px;
&:last-child {
border: 5px solid pink;
}
}
}

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`
}

function DateFormat(date) {
if(!date) return null;
if(typeof date === 'string' && date.indexOf('T')!=-1 && date.indexOf('+')!=-1) {
datedate = 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`
}

type="text"
v-model.trim="searchText"
placeholder="搜索您感兴趣的内容"
@keyup.enter="goSearch"
/>
id="hidden"
type="text"
style="display:none"
@keyup.enter="goSearch"
/>