Smigoo

真是越学越发现自己啥都不会啊～…..关于这个haslayout是前天刚刚听咱们公司一牛人告诉我的，以前是一无所知….

在网上查阅了很多篇整理出来，下面是一些笔记，供自己与大家分享～

haslayout的重要性：

先不说这个haslayout是什么，我想让你知道haslayout的重要性。

我们经常遇到的一些IE渲染错误，都可以通过haslayout来解决。例如著名的双倍边距，3像素偏移等等。

好吧，我承认我是卖关子…..=。= Continue reading →

经常会遇到要保持最小宽度，以及高度的问题，我们可以用min-height或者min-width来解决。但是这两个属性在IE6中是不起效果的，我并不仇视IE6，虽然它带来了太多太多的麻烦，但是它也算是曾经时代的一个经典了，不如把它当作挑战好了。

这是解决min问题最通用的方法：（下面为例子，min-width效果相同）

{min-height:100px;

height:auto !important;

height:100px;

overflow:visible;

}

第一行，min-height:100px;这一句，IE6无法理解，但是对Firefox，IE6+，Safari等浏览器传达到是最小的高度设置为100px。

第二行，height:auto !important;在IE6中依然会被忽略，因为IE6看不懂!important（因此常被用作针对天生的hack），而其他浏览器会解析出超出自动扩展的效果。

然后，第三行是height:100px;终于IE6可以看懂了，告诉IE6初始大小为100px。因为之前的!impotant对其他浏览器来说是最优先选择的，所以其他浏览器会忽略这一条，只对看不懂!impotant的IE6有针对性。

第四行，overflow:visible;是IE6的独有属性，FF和IE6+等现代浏览器是没有的。意思是当内容超过时，内容不被隐藏，而是自动扩展容器显示出来，这样也正好可以达到效果了。

明天做其他笔记，关于CSS中比较头疼的清空问题。

这几天在看CSS，顺便试着做做WP主题，昨天遇到一个问题，上面是我在PS中想象的样式，文章是随便复制的，请无视～～

我想把边栏的内容文字的背景颜色弄成#2b2b2b的～哈～

于是就使劲的设置sidebar的li，但是问题来了<li>是块元素啊～如果设置background-color就会一整块被变色，就像下面一样～

• 啦啦啦，啦啦啦啦啦，啦啦啦，我是卖报的小行家～～
• 咿呀爹 呀灭爹～～
• 哈哈哈哈啊哈哈哈哈 小霸王 其乐无穷

上面的代码是：

<ul>
<li style=”background:#3CC; color:#FFF; list-style:none”>啦啦啦，啦啦啦啦啦，啦啦啦，我是卖报的小行家～～</li>
<li style=”background:#ff7554; color:#FFF; list-style:none”>咿呀爹 呀灭爹～～</li>
<li style=”background:#00af4d; color:#FFF; list-style:none”>哈哈哈哈啊哈哈哈哈 小霸王 其乐无穷</li>
</ul>

然后我试着改列表的display属性，改成inline，这样可以使块元素转换为行内元素～

• 啦啦啦，啦啦啦啦啦，啦啦啦，我是卖报的小行家～～
• 咿呀爹 呀灭爹～～
• 哈哈哈哈啊哈哈哈哈 小霸王 其乐无穷

结果就是这样了，li都跑一行了….

但是wp的调用函数，比如<?php wp_list_cats>直接就是显示为li，我也不知道在哪修改，所以苦恼了好久…

今天随便看看好看的网站发现一个网站做的效果和我的差不多，于是看了他的CSS..

结果发现问题可以非常简单的解决…

WP调用的这些分类啊，最新文章之类的都是了链接啊～我改不了li但是可以改<a>的属性啊～哈哈 真是白痴了下～～

看下面的效果～

• 啦啦啦，啦啦啦啦啦，啦啦啦，我是卖报的小行家～～
• 咿呀爹 呀灭爹～～
• 哈哈哈哈啊哈哈哈哈 小霸王 其乐无穷

以上的代码是：

<ul>
<li style=”list-style:none;”><a style=”background:#3CC; color:#FFF;”>啦啦啦，啦啦啦啦啦，啦啦啦，我是卖报的小行家～～</a></li>
<li style=”list-style:none;”><a style=”background:#ff7554; color:#FFF;”>咿呀爹 呀灭爹～～</a></li>
<li style=”list-style:none;”><a style=”background:#00af4d; color:#FFF;”>哈哈哈哈啊哈哈哈哈 小霸王 其乐无穷</a></li>
</ul>

哈哈～当然这不是大问题啦，不过我没想到，所以很开心能解决～～嘿嘿～～

不过现在还有个问题啦～～就是<blockquote>了～它也是块元素，我想做成图片右下的效果，这次没有其他标签帮忙了～看来只能舍弃了啊

这几天苦学着CSS呢（偶尔吃个西瓜，看看电视剧什么的，哈哈！）

越看书越好玩，我看的是Charles Wyke-Smith的《写给大家看的CSS书》（中文译名），原来以前的好多观点都是错误的。怪不得没有成效呢～

层叠机制

1、默认的浏览器样式表——用户样式表——设计者样式表——设计者嵌入样式——设计者内联样式（排在后面的优先级高）

2、! important声明可以不管样式表的等级强制使用样式。

3、针对性排序：针对性高的优先。这个比较复杂点，果然实践也是需要指导的，可以使知识系统化！

这是一个计分系统：A – B – C

1. 选择符中存在一个ID，就要为A加上1.
2. 选择符中存在一个类，就要为B加上1.
3. 选择符中存在一个元素名（标签名）就要为C加上1.
4. 最后将结果按照三位数来计算（如0-1-12和0-2-0相比，后者更具有针对性）

如：

p  /*针对性是0-0-1*/

p.largetext  /*针对性是0-1-1*/

p#largetext  /*针对性是1-0-1*/

body p#largetext  /*针对性是1-0-2*/

body p#largetext ul.mylist   /*针对性是1-1-3*/

body p#largetext ul.mylist li   /*针对性是1-1-4*/

以上的每个针对性都高于前一个。

4、按顺序，层叠顺序中位于最下层的规律优先。

在文档层次中对准标签

1、使用上下文选择符

如：p {color red ;}

2、使用子选择符

如：p > em {color : green ; }

作用就是对准一个标签的字标签。

3、添加类和ID

如：p . special {font-style:italic}

p #special {font-style:italic}

4、特殊选择符

• 通配符“*” 。即任何标签。
• 相邻同辈标签。“+”。如：h1 + p{font-style:italic}
• 属性选择符。如：img[title]{border : 2px;}

伪类

最常见的是link(链接)，viested(已访问)，hover(悬停)，active(激活)，由此可见伪类就是设计者没有添加却可以定义的类。

其他的伪类：

1、: first-child 用于前一个元素的第一个子元素。

2、: focus 当用户单击一个表单字段，字段会获得焦点，获得焦点的字段可以让用户在其中输入字符。

伪元素

1、x : first – letter 首字母的样式（这个我喜欢，哈哈）

2、x : first – line 首行的样式

3、x: before和x : after 元素前后

嗯，暂时写这么多，系统学习才好啊。

不过这只是我的笔记而已，小超同学就是个CSS很不错的同学，大家可以去他博客看看。

另外原来IE不属于SCB，太多属性不支持了。

文前点击大图看。