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. SQLAlchemy 中文文档翻译计划

    SQLAlchemy 中文文档翻译计划已启动. Python 文档协作翻译小组人手紧缺,有兴趣的朋友可以加入我们,完全公益性质.交流群:467338606. 希望大家能够勇敢地去翻译和改进翻译.虽然我 ...

  2. R语言Cairo包的使用

    Cairo使用起来非常简单,和基础包grDevices中的函数对应. CairoPNG---grDevices:png(). CairoTIFF---grDevices:tiff(). CairoPD ...

  3. kafka basic commands

    kafka-server-start.sh config/server.properties & kafka-server-stop.sh kafka-topics.sh    --creat ...

  4. [转]VS2015 cordova尝试-camera

    本文转自:http://blog.csdn.net/greystar/article/details/47973837 1. 确保环境正常,如出现错误 ,安下载android sdk 相关版本,我在这 ...

  5. matlab生成HEX文件-任意信号 大于64K长度

    HEX文件格式不赘述,写里直接放上代码.请批评改正. %%convert a signal data into hex file format % data format:16bit % signal ...

  6. Params 方法参数

    params,ref,out 方法参数 示例 在下面的方法使用中 OpenWindow(params object[] args) 传递的参数args添加了params修饰 public void O ...

  7. Spring AOP 针对注解的AOP

    我也忘记是从哪里扒来的代码,不过有了这个思路,以后可以自己针对 Controller 还有 Service层的任意 方法进行代理了 package pw.jonwinters.aop; import ...

  8. smarty中三种变量的访问方式

    在模板中smarty有三种变量,第一种,php分配的变量,第二种配置文件里的变量,第三种,PHP全局数组里的变量,配置文件里变量的访问方式可以是{#bgcolor#},"#"必须紧 ...

  9. javascript中的数组操作

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...

  10. 各种各样的hack。

    http://itakeo.com/blog/2015/11/16/allhack/?none=123 Android Selector Hacks .selector:not(*:root) {} ...