CSS学习中的瓶颈期深入分析(2)_Java123社区微信号：java123msg |||[][]当前位置: &
& CSS学习中的瓶颈期深入分析(2)泛泛的经验积累式学习，看不到自己技术的瓶颈所在，总在同一层次添砖加瓦。就跟杨过的A阶段一样，总是不停地学习新功夫，但都不是很 深入 很牛逼，泛泛的经验积累式学习，看不到自己技术的瓶颈所在，总在同一层次添砖加瓦。就跟杨过的A阶段一样，总是不停地学习新功夫，但都不是很深入很牛逼，结果，连对付霍都都吃力。广度与深度任何一门学科都有其广度以及深度。在CSS的A级阶段，显然所学基本上是扩展自己知识面的广度：各个CSS属性熟悉，各个基本盒模型，各个声明在不同浏览器下的表现熟悉，兼容性问题如何修复熟悉等。然而，CSS的属性就那么多，如果只从了解每个CSS属性名称、属性值上来看，肯定会有一天达到饱和的。此时，我们就会觉得似乎没有什么新的东西可学了，CSS的那点东西我都知道了；似乎工作就成了每天的重复。这就是瓶颈期！看看这张图：我们很自然想到，要从A到B阶段，只要向下，向深度发展就可以了。所以，如果您觉得现在CSS这块学到的东西不多了，试试向垂直方向学习。补充：1. 有时候，如果我们CSS的基础足够得扎实与强大，我们会自热而然进入到B阶段，但这种完全经验积累的进阶学习需要很长的时间周期。2. 如果没有一定的CSS基础以及经验做支撑，我们是无法进入B阶段的。3. 深度才是你的核心竞争力。深入的细节掌握，深入的机制理解等，这些都是要下苦功才能掌握的，这是你有别于其他千千万万自认为会写页面的CSSer们的地方！瓶口间的跳跃CSS3的出现似乎让一些CSSer们的学习有了新的方向：CSS2.1中的那些CSS代码我闭着眼睛都能敲出来，实在太无趣了，终于出来个小三 & CSS3来调剂生活！然而，从CSS2到CSS3的学习增加的只是一点广度的知识，多点时间，谁都可以达到你这种程度（学习门槛低啊！）。在我看来，无非就是从一个瓶口跳到另外一个稍显时髦的瓶口而已。视角的局限武侠中，主角们的进阶似乎都离不开所谓的&高人指点&；就算现实生活中，我们的人生也可能因为一句话而发生重大改变。那&指点&的是什么呢？&改变&的又是什么呢？&&看待问题的方式以及角度！据说阿里有个倒立文化，换个视角看问题，会得到不同的答案。我们很多人找不到学习的突破口，可能就是由于视角的问题。我们往往不是这样子看的：而是从上往下，只看到瓶口&&看不出水有多深，看不到瓶颈在哪里！想起了一部美剧&&《迷失》，想起了一句古话&&&只缘身在此山中&。三、瓶颈在哪？我先问几个问题，看看你是否能够回答上来？dl, dt, dd三个标签浏览器默认margin值多少？是否有标签默认文字粗体？line-height:150%和line-height:1.5的区别是？float为何会让外部容器高度塌陷？这是bug？vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同？其中的渲染机制是？以上问题可以大致判别你是A阶段还是B阶段。倒不是问题本身，而是问题所指的类别。问题1, 2表示&深入的细节掌握&；3, 4表示&深入的机制理解&。再往后可能就是&网页大事，为我所控&，&天下页面，听我号令&，这要C阶段了，先不予讨论。换句话说，您现在的瓶颈可能在于&细节掌握不够&、&机制等理解不够&。关于细节有人可能会反问：我为什么要知道dl, dd, dt标签默认的margin值大小？我一般都是直接在CSS reset中设置：body,h1,... ,dl,dt,dd,...,th,td { margin:0; padding: 0; }你看，淘宝网首页就是这么干的(global-min.css)！从实际应用来看，我无需关心!这样的想法，类似于：我根本不需要知道我的前任、现任、后任女友是否是处女，因为我都直接让她们做处女膜修复！从实际应用来看，我无需关心！共5页顶一下(0)0%踩一下(0)0%------分隔线------上一篇： 下一篇： 栏目列表推荐内容热点内容CSS中不为人知Zoom属性的使用介绍(IE私有属性)(转_Java123社区微信号：java123msg |||[][]当前位置: &
& CSS中不为人知Zoom属性的使用介绍(IE私有属性)(转其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。&Zoom的使用方法：&zoom : normal | number&normal :　 默认值。使用对象的实际尺寸&number :　 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只要在IE中才起作用，所以很少用到它的实际用途，而最经常用到作用是清除浮动等，如：&复制代码代码如下:.border{&border:1px solid #CCC;&padding:2&overflow:&_zoom:1;&}&_zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例，但这里&overflow:和_zoom:1;是连起来用的，作用是清除border内部浮动。&同理，还可以使用同样方法清除margin属性在IE浏览器中的重叠问题。CSS中zoom:1的作用&兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：&触发IE浏览器的haslayout&解决ie下的浮动，margin重叠等一些问题。&比如，本站使用DIV做一行两列显示，HTML代码：&复制代码代码如下:&div class="h_mainbox"&&&h2&推荐文章&/h2&&&ul class="mainlist"&&&li&&a href="/Roboo/p/#" style="color:#0000FF" target="_blank"&CSS库吧&/a&&/li&&&li&&a href="/Roboo/p/#" style="color:#0000FF" target="_blank"&原创& /a&&/li&&&/ul&&&/div&&CSS代码：&复制代码代码如下:.h_mainbox { border:1px solid # padding:4px 15 background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6 overflow:hidden}&.h_mainbox h2 { font-size:12 height:30 line-height:30 border-bottom:1px solid # color:#555;}&.h_mainbox h2 span { float: font-weight:}&.h_mainbox ul { padding:6px 0 background:#}&.mainlist { overflow: zoom:1;}&.h_mainbox li { width:268 float: height:24 overflow: background:url(../icon3.gif) 0 6px no- padding:0px 5px 0px 18 line-height:200%;}&.mainlist里面的zoom:1的那里就可以在IE6、IE7、IE8正常显示效果了。&css中的zoom的作用&1、检查页面的标签是否闭合&不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。&快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。&　　2、样式排除法&有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。&　　对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。&　　3、模块确认法&有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。&　　4、检查是否清除浮动&其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:zoom:1 的类似方法来清除浮动，会有太多的限制性）。&　　5、检查 IE 下是否触发 haslayout&很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读 蓝色上的转帖 ）&共2页顶一下(0)0%踩一下(0)0%------分隔线------上一篇： 下一篇： 栏目列表推荐内容一、状态栏通知(Notification)：如果需要查看消息，可以拖动状态...
mo文件是被编译了的文件，一般在汉化的时候会用到。比如我想...
此配置文件可以直接拿来用，配置文件上面有详细用法说明，里...
一、概述 小文件是指文件size小于HDFS上block大小的文件。这样的...
1 package com. 2 3 4 import java.io.F 5 import java.io.FileInputS 6 ...
正表达式就是一段匹配文本片段的模式，在Python 中 re 模块包含...CSS中cursor属性给标签加上小手形状
我们发现a标签在网页中有一个值得注意的地方，即鼠标移到a标签上光标会变成一只小手的图标，移出a标签后又恢复为默认箭头。
如今，JS在网页中的功能越来越强大，有时候我们需要在页面中添加一些可点击的标签实现一些功能。如以下代码：
&meta charset=&utf-8& /&
&title&给点击标签加上小手样式 &/title&
&h1 onclick=&alert('hi');&&点击这里&/h1&
鼠标指针变成文本输入图形
这个例子中，我们给h1标签加上了一个onclick事件，单击弹出hi提示框。虽然功能实现了，但我们发现鼠标指针移动到h1标签上的时候指针图形编程了一个文本输入图形。
外层套a标签改变鼠标指针图形
为了让用户明白这里是可以点击的标签，通常我们会在外层套一个a标签，这样当用户移动到文本上的时候指针图形自然也就跟a标签一样都是一只小手形状，表示可以点击。如代码：
&meta charset=&utf-8& /&
&title&给点击标签加上小手样式&/title&
&a href=&#&&&h1 onclick=&alert('hi');&&点击这里&/h1&&/a&
有不少网站采用这种做法，这种做法并无不妥，也不会影响网页的展现效果。
但这种方法也有几点不妥：
套上a标签后，h1标签继承a标签样式；
对于a标签的href需要处理，又不能去掉；
要修改样式。
没有加a标签之前
加a标签以后，颜色改变，多了一条下划线。
但我们通过CSS改变指针形状也是一种简便的方法。
通过CSS中的cursor属性改变指针
在CSS中有一个cursor方法可以改变鼠标指针状态图标，我们可以利用这个方法来达到移动指针到h1标签上的时候鼠标指针变成小手的状态效果。如下代码：
&meta charset=&utf-8& /&
&title&给点击标签加上小手样式&/title&
&h1 style=&cursor:& onclick=&alert('hi');&&点击这里&/h1&
通过以上例子，可以很好的避免了套a标签带来的样式问题处理。
以上例子中cursor的值pointer表示小手状态，cursor的属性的值有以下类型，不同值可以实现不同的指针效果。
表中数据摘自w3school
可以自定义鼠标指针图形
其中值为URL的表示可以自定义图标代替系统指针图标，利用这个值我们DIY鼠标指针样式非常容易。好多比较个性的网页几乎都是通过此方式改变系统默认的箭头指针图形，使网页看起来更加个性。
通过URL指定图形方式，我们可以制作一个透明的图形即可达到隐藏指针图形的效果。感兴趣的童鞋试试吧！
标签(Tag):
------分隔线----------------------------
------分隔线----------------------------视频: CSS.MG3.123
分享给好友
您需要先安装&，才能下载视频哦
用优酷App或微信扫一扫，在手机上继续观看。
CSS.MG3.123
分享给站外好友
把视频贴到Blog或BBS
flash地址:
<input type="text" class="form_input form_input_s" id="link3" value=''>
<input id="link4" type="text" class="form_input form_input_s" value=''>
节目制作经营许可证京字670号
京公网安备号
药品服务许可证(京)-经营-