英文原文:Learning to Love the Boring Bits of CSS  未来的CSS太让人兴奋了:一方面,是全新的页面布局方式:另一方面,是酷炫的滤镜.颜色等视觉效果.这些CSS,受开发者追捧,被杂志和博客文章铺天盖地地介绍.  如果说这些特性是CSS华丽的一面,那我们来看看它朴实的一面:很不起眼的东西,如选择器.单位.函数(方法).我经常说这是繁琐的东西,但我意思是它们能干漂亮的活,这就是我要分享的.  怎么说呢,让我们看看这些效果最好的朴实的CSS细节--这些细节远远没有…

细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li> 二.当文字与图片在一行,需要将文字与图片居中对齐,需要这样写: <li>记住密码<img src="static/im…

人性化的细节处理 例如: textarea 默认只能垂直拖动,防止宽度改变破坏布局. textarea { resize: vertical; } 汉字字号小于 12px 不易阅读,为 <small> 元素设置默认值为 12px. small { font-size: 85.7%; /* 12/14=0.8571428571 */ } label 元素默认光标设为「手型」,暗示此处可点击. label { cursor: pointer; } 考虑移动设备 通常 iPhone 横屏时默认会放大…

写起这篇文章,是因为阅读张鑫旭到的一篇文章<CSS的学习瓶颈>,里面提到了要重视CSS的细节和实现机制.确实:有必要掌握一些关于CSS方面的细节,而不是遇到任何页面,都添加css.reset.下面取材截图于张鑫旭的博客: 下面回归正题: 一.关于这4个问题的答案: 1.dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体? dl标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在Chrome,Firefox,Safari,Oper…

引言 首先说明一下,本文分享对象是涉世未深的移动开发者,至于有经验的开发者可以自行绕道. 说来惭愧,做了几年pc端的前端开发,很少接触到webapp的移动端开发.如今有机会参与webapp的开发,发现与pc端开发还是有一些区别的. 例如,移动端的浏览器要么是Android的chrome,要么是ios的safari:可以发现:他们都是基于webkit内核的.而也有使用windows phone的手机(ie的那一套),但是从市场使用上来看,其可以忽略不计.因此做移动端的前端开发有一些特别之处: 不用…

在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫尖角吧,通俗易懂.我查看了各大互联网公司的网站,包括腾讯.百度.新浪.天猫.去哪网, 腾讯: 百度: 去哪网: 天猫: 其中,百度和腾讯直接用的背景图片,简单粗暴,没有艺术细菌. 优点:形状随意: 缺点:不方便维护: 下面要说的是新浪微博,右键小尖角,查看元素,可以看到一段代码: <div clas…

CSS除了能够改变字体.背景和所有其他属性,还能够完成基本布局任务. div+css通过浮动和定位.盒子模型等技术应用,是最常用的布局方式. 定位的基本思想很简单,它允许定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,另一个元素甚至浏览器窗口本身的位置. 另一方面,css1提出浮动.浮动不完全是定位,不过,他当然也不是正常流布局. 浮动 声明<img src ="b5.jpg" align="right">会导致一个图像浮动到右边,而允许其他…

css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个内容区,这个内容区周围包含可选的内外边距和边框(之所以认为是可选,是因为可以设置为0). 对不同类型的元素格式化时存在着差别.块级元素的处理就不同于行内元素,而浮动元素和定位元素也分别有各自不同的表现. 包含块 每个元素都相当于包含块摆放:可以这么说,包含块就是一个元素的”布局上下文“,css2.1…

每个合法的文档都会生成一个结构树,有了结构树元素的祖先.属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心.继承是从一个元素向后代元素传递属性值所采用的机制.面向一个元素使用哪些值时,用户代理不仅要考虑继承,还要考虑特殊性,另外需要考虑声明本身的来源,这个过程就叫层叠. 本文讨论3种机制之间的关联:特殊性.继承和层叠. 特殊性 同一元素可以使用不同的方法来选择元素.但是每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则的个个声明.如果一个元素有两个或多个冲突的属性声明,那么…

目录: 常用简写 权重(优先级) Hack 常用简写 权重(优先级) Hack    etc…