css基本的东西
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基本的东西的更多相关文章
- 休息,归类一下CSS初级的东西
css基础的东西集中体现在了"磊盒子"这一个枯燥无味的东西上面,灵活的运用盒子的内外边距,浮动,定位以及一些基础的属性,将一个静态的页面变得磊出来,这是CSS基础的练习. 在css ...
- 一篇通俗易懂的CSS层叠顺序与层叠上下文研究
网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...
- [转]用CSS给SVG <use>的内容添加样式
来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
- div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 ...
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性(转载的)
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
- [转载]DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
随机推荐
- 数据结构--AC自动机--hdu 2896
病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- linux搭建mysql 5.6.28
1.下载rmp文件 http://dev.mysql.com/downloads/mysql/ 2.安装 rpm -ivh MySQL-server--.linux_glibc2..x86_64.rp ...
- 物理系统迁移虚拟化P2V技术
企业搭建虚拟化平台之后的第一件事肯定是将现有的服务器应用业务转移到虚拟服务器上,这就是虚拟化整合服务器的第一步,也是虚拟化程序的基础功能之一:P2V的转化功能. AD: 企业搭建虚拟化平台之后的第 ...
- [转]ionic Accordion list three levels
简化后的主要代码: $scope.groups = []; for (var i = 0; i < 2; i++) { $scope.groups[i] = { name: i, items: ...
- 怎样绘制ZBrush中的纹理
利用ZBrush的内置插件“投影大师”和“Polypainting”纹理贴图能够快速实现纹理的绘制.本文将对这两种方法的应用流程做一个介绍. 查看跟多内容请直接前往:http://www.zbrush ...
- URAL 2014 Zhenya moves from parents --线段树
题意:儿子身无分文出去玩,只带了一张他爸的信用卡,当他自己现金不足的时候就会用信用卡支付,然后儿子还会挣钱,挣到的钱都是现金,也就是说他如果有现金就会先花现金,但是有了现金他不会还信用卡的钱.他每花一 ...
- 给vs2010安装上cocos2d-x的模版
开发环境:OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版,执行InstallWizardForVS2010.js,老是提 ...
- 程序4-5 打开一个文件,然后unlink
//http://blog.chinaunix.net/uid-24549279-id-71355.html /* ========================================== ...
- 大话Git
Git是什么 Git是一个分布式版本控制系统.它可以很方便的记录你的每一次变动,而不需要每次都备份,还能让你和他人很方便的协同开发.这样你每次做了什么改动,瞄一眼就一清二楚了. -- 安装Git 从官 ...
- Gitub
1.下载地址(注册:jackchn,jackchn@foxmail.com) http://windows.github.com/ 2.使用 github for Windows使用介绍 搭建一个免费 ...