css tips: 清除float影响,containing的div跟随floated sub等

/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
} .cf:after {
clear: both;
} /**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom:;
}

z-index只能在被position为: aboslute, fixed, relative的元素生效

不能对一个元素既设置float,又设置positioning,因为这会产生positioning歧义。当然特别需要时也是可以同时设置这两者的。比如被float的元素本身又作为container,希望他作为子元素定位的参考点,则可以设置float:left;position:relative

默认情况下:任何元素都有默认的background属性:transparent,元素的border以内都认为是background的涵盖范围。一旦设置了brackground,它就称为背景色,可以由border,content来“覆盖”。

.background{

  background-image: url(imag/background.jpg);

  background-color: blue; //作为fallback

  background-repeat: no-repeat;

  background-position: top center;

  background-attachment: scroll//默认;fixed;local:指示content是否和background一起scroll

}

background-gradient color generator: http://www.colorzilla.com/gradient-editor/

inline-block元素的上下对齐可能是一个问题,可行的办法是设置vertical-align: top

另外在使用两个inline-block A:60%,B:40%的情况下,可能会出现A+B>100%从而B被挤下来的问题,产生这个问题的原因是浏览器会将A和B之间的whitespace空白或者tab键渲染为1px左右的内容,解决方案要么A+B<100%,要么:设置B margin-right: -5px就解决了。

另外一个常见的bug是:如果网页内容不是很饱满,footer就孤零零在网页中间而不是在网页的底部,解决办法就是将main layout component设置height:100%

上一篇:连分数(分数类模板) uva6875


下一篇:Linux 如何使用gdb 查看core堆栈信息