随笔分类 -  css

摘要: 阅读全文
posted @ 2014-01-14 16:05 sony静 阅读(659) 评论(0) 推荐(0)
摘要:HACK原理:不同浏览器对各中字符的识别不同在 CSS中常用特殊字符识别表:(1)*:IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;(2)!important: 除IE6不能识别!important外,FF+IE8+IE7都能识别!important ;(3)_: 除IE6支持_外,FF+IE8+IE7都不支持_;(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)示例:(1)区别FF(IE8)与IE6 IE7backgorund:orange;FF和IE8背景色将为橘黄色*backgorund:red;IE6和IE7背景色将为红色(2)区别FF(IE8)与I 阅读全文
posted @ 2013-12-17 11:30 sony静 阅读(247) 评论(0) 推荐(0)
摘要:一、display:table-cell属性简述display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价 值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。与其他一些display属性 阅读全文
posted @ 2013-11-20 15:48 sony静 阅读(714) 评论(0) 推荐(0)
摘要: 阅读全文
posted @ 2013-11-06 09:43 sony静 阅读(269) 评论(0) 推荐(0)
摘要:.test{ background: #f00; /*各浏览器都认识,主要给高级浏览器用*/ background: blue\0; /*ie10、9、8*/ background: red\9; /*所有的 ie*/ background:#F60\0\9; /*\0\9 或 \9\0 IE8*/ +background: yellow; /*ie7、6 +号同*号 */ _background:black; /*ie6*/}:root .test{background: blue\9;} /*ie9*/background:#f00; 各浏览器都认识,主要给高级浏览器用back... 阅读全文
posted @ 2013-09-17 11:18 sony静 阅读(142) 评论(0) 推荐(0)
摘要:此 处的“hack”并非是网络中很神秘的组织“黑客”,而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多,比如 说在您的代码中应不应该使用hack?甚至延伸到使用“hack”是一个优秀的前端人员?其实,有时候是逼不得以,必须为之。有关于hack的使用方法和种类,互联系网上成千上万,比较典型的介绍有:浏览器兼容之旅的第二站:各浏览器的Hack写法Browser CSS HacksMoving IE specific CSS into @media blocksDetecting browsers javascript hacksBrowser Specifi 阅读全文
posted @ 2013-09-17 11:10 sony静 阅读(367) 评论(0) 推荐(0)
摘要:多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝多行文本未知高度垂直居中-by 一丝 阅读全文
posted @ 2013-09-17 11:05 sony静 阅读(206) 评论(0) 推荐(0)
摘要:html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display:block }li{ display: list-item }head{ display: none }table{ display: table }tr{ display: table-row }thead{ display: table-header-group }tbody{ d 阅读全文
posted @ 2013-09-16 15:41 sony静 阅读(583) 评论(0) 推荐(0)
摘要://显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent 阅读全文
posted @ 2013-09-04 15:05 sony静 阅读(129) 评论(0) 推荐(0)
摘要:CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset: *{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。/** 清除内外边距 **/body, h1... 阅读全文
posted @ 2013-09-04 09:53 sony静 阅读(176) 评论(0) 推荐(0)
摘要:6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录: /*------------------------------------ 1. Reset 2. Header 3. Content 4. SideBar 5. Footer ----------------------------------- */ 如此你代码的结构就一目了然,你可以容易的查找和修改代码。 而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发: /*** He... 阅读全文
posted @ 2013-09-04 09:51 sony静 阅读(184) 评论(0) 推荐(0)