css tips: 清除float影响,containing的div跟随floated sub等
2015-09-17 15:54
846 查看
/** * 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: 1; }
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%
相关文章推荐
- 关于Css控制Web打印
- Ajax清除浏览器js、css、图片缓存的方法
- 十步学会CSS+DIV建站(全)
- CSS中的绝对定位与相对定位
- css3 滤镜效果(黑白滤镜、模糊化处理等)
- 后台程序弹出对话框(Reponse.Write)后css失效的解决方法
- CSS样式表初始化代码
- css3--text属性
- CSS:hover 图片缩放
- CSS和JQ两种方式实现图片层上显示文字
- css3 box-sizing属性(规定尺寸)
- 怎样使用chrome调试前端html和css
- CSS让文本只显示一行,超出部分隐藏或以三个点结束
- DIV+CSS的经典翻页代码
- 使用CSS3实现百叶窗
- 基于CSS实现的4级下拉菜单效果代码
- html+css做页面如何不会乱
- CSS 符合习惯的代码规范
- css里面常用一些通用样式写法
- Word使用样式技巧:解决创建目录后出现的打印错误---超链接错误