0 css本来也是一个比较乱的东西,我们需要在最恰当的情况下,写出最杂乱的效果。
1 面对body设置了 -webkit-font-smoothing:antialiased (默认值为subpixel-antialiased),在黑又粗的大号文本面前还可以一看,但到了到处是小字的小组帖子那边就快眼瞎了,
2 浮动和绝对定位好相,不建议使用
3 <hgroup> 已经从 W3C 标准中移除,不建议使用.
4 window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false); 移动领域为了防止300毫秒的延迟。
5 margin:0 auto;失效的两个原因,一个是因为,div没有宽度,另一个是因为,fixed.这个时候只能通过。
6 关于绝对定位和相对定位。fixed默认是绝对定位,并且margin:0 auto 失效此时。
绝对定位和相对定位相对于最近父元素的绝对和相对。
如果一个绝对和相对没有设置top和left的话,那么就不需要考虑他的父类为了,他可能是别人的父类。
绝对定位不占空间。如果都是绝对的话,看层级。层级相同的话,看出现的事件,谁后看谁的。
7.css中默认img的display属性是inline,只有body、div、p、h1等少数拥有块定义。
如果需要img有块的属性,还需在css中定义
img {display:block;}
8. div1的层级是1,div1里边的div2即使层级是4,和div1层级相同的div2的层级3,那么div2也不能盖住div1.
9. 当你定义的CSS中有position属性值为absolute、relative或fixed时,用z-index此取值方可生效。此属性参数值越大,则该标签被层叠在最上面。
10.font: 12px/20px font-size/line-height 规定字体尺寸和行高
font:12px/20px "\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
11.text-decoration 文本修饰的属性
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
12.outline这个样式。
13.很多时候不需要100%的,因为我们resize中设置好width的宽带就行。但是里边的内容可能撑破,所以才会用minwidth,规范。
14. h标签的居中可以用text-align:center;
15. <a href="#">良友商学院<span>BUSINESS SCHOOL</span></a>这种形式表示的是一个跳转的文字,下边还有一个不跳转的问题。通常给下边的span一个display:block;就变为两行了。
16.text-decoration:none;去掉a标签的下滑线。
17. <a>江苏淮州 <img src='./1.jpg'/></a> 通常江苏淮州和后边的图片在同一行。
18.<li>清心总监:<img src="data:images/qq.png" align="absmiddle"></li>
<li class="last">电话:400-009-6359</li> 下边的这个文字居中完全可以用,text-align;
19.scrollTop的表示的是滚动条过去的高度。
20. text-indent 属性规定文本块中首行文本的缩进。
21. line-height: 50px;文字的这个高度和外边的高度相同的话,文字有居中的效果。
22.
background:url(../images/list01.png) no-repeat 0 center;
的意思是 图像地址 不重复 水平位置0 垂直位置居中
0 center 的意思就是 水平位置0 垂直位置居中
这个意思是图片位于这个div的位置,多余出的不显示。不考虑图片的大小。
23. stop这个方法的妙用。减少多少bug和代码量。
$("#flQQ ul li").eq(2).hover(function(){
$(this).find(".tel").stop().animate({width:"160px"},500);
},function(){
$(this).find(".tel").stop().animate({width:"0px"},500);
});
24.添加抛物线:
var flyer = $("<img src='"+src+"' class='fly'/>");
flyer.fly({
start:{
left:event.clientX, // 获取点击购物车按钮的X,Y坐标
top:event.clientY
},
end:{
left: offset.left,
top: offset.top,
width:20,
height:20
},
onEnd:function(){
flyer.fadeOut("slow",function(){
$(this).remove(); //
});
}
25. 用font代替icon图标
http://www.jb51.net/css/70033.html
26. $(".top div").eq(index).show(500).siblings().hide();
27.$(this).find(".hover").slideToggle(1000);
$(this).siblings().removeClass("select").find(".hover").slideUp(1000);
slideToggle slideDown slideUp
28. @font-face 自定义字体,IE也支持的很好。
http://www.w3cplus.com/content/css3-font-face
29.
从外部引入到样式分为两种:(注意写在head标签里面)

Link样式表式: <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>

Html式: <style type="text/css">@import url("css.css");></style>
30.自定义列表以 <dl> 标签开始;
每个自定义列表项以 <dt> 开始;
每个自定义列表项的定义以 <dd> 开始。
(定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等)
31.
this.auto = a ? a : false;
32. white-space:nowrap;中文强制不换行33. $("span:eq(0)").text("" + $("div").data("test1"));注意这种选择器的选择方式。

33. 那些属性可以被继承,margin: 0 auto;就不可以。继承的属性的优先级是最高还是最低。
width可以继承么,还是只能撑大。
=======================================
一些时刻应该记住的东西
34.<link href='my.css' rel='stylesheet' type='text/css'/>
35.清除浮动的三种方法。
36. http://blog.jobbole.com/49173/
http://blog.dimpurr.com/css-before-after/
http://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/

css基本的东西的更多相关文章

  1. 休息,归类一下CSS初级的东西

    css基础的东西集中体现在了"磊盒子"这一个枯燥无味的东西上面,灵活的运用盒子的内外边距,浮动,定位以及一些基础的属性,将一个静态的页面变得磊出来,这是CSS基础的练习. 在css ...

  2. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  3. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  4. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  5. div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行   ...

  6. web—第四章css&第五章

     web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...

  7. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  8. DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性(转载的)

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...

  9. [转载]DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...

随机推荐

  1. 数据结构--栈的应用(表达式求值 nyoj 35)

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=35 题目: 表达式求值 时间限制:3000 ms | 内存限制:65535 KB描述 AC ...

  2. Linux traceroute

    一.简介 traceroute 通过发送 TCP 数据包向目标端口进行探测,以检测源到目标服务器的整个链路上相应端口的连通性情况.   二.语法 -n 直接使用IP地址而非主机名称(禁用 DNS 反查 ...

  3. poj1125&zoj1082Stockbroker Grapevine(Floyd算法)

    Stockbroker Grapevine Time Limit: 1000MS Memory Limit: 10000K Description Stockbrokers are known to ...

  4. 《JavaScript修炼之道》读书笔记

    1.参考书目 入门:<JavaScript DOM编程艺术>第二版 进阶:<JavaScript高级程序设计>第二版.<JavaScript编程精粹> <Ja ...

  5. apache配置虚拟目录

    #虚拟目录配置 <IfModule dir_module> DirectoryIndex index.html index.htm index.php Alias /htdocs &quo ...

  6. Hive beeline update

    Hive cli vs beeline The primary difference between the two involves how the clients connect to Hive. ...

  7. xml in hadoop ETL with pig summary

    项目中需要把source为xml的文件通过flume放置到hdfs,然后通过MR导入到vertica中去,我之前做过简单的 尝试,是通过pig的piggybank的xmlloader然后Regex_e ...

  8. [转]Oracle分页之三:利用PagerView来实现无刷新GridView

    本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018355.html 接上面一节,上面还存在问题就是分页控件使用的仍然是服务器端控 ...

  9. Vim配置及说明——IDE编程环境

    Vim配置及说明——IDE编程环境 Vim配置及说明——IDE编程环境 1.基本及字体 2.插件管理 3.主题风格 4.窗口设置 5.目录树导航 6.标签导航 7.taglist 8.多文档编辑 9. ...

  10. codeforces 719E E. Sasha and Array(线段树)

    题目链接: E. Sasha and Array time limit per test 5 seconds memory limit per test 256 megabytes input sta ...