摘要：要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多 IE下的显示错误，就是源于 haslayout。什么是 haslayout ？haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有 阅读全文

摘要：两种情况清除浮动包括清除子元素的浮动和清除上级元素的浮动，其中清除上级元素的浮动，只需设置clear为both就可以了，而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单，而空标签法清除子元素浮动会增加额外标签，所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。为什么要清除浮动一个块级元素的高度如果没有设置height，那么其高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，你可以使用firebug查看下如果不清除浮动，父元素会出现高度不 阅读全文

摘要：一、 ::Selection的使用关于选择文本，控制背景和文本的颜色。/*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值； color:颜色值； } /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值； color:颜色值； }二、解决中文版Chrome下不能显示小于12px的字体在中文版Chrome里面，网页CSS里所有小于12px的字体设置都无效，最终将显示12px。这样弄的本意可能是好的，因为中文一旦小于12px，就变得不易阅读... 阅读全文

摘要：项目中关于文本溢出省略号显示的两种解决方案:1、关于固定宽度的文本折行。 主要样式：text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 一定要指定固定宽度。2、自适应布局（table）td中文本折行。 需要给table加上一个样式： table-layout:fixed。 保证每个td不会随着内容超出td宽度被撑开。 比如给td设定: width:40%。 则需要在td中再多套一层块级元素，比如p，然后给p设置宽度，自适应td的宽度。 p的样式：width: 100%; text-overflow: ell... 阅读全文

摘要：chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框，而且textarea还可以任意拖动放大，这是不能容忍的，影响美观不说，有时候拖动textarea还会使页面布局错乱，所以决定重置这些样式。看代码：取消chrome下input和textarea的聚焦边框：input,button,select,textarea{outline:none}取消chrome下textarea可拖动放大：textarea{resize:none}最后，写在一起，重置input和textarea的默认样式：input,button,select,textarea{outline:none 阅读全文

摘要：41. 暗灰色的圆形按钮.graybtn { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) ); background... 阅读全文

摘要：21. 字符美化.amp { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal;}Code Source这个css类用在页面内容中围绕文字的span元素.它会将一些典型的serif 字体用斜体形式显示.测试下看看是不是你喜欢的风格吧.22. 段落首字母p:first-letter{ display: block; margin: 5px 0 0 5px; float: lef.. 阅读全文

摘要：1. CSS 重置html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, t 阅读全文

摘要：html代码的结构其实说起来也不难，首先做一个足够长度的图片，然后通过设置背景图片，让父元素显示按钮的左部，子元素显示按钮的右部，这样就可以随着不同的宽度显示完整的按钮。关键代码：a.reg-btn, a.reg-btn span { background: url("/images/regist/bg-reg-btn.gif") no-repeat;}a.reg-btn{ padding-left:3px; background-position: 0 -100px;}a.reg-btn span{ background-position: right -100px;.. 阅读全文

摘要：Twitter BootStrap是一款优秀的前端的框架，称得上是前端的一个框架利器。Web前端开发者每天都在与HTML、CSS、JavaScript打交道，然而不少人都是在周而复始的写模板、样式和交互效果，前没有想过如何将这些重复的工作整合在一起。Twitter推出的BootStrap能够帮助Web前端开发者摆脱这种重复的劳动。最近在各群讨论BootStrap相关的话题也明显增多，有很多Web前端人员在开始或者已接触、并在使用BootStrap。为了能帮助大家更好的学习和使用Bootstrap这个优秀框架，我今天整理了一份我收藏的相关资源，这篇文章可以说是学习BootStrap的一个最好最全 阅读全文

摘要：CSS规范 - 分类方法CSS文件的分类和引用顺序通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展” 阅读全文

摘要：这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面，了解栅格系统，并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。首先我们需要说的是twitter bootstrap是非常优秀的一个前端开源框架，它为所有的组键都提供了详细的用例，让你能够轻易地通过复制黏贴而附加到你的设计中。查阅官方文档可以点击这里。基本的HTML模板我们需要以一个基本的HTML模板，这样我们能够把所需要的bootstrap文件包含 阅读全文

摘要：在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari。但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性（在 Firefox3 版本中将会支持 display:inline-block）。不过 Firefox 下却有私有属性 -moz-inlin 阅读全文