CSS 样式修改 积累

1. 背景色渐变

.gradient {
    background: #BCE8F1;
    background: -moz-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #BCE8F1), color-stop(100%, #3684F9));
    background: -webkit-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);
    background: -o-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);
    background: -ms-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);
    background: linear-gradient(to bottom, #BCE8F1 0%, #3684F9 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#BCE8F1', endColorstr='#3684F9', GradientType=0);
}
:root .gradient {
    filter: none;
}

2.设置按钮button 边框颜色

button{
    border-style:solid;
    border-width:1px;
    border-color:#388BFF;
    /*border:1px;*//*不要设置border*/
}

3.设置背景透明度

style="background-color:rgba(0, 0, 0, 0.6);

background-color:rgba(212,0,0,0.2);
RGB Red Green Bule 3色!及212, 0, 0 三色的值混合.最后一个参数.0.2 则是指的透明度!1为100% 不透明!

4.若干个按钮(元素)填充某个div

.btsDiv{
    display: table;
    width: 100%;
    table-layout: fixed;
    //其他
}

.bts{
     //其他
    display: table-cell;
}

5.圆形轮廓

.img {
    border-radius: 60px;
    width: 80px;
    height: 80px;
}

6.按钮边角轮廓的设置

.btn{
    border-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

1. li元素点击时高亮背景色修改

.mui-table-view-cell.mui-active {
    background-color: #FFFFFF;
}

7.css的特殊性

在为同一个元素设置多个属性时，浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
权值规则如下：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 。
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
如以下代码：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

8.css的层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

9.重要性

   有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

注意：!important要写在分号的前面
10.元素分类

一.块级元素
html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
二.内联元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

三.内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

11.position属性–定位元素的位置

1.absolute  
    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2.fixed 
    生成绝对定位的元素，相对于浏览器窗口进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3.relative  
    生成相对定位的元素，相对于其正常位置进行定位。
    因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
4.static    
    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5.inherit   
    规定应该从父元素继承 position 属性的值。

    fixed的使用：
        固定一input div在浏览器（手机）底部，不随滚动条滚动。
    代码：

.positionFixed{
    position:fixed;
    bottom:0;//固定在底部，位置
    z-index:999;//不被遮挡
    with:100%;
}