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. js实现(全选)多选按钮

    第一种,全部选中: <html> <head> <title>复选框checked属性</title> <script language=&quo ...

  2. C标准头文件概述

    C的C89标准一共定义了15个头文件,这些头文件具有幂等性(多次包含同一个头文件的效果等同于只包含了一个头文件,例外),独立性(每个标准头文件的正常工作都不需要以包含其他标准头文件为前提,也没有任何标 ...

  3. 计算1到最大的n位十进制数 ——大数解决

    要求:输入一个数字n,按照顺序打印出从1到最大的n为十进制.比如输入3,则打印出1.2.3……一直到最大的3位数999 这个看起来好像很简单啊.巴拉巴拉,已经得出了下面的代码 /** * 注意: 错误 ...

  4. Go

    一.简介 https://zh.wikipedia.org/wiki/Go 二.安装 1)低版本 http://blog.sina.com.cn/s/blog_59cc90640102xm8r.htm ...

  5. Error querying database. Cause: java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for …

    编译通过并且运行web成功后,访问的页面不需要连接数据库,不牵扯到反射调用实体类就不会报错, 报错内容如下: [WARNING] org.springframework.web.util.Nested ...

  6. 本地数据下,radiobutton和图片组合,利用adapter+listview进行单选

    浮生偷得半日闲,等接口定义的过程中,重新复习下adapter+listview实现单选的方法 主界面 <RelativeLayout xmlns:android="http://sch ...

  7. Oracle 性能优化之一二

    本人使用oracle时间不多,但是在项目中积累了一些经验教训,记录于此,以方便自己和他人解决类似的问题. 1.temp space超出限制的问题 问题场景: 在复杂的ETL query中,有时候一张f ...

  8. 矩阵乘法快速幂 codevs 1732 Fibonacci数列 2

    1732 Fibonacci数列 2  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 在“ ...

  9. 怎么在ZBrush中通过遮罩得到子物体

    ZBrush® 中通过遮罩为模型添加子物体的方法简单且方便,我们可以通过按住Ctrl键绘制遮罩结合相关命令创建具有抽出厚度的模型提取出作为子物体附在模型表面.本文将详细介绍在Zbrush中如何通过遮罩 ...

  10. 使用PS3手柄在PC玩Unity3D游戏

    PS3手柄玩Unity游戏 今天把公司的PS3手柄接到PC上,想用手柄试一下玩赛车的感觉,老感觉用键盘按键玩的不爽. 把PS3的手柄接到PC上之后,系统提示正在安装驱动--,百度找资料,如何在PC上使 ...