css常见知识点

1.内核区分

希望某一个浏览器能一统江湖

-ms-transform:rotate(7deg);                //-ms代表ie内核识别码
-moz-transform:rotate(7deg);             //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg);         //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg);               //-o代表欧朋【opera】内核识别码
transform:rotate(7deg);                   //统一标识语句。。。最好这句话也写下去，符合w3c标准

2.屏幕的高度

js获取
/********************
 * 取窗口滚动条滚动高度  
 ******************/
function getScrollTop()
{
  var scrollTop=0;
  if(document.documentElement&&document.documentElement.scrollTop)  {
  　　scrollTop=document.documentElement.scrollTop;
  }  else if(document.body)  {
  　　scrollTop=document.body.scrollTop;
  }
  return scrollTop;
}
/********************
 * 取窗口可视范围的高度  
 *******************/
function getClientHeight()
{
  var clientHeight=0;
  if(document.body.clientHeight&&document.documentElement.clientHeight)  {
  var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
  }  else  {
  　　var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
  }
  return clientHeight;
}
/********************
 * 取文档内容实际高度  
 *******************/
function getScrollHeight(){
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
////////////////////////////////////////////////////
在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在Opera中：  
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

3.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（在元素的包含元素含滚动条的

4.jquery获取位置

//获取页面某一元素的绝对X,Y坐标，可以用offset()方法：
var top = $('#ID').offset().top;
var left = $('#ID').offset().left;
//获取相对(父元素)位置:
var top = $('#ID').position().top;
var left = $('#ID').position().left;
//position()方法相对父元素是指拥有position为relative或absolute属性的父元素。
//让Div随滚动条移动：
<div id="oLayer" style="position: absolute; left: 0; top:80px; z-index: 2; background: a9c9ef; margin-left:6px;width: 140px; height: 70px">
</div>

//jquery代码：
$(window).scroll(function() {
    var init_pos = $('#oLayer').offset().top;
    $('#oLayer').css("top", $(window).scrollTop()+80)
});

5.常见的宽度和高度获取

网页可见区域宽： 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
<script language="javascript">
function screenInfo(){
    var  s = "";
   s += "\r\n网页可见区域宽："+ document.body.clientWidth;
   s += "\r\n网页可见区域高："+ document.body.clientHeight;
   s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
   s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
   s += "\r\n网页正文全文高："+ document.body.scrollHeight;
   s += "\r\n网页被卷去的高："+ document.body.scrollTop;
   s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
   s += "\r\n网页正文部分上："+ window.screenTop;
   s += "\r\n网页正文部分左："+ window.screenLeft;
   s += "\r\n屏幕分辨率的高："+ window.screen.height;
   s += "\r\n屏幕分辨率的宽："+ window.screen.width;
   s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
   s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
   alert(s);
}
</script>

6.CSS动画

animation 属性是一个简写属性，用于设置六个动画属性：

语法：animation: name duration timing-function delay iteration-count direction;

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

语法解释：

1.动画名称animation 属性是一个简写属性，用于设置六个动画属性：

animation-name: none | IDENT[,none | IDENT]*;
animation-name:是用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“,”隔开。

2.动画播放持续的时间
animation-duration: <time>[,<time>]*
animation-duration是用来指定元素播放动画所持续的时间长，取值:为数值，单位为s （秒.）其默认值为“0”。

3.动画播放方式
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式.具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。虽然这个属性么有用过，这里要了解一下这个属性的枚举值。animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值	描述	测试
linear	动画从头到尾的速度是相同的。	测试
ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
ease-in	动画以低速开始。	测试
ease-out	动画以低速结束。	测试
ease-in-out	动画以低速开始和结束。	测试
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4.动画开始时间
animation-delay: <time>[,<time>]*
animation-delay:是用来指定元素动画开始时间。取值为为数值，单位为s(秒)，其默认值也是0。

5.动画循环次数
animation-iteration-count:infinite | <number> [, infinite | <number>]*
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。

6.动画播放方向
animation-direction: normal | alternate [, normal | alternate]*
animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

7.动画播放状态
animation-play-state:running | paused [, running | paused]*
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。

8.动画最终状态
animation-fill-mode : none | forwards | backwards | both;
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。这个在设置从底部向上滑动，左侧导航的页面的时候很有用，如果不设置这个属性会回到开始状态。

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

posted @ 2015-10-16 11:27 nd 阅读(405) 评论(0) 编辑收藏举报

刷新页面返回顶部

css常见知识点

公告