注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

CSS第二轮总复习  

2014-04-07 22:53:49|  分类: 复习专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  1. CSS有什么引入方式,各有什么优缺点?,权重如何?

  • 外部引入(权重最低)

<link rel='stylesheet' type='text/css' href=''>

优缺点:经常使用的一种,对于单页来说,代码量多,增加了服务器请求压力;对于整站来说减少了代码量,提高了加载速度,充分利用缓存机制,有利于维护。   
  •   页面内嵌(权重高)

<style type='text/css'> </style>

优缺点:这也是我们经常使用的一种,对于单个页面来说,代码量少,减少了服务器请求压力,加载速度快;对于整站来说代码量多,加载速度快,不利于维护,这主要用于访问量比较大的网站首页(因为加载速度要快,只要加载它本身页面所需要的CSS)。
  • 标签内联(权重最高)

<span style='background:red'>小陈</span>

优缺点:平时用的比较少,可以解决一些比较棘手的问题;代码量多,加载速度慢,不利于维护。
  • link和@import 有什么区别?
第一:link不但可以加载CSS,还可以加载其他事务,而@import只能加载CSS
第二:link无兼容问题,而@import有兼容问题,低版本的浏览器不支持
第三:link在页面加载的同时加载,而@import需要页面加载完才能加载
第四:link可以用js控制DOM来改变样式,而@import不支持
     2.常用选择器的种类有那些?
  • 标签选择器 div {}  (权重假设为1)

对于这种选择器我们比较少用,因为权重比较低,影响的范围广(主要结合后代选择器来使用)

  • 类选择器 .con {}  (权重假设为10)
类名选择器是我们前端人员开发最为常用的一种;在CSS里面一个类选择器可以控制好几个标签,可以减少了代 码量,有利于改版和维护;对于前端人员和后台人员,后台人员不需要知道类名的设置,这样大大的减少了前台 与后台的沟通时间;可以JS等动态改变标签的classname,从而改变整个标签的样式,使前端动态效果实现起来 更为容易(参考独行冰海博客)

  • ID选择器 #con {}  (权重为100)
ID选择器主要应用在js,在一个文档中id名是独一无二的,意思就是说id具有唯一性

  • 后代选择器 .con div {}
在一些结构中,可以减少类名的使用,有利于维护

  • 群主选择器 .con , .box {}
对于这种选择器可以把相同的CSS写在一起,一方面方便维护和改版,另外一方面提高代码重复利用。

注意的:你几个类选择器加起来的权重不可能比id选择器的权重大

  • 定义id名和class名有什么区别?
第一:定义的格式不同,也就是写法不同;

第二:用途不同,class主要使用在样式表,而id主要使用在js中;

第三:概念不同,id是元素的名字,是独一无二的,class是元素的类名可以相同的。

第四:权重不同

    3.显示属性

  • font开头: 

  font-size:

  font-weight:

  font-family:  /*常用的字体  黑体-SimHei 宋体-SimSun 微软雅黑-Microsoft-Yahei*/

  color:

  缩写  font: weight size family;
  • line-height 、letter-spacing、text-align 、text-decoration(主要在a标签使用)
  • 水平垂直居中

<!DOCTYPE HTML>
<html>
<head>
<title> 垂直居中 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta charset="utf-8">
<style>
.box{
display: table-cell;
width: 300px;
height: 300px;
vertical-align: middle;
background: red;
}
.con{
width: 100px;
height: 100px;
margin: 0 auto;
background: yellow;
}
</style>
</head>

<body>
<div class="box">
<p class="con"></p>
</div>
</body>
</html>

  • background:color | repeat | url | position 
  • css sprite与背景图的区别
背景图合并与css sprite的优点是减少了服务器的请求,较少了起名字的痛苦。但是css sprite是自动生成的,如果 图片要增加或者要改变的话,都需要发生改动,维护起来比较麻烦。
  4.自身属性
  • 自身属性主要就是margin、border、padding、content(border是没有缩写的)
  • 怪异解析
这是在标准模式下的解析计算:
 width:width+(padding+margin+border)*2 
 height:height+(padding+margin+border)*2 
         这是在IE6、7 和 遨游浏览器(ie内核)在怪异模式下解析计算:
   width:width+margin*2 
 height:height+margin*2 
5. 显示属性
  • float、position、display
  • visibility:hidden与display:none的区别
(visibility:hidden隐藏,但在浏览时保留位置;而CSS display:none视为不存在,且不加载)
  • 清除浮动
空标签清浮动.clear{ clear:both;zoom:1;height:0;overflow:hidden} 后面两个主要是去掉IE6标签的默认行高
优点:容易掌握, 结构和样式分离
 缺点:增加大量无语义空标签,不利于维护。
 overflow:hidden 优点:结构和样式分离,代码量少 
 缺点:超出内容隐藏,无法显示需要溢出的元素内容 
 overflow:auto(了解) 缺点:多层嵌套之后,火狐浏览器在某些情况下会造成内容全选,IE的mouseover造成 块宽度改变时,会使最外层模块出现滚动条 
 让父元素发生浮动 
 缺点:会使父元素相邻元素的布局受到影响,不可能一直浮动到body;
  • hack技术
_width:400px; /*IE6*/ 
 +width:300px; /* IE7*/ 
 *width:400px; /* IE6-IE7*/ 
 width:200px\9; /*IE6 IE7 IE8 IE9*/
width:100px\0; /* IE8 IE9*/
  • 浏览器内核【博客
  • 布局方法不同,优缺点【博客


  评论这张
 
阅读(191)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017