Hosy~Ye 的部落宅

css基础样式总结

2018-01-24

移动端默认窗口

<meta name="viewport" content="width=device-width,initial-scale=1.0;maximum-scale=1,user-scalable=no"/>

样式响应的结构

如：
//普遍的响应的屏幕:320px,480px,768px,1024px,1200px等
@media only screen and (max-width: 1200px) {
  .abc{
      color:orange;
  }
}
@media only screen and (max-width: 768px) {
  .abc{
      color:blue;
  }
}
@media only screen and (max-width: 480px) {
  .abc{
      color:red;
  }
}

样式的兼容

前缀：
    谷歌,Safari：-webkit-
    火狐：-moz-
    Opera：-o-
    部分IE：-ms- 
//具体样式的兼容可以在网上查询，也可以根据任务需求兼容部分浏览器，实在不会或者觉得麻烦的，可以使用CSS HACK解决样式的兼容问题

css的优先级

!important,选择符(>,+,~),引入方法,先后顺序等会影响css的优先级,其中!important的优先级最高

背景透明

模式1

background：transparent;//完全透明

模式2

写法1（16进制）
    background: rgba(#303030,0.5)
    //颜色透明,最后一位是透明度,可以省略0，一般会使用在定位遮盖的效果上
写法2（RGB）
    background: rgba(255,0,255,.5)

阴影效果

.abc{
            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
}

放射线

从中间向四周逐渐变淡（径向渐变）：
    background: radial-gradient(red, #ffffff);
从中间向左右两边逐渐变淡（线性渐变）：
    background:linear-gradient(90deg,#fff 0,red 50%,#fff)

限制字数长度的方法

如：
span{
      display:inline-block;
    width:7em;//建议使用百分比，以便响应页面
      text-overflow:ellipsis;
    overflow:hidden;
      white-space:nowrap;
}

转换效果(transform)

平移

针对X轴
    transform: translateX(100px);//数值范围(-∞~+∞)px，移动的距离
针对Y轴
    transform: translateY(100px);

旋转

针对X轴
    transform: rotateX(90deg);//数值范围(-360~360)deg，旋转的角度
针对Y轴
    transform: rotateY(90deg);

缩放

针对X轴
    transform: scaleX(2);//数值范围(0~+∞)，缩小或方法的倍数
针对Y轴
    transform: scaleY(0.5);

文字两端对齐

label{
    text-align-last: justify;
    display: inline-block;
    width: 70px;//任意宽度，多数情况会在form表单的label中使用
}

手指的手势

cursor: pointer;

三角形的绘制

一般会使用在下拉选择框
首先需要清除下拉选择框自带的三角形
select{
    appearanc: none;
}
.triangle{
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;//长度任意取值
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
   //(border-top:20px solid #fff;)决定三角形是向上(border-top)还是向下(border-bottom)
}
最后使用定位的方式让绘制的三角形代替默认的
select{
    position: relative;
}
.triangle{
    position: absolute;
      top: 50%;
    margin-top: -(三角形height/2);
      right:1em;//任意值，建议使用em作为单位
}

浮动的清除

建议使用模式1，模式1会防止了margin-top的塌陷(当给一个没有浮动的标签margin时，block会另其失去效果，至于为什么table的模式增加before，同样是为了防止margin的塌陷)

模式1

.box:before,.box:after{
    display: table;
    content: '';
}
.box:after{
    clear: both;
}

模式2

.box:after{
    display: block;
    content: '';
    clear: both;
}

固定定位的问题

当使用fixed进行固定定位时，宽度盖住浏览器的滚动条
解决方法：
    删除top,left,right,bottom定位方式，改用margin来实现

a标签的问题

去除移动端点击时出现高亮背景
解决方法：
    a{
        -webkit-tap-hiaghlight-color:rgba(0,0,0,0);//最后一个0是透明度
    }

input框的问题

默认字体样式

input::placeholder{
    color:red;
}
如果没有效果就要采用兼容,根据具体浏览器进行更改
input::-webkit-input-placeholder{//谷歌
    color: red;
}
input::-moz-placeholder{//火狐
    color: red;
}

去除获得焦点时（focus）高亮背景

input{
    outline: none;
}