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="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/

时间: 2024-10-27 05:56:37

css基本的东西的相关文章

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

css基础的东西集中体现在了"磊盒子"这一个枯燥无味的东西上面,灵活的运用盒子的内外边距,浮动,定位以及一些基础的属性,将一个静态的页面变得磊出来,这是CSS基础的练习. 在css基础练习里面有几点需要注意的小点: 1.margin的塌陷问题,这个问题分文两点,一种是上下同级的盒子的上外边距和下外边距的塌陷问题,这个情况劲量避免就好,不值一提:第二个问题就需要有良好的意识去注意子盒子的外边距是否会引起父盒子的外边距的塌陷,需要不需要运用边框1px 外加transparent使边框透明化

总结下html、css的一些东西

目前流行的组件库有哪些?CSS,JS各有哪些流行的库? 什么是组件?为什么要用组件库? 组件是组成页面中最基本的元素,按钮,输入框,下拉选择都是组件,组件和组件组合就变成了一个更复杂的组件.至于为什么要用组件库我想应该是体验了,用户使用体验以及开发人员的开发体验,用户在页面上的交互都是通过组件,一个颜值高的组件可以第一眼吸引用户去点击,这就是用户体验,开发体验更不用说,组件就是同种类型不同交互的封装,是用组件库可以让我们更专注的针对业务的开发和产品的交互. 什么是库,什么是框架 库:库是有用功能

CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 这篇文章最早出现在the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志. 按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作.然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了. 主流的浏览

网页性能之HTML,CSS,JavaScript

转载自AlloyTeam:http://www.alloyteam.com/2015/05/wang-ye-xing-neng-zhi-html-css-javascript/ 前言 html css javascript可以算是前端必须掌握的东西了,但是我们的浏览器是怎样解析这些东西的呢 我们如何处理html css javascript这些东西来让我们的网页更加合理,在我这里做了一些实验,总结起来给大家看看. 最简单的页面 1 2 3 4 5 6 7 8 9 <!DOCTYPE html>

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

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

web—第四章css&amp;第五章

web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个css文件很多东西都可以在css里面而且修改的话非常方便,但是我还是有一些问题,就是老师叫我们做注册表的时候:年月日我真不相信是用下拉列表一个一个打上去的,我一开始想用时间轴但是太难啦,老师也没说. 随着时间过得很快国庆节也要来临了,这几天老师似乎有点急但是又怕教不好我们所以课程会有点紧张,但是我觉得还是很好跟上

学习提高你CSS技术的法则

分享一些我这几个月来理解的东西,这并不是一些代码片段或者是css小技巧,而更像是一些通用的规则或者是最佳实践之类的东西,如下: 不要让你的代码脱离你的掌控,尽量简洁 掌握基础,学习CSS技巧 保持代码的可复用性 面向对象的css Css3 了解他能做的以及你可以使用的部分 渐进增强与优雅降级 Css预处理工具 与时俱进 取长补短 熟能生巧 你想说什么呢?你准备好了?那我们继续往下吧. 1.不要让你的代码脱离你的掌控,尽量简洁 别让你的代码脱离你的掌控 这是编程的一种通用建议,不仅仅适合css.当

页面定制CSS代码初探:页面变宽 文本自动换行 图片按比缩放

一.初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱了,设置里找了下,->博客侧边栏公告 <-,在这里,放了张宽200px的图,好看多了马上,还是有图才不会那么单调~ 二.认识CSS 过了几天,打算写篇博,发现了一个重大的问题,怎么默认的宽度这么窄?那我放图片怎么办,而且,2边留那么多空白不浪费吗,留个5%就够了吧.于是乎,开始了2天的全折腾.

div+css通用兼容性代码整理

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */