开发过程中积累的CSS样式（持续更新）

前言：平时写页面的时候有些样式使用完发现没过多久就忘记了，这篇文章主要是用来记录开发过程中容易忘记的CSS样式，与其总是去网上查，还不如一个一个记录下来，虽然说之前的都没有记录，但是知识的累积不论什么时候开始做都不会晚的。

一、首先 记录几个好用的插件网站：

layDate日期与时间组件：	https://www.layui.com/laydate/
Vant移动端插件库：	https://youzan.github.io/vant/#/zh-CN/intro
Element组件库：	https://element.eleme.cn/#/zh-CN/component/installation
Vue.js框架：	https://cn.vuejs.org/v2/guide/
Bootstrap框架：	https://v2.bootcss.com/index.html
菜鸟教程官网：	https://www.runoob.com/
w3school官网：	https://www.w3school.com.cn/

二、下面是遇到的一些想累积的css样式：（内容会随时间累积的越来越多）

1、 一个 div 中的内容实现上下滑动效果（而不是超出body的高以后上下滑动）：overflow:auto;
简单的描述：body 中的一个 div 内，如果设置了固定的 height，而内容的总 height 超出了 div 的高，则超出的部分就会被覆盖，而想实现超出的部分变成滑动的效果而不被覆盖，则用 overflow:auto; 实现。

2、 修改 前端框架封装好的css样式： border-radius: 20px!important;（注意使用英文的 ! 叹号）
简单的描述：在开发过程中经常使用一些前端框架（bootstrap，vue.js，laydate，Vant等等），在使用link导入css文件以后，发现有些css是在标签内使用内嵌的方式实现的，优先级最高，那么我们怎么修改呢？
比如：css文件中的边框弧度样式为10px：border-radius: 10px;
我们想改成20px，则在后面加上 !important 即可：border-radius: 20px!important;

3、 img标签 和 background的区别：
首先说一下img标签：（这两个标签算是比较常用的了，在这里简单的整理一下）
img标签属于html内容相关的，img标签只要添加了以后，默认情况下会使用原图片的width和height，如果添加到div中，如果div的width和height大于图片的width和height，那么会正常显示图片，反之则会只显示部分图片，我们可以通过width和height属性更改图片的宽和高。属于行内元素，如果在同级加入文字，会在同一行内显示，文字并不会显示到图片上。
而关于background样式：
background则是关于修饰层面的东西，可有可无，如果不添加也不会影响获取内容，是css的一个样式，它是为某个元素添加一个背景的简写属性，方便将背景的设置声明到一个属性中，还有一些其他的属性可以看下面的列表，如果在一个div中设置background，那么如果这个div不设置width和height的话，那么这个背景将不会显示，所以必须要给div添加相应的width和height，如果在div中添加文字这会默认的添加到背景中。

Property	描述
background	属性简写，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否 固定或者随着页面的其余部分滚动
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否及如何重复

4、 为 select 添加背景 和 将默认样式的小箭头替换为图片：
1）首先为select设置背景很简单：（和其它元素一样添加background属性即可）

select {
	//背景：和其他元素一样，都是设置 background 属性
	background: red;
}

2）改变下拉小三角样式：
html代码：（添加select元素)

<select>
	<option>选项列表</option>
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>

CSS样式代码：

select{
	//先将默认的select选择框样式清除
  	appearance:none;
  	-moz-appearance:none;
  	-webkit-appearance:none;
  
  	//在选择框的最右侧中间显示小箭头图片（图片自己定义）
  	background: url('../images/1.jpg') no-repeat scroll right center transparent; 
  	background-size:auto 100%; （确定图片的大小，自己定义）
  
  	//为下拉小箭头留出一点位置，避免被文字覆盖
  	padding-right: 14px;
}
//清除ie的默认选择框样式清除，隐藏下拉箭头
select:-ms-expand { display: none; }