css笔记

布局类

分栏高度自动相等

margin-bottom:-3000px; padding-bottom:3000px;

说明：核心CSS代码部分的3000像素是个可变值，如果您的分栏高度不可能高度超过2000像素，您就可以设为2000像素，如果会超过3000像素，那么您要修改值为4000像素或是更高。
父标签的overflow:hidden属性是必须的，否则会显示溢出的内容。
CSS代码：

#test{overflow:hidden; zoom:1;}
.left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
.right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}
.center{height:300px; margin:0 410px 0 210px; background:#ffe6b8;}

HTML代码：

<div id="test">
    <div class="left">左边，无高度属性，自适应于最高一栏的高度</div>
    <div class="right">右边，无高度属性，自适应于最高一栏的高度</div>
    <div class="center">中间，高度300像素，左右两栏的高度与之自适应</div>
</div>

适配类

屏幕宽度

//Max Width
@media screen and (max-width: 600px) {
}
//Min Width
@media screen and (min-width: 900px) {
}
//Multiple Media Queries
@media screen and (min-width: 600px) and (max-width: 900px) {
}
//Device Width
@media screen and (max-device-width: 480px) {
}　

css link时适配

//设备像素比
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
//横屏和竖屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">　
//屏幕大小
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

页面高宽相关

原生js获取

网页可见区域宽：document.body.clientWidth; 
网页可见区域高：document.body.clientHeight; 
网页可见区域高：document.body.offsetWidth   
(包括边线的宽);
网页可见区域高：document.body.offsetHeight 
(包括边线的宽);
网页正文全文宽：document.body.scrollWidth; 
网页正文全文高：document.body.scrollHeight; 
网页被卷去的高：document.body.scrollTop; 
网页被卷去的左：document.body.scrollLeft; 
网页正文部分上：window.screenTop; 
网页正文部分左：window.screenLeft; 
屏幕分辨率的高：window.screen.height; 
屏幕分辨率的宽：window.screen.width; 
屏幕可用工作区高度：window.screen.availHeight; 
屏幕可用工作区宽度：window.screen.availWidth;

jquery获取

获取浏览器显示区域（可视区域）的高度 ：   
$(window).height();   
获取浏览器显示区域（可视区域）的宽度 ：
$(window).width();   
获取页面的文档高度   
$(document).height();   
获取页面的文档宽度 ：
$(document).width(); 
浏览器当前窗口文档body的高度：  
$(document.body).height();
浏览器当前窗口文档body的宽度： 
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  
$(document).scrollTop();   
获取滚动条到左边的垂直宽度 ：
$(document).scrollLeft(); 
获取或设置元素的宽度：
$(obj).width();
获取或设置元素的高度：
$(obj).height();
某个元素的上边界到body最顶部的距离：obj.offset().top;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offset().left;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offset().top（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offset().left（在元素的包含元素含滚动条的情况下）

css3动画

先让我吐个槽 各种前缀 简直要瞎了 幸好我都是复制黏贴的
使用方法，给div加上这些class就好了，比如

<div class='animated bounceoutleft'></div>

基础部分走起

.animated{
    -webkit-animation-duration: 10s;//一轮动画所需时间
    -moz-animation-duration: 10s;
    -o-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;//动画时间之外的状态,'none'不改变默认行为;'forwards'动画完成后保持最后一个属性值（在最后一个关键帧中定义）;'backwards'在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）;'both'向前和向后填充模式都被应用
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;    
    animation-iteration-count:infinite;//播放次数 n（次数）|infinite（无限）
    -webkit-animation-iteration-count:infinite;            
}

效果部分走起，这是个从中间移动到最左边渐隐的效果。要看效果→戳我

.animated.bounceoutleft {
    -webkit-animation-name: bounceoutleft;//动画名字
    -moz-animation-name: bounceoutleft;
    -o-animation-name: bounceoutleft;
    animation-name: bounceoutleft;
}    
@-webkit-keyframes bounceoutleft {
    0% {
        left: 50%;
    }
    100% {
        left: 0;
        opacity: 0;
    }
}
@-moz-keyframes bounceoutleft {
    0% {
        left: 50%;
    }
    100% {
        left: 0;
        opacity: 0;
    }
}
@-o-keyframes bounceoutleft {
    0% {
        left: 50%;
    }
    100% {
        left: 0;
        opacity: 0;
    }
}
@keyframes bounceoutleft {
    0% {
        left: 50%;
    }
    100% {
        left: 0;
        opacity: 0;
    }
}

一样在理，来个属性一览

animation: name duration timing-function delay iteration-count direction;//组合写法
animation-name: keyframename|none;
animation-duration: time;
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
animation-delay: time;
animation-iteration-count: n|infinite;
animation-direction: normal|alternate;

网页字体设置

来源：http://ued.ctrip.com/blog/?p=3589
移动端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-serif;

pc端(含Mac)项目：

 font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-serif;

移动和pc端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-serif;

各种零散tips

不显示文字

text-indent: -9999em;
overflow: hidden;
float: left; //当然也可以float: right;

超过显示范围后变点点

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 190px; //宽度一定要加

子元素浮动，父元素要有高

overflow:auto;zoom:1;//①让父元素自己浮动起来也有高，这办法可以临时用用 看看子元素整体占的大小;②子元素浮动父元素absolute可以去除浮动影响

ie9以下通用hack

color#0000FF\9;所有IE浏览器(IE6+)支持；

ul中的li居中

ul {
    text-align: center;
}

li {
     display: inline;
     float: none;
     _float: left;//IE6
     margin-right: 5px;//间隔
}

图片垂直居中

.img{
    vertical-align:center;
}

a链接去掉虚线

手机端的firefox会有这个问题
直接

a{ outline:none; }

image-set实现Retina屏幕下图片显示

background-image: -webkit-image-set(url(images/pic_1x.png) 1x,url(images/pic_2x.png) 2x);

iphone6兼容

@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */
.class{}
}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:2.6){/* 兼容iphone6 plus */
.class{}
}

修改select样式

.test_select{
    line-height: 32px;
    border-color: #fff;
    /*border: 1px solid #ccc;*/
    border-radius: 3px;
    padding: 3px;
    vertical-align: middle;
}
:-webkit-any(.test_select){
    height: 34px;
    line-height: 24px;
    background-position: right 3px;
    background-repeat: no-repeat;
    background-image: url(images/angle.fw.png);
};

 

来源：https://www.cnblogs.com/koter5/p/6228307.html