- 超链接下有图像时,图像的border为none。
- quotes属性的使用（点击这里更多信息）,使用又引号。
- body的line-height属性为1.5,增加了行高。
- 对Hn标签的样式进行重写。
- p下有1.5的外填充。
- p下如果有img加left or right class, 那么img为向float靠近边。
- 类small,large,hide。（ps:大小角度）
- 类quiet,loud,hightlight。(ps:颜色角度)
- 类added, removed。(ps:提示信息)
- 类first,last,top and bottom。(ps: left right top and bottom）
- 表单系列中的类error,notice,success. ps:从颜色角度来使用，可能不适合页面颜色搭配。
- label和legend标签加粗显示。
BluePrintcss实例
950px居中显示：
- body{text-align:center;}
- .container{text-align:left;}
- .container{width:950px;margin:0 auto;}
看看感觉怪怪的taobao，并且目前多数门户网站都使用950px或者960px宽度,可以参考sina.com或者qq.com（注:不要让他们的页面把你吓坏了,可以提前看看校内网-人人网）。
- span-n类,它所占的宽度为(40*n-10)px,并且相应的margin-right是10px.
如果这样,刚span-24为： 24*40-10=950px;此时已经到最大宽度950px.
那么margin-right设置成了0px——方法为增加last类（.last{margin-right:0;}）。
PS: span-n类在css设置时，全部使用了float: left。即一个格子为40px.
- input和textarea同时存在span-n类，设置情况是这样的：
input和textarea的左右border为1px(左右各1px,则宽度为2px);
各自的pading为左右5px(共占10px)。则input.span-n=(n*40-10)-10-2
即input.span-1=30-10-2=18px。
- append类和prepend类:append-n为padding-right: n*40(正好为40px一个格子的位数) .prepend-n为padding-left: n*40(同上)
PS: append-23和prepend-23为最大，因为这是填充,不可能把整列都填满。
可以看BluePrintCSS-1了解其它知识。
border类：BluePrintCSS是以40px为单元的布局，那border同样为以40px为单元。
div.border：
- border-right:1px solid #eee;
- margin-right:5px;
- padding-right:4px;
1+5+4=10px.
div.colborder:
- border-right:1px solid #eee;
- margin-right:25px;
- padding-right:24px;
1+25+24=50px;
注意：全部为right方向，即使div在最左边，这是其一。同时覆盖padding-right(这里说覆盖,是因为前边的div.span-n或者span-n已经设置了padding-right=10px)。响应了前边说的border设置也是以40px为单元了。即border占一个格子,而colborder占两个格子。
ps: 这些要与span-n同时使用。
之前设置的为padding，这次学习margin，是水平方向。
pull-n类设置margin-left的值： -n*40。
example: .pull-2=2*40=80px; 记住前加负号。
PS:pull也就向左方向拉一个格子。
而下面说的pust-n正好相反：push是向右推适当的格子。
example:push-2则为：margin:0 -80px 1.5em 80px;
向右移动80px，同时相对于左边为远离80px. 而push时设置margin-top:1.5em。
两者都做float浮动的,一个向左,而另一个向右。同时设置了position为relative。ps: push-24就拉没了。
看看blueprint css是怎么清除float的：
.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix, .container {display:block;}
这个是清理浮动,比较经典的。
.clear{clear:both;}直接全部清理浮动。
.clearfix.container两个类：
content:"\0020"->多数直接使用空格。
display: block; 让类直接占一行,但height设置为0，即看不到内容,再加visibility为hidden.
清理所有浮动情况。
在ie中还加了：.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}这行主要针对ie6版本
|