CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

• 文本自动换行

当一行文本的长度超出容器的最大宽度，就要产生自动换行的问题。CSS的white-space属性可以决定自动换行的行为。

• li的多余空白

在IE6下，li标签中有浮动元素的话，就有可能在两个li之间出现一条多余的空白。在浮动元素上设置vertical-align: top可以消除掉空白。

• CSS Border使用小分享

之前在懒懒分会上分享的一点关于border画小图的内容, 完整的ppt在这里. 原理 css盒模型一个盒子包括: margin+border+padding+content

• 使<pre>的内容自动换行

元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
标签的一个常见应用就是用来表示计算机的源代码。
而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。
点...

• 各浏览器的默认CSS

在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。各浏览器的默认CSS可以在这里http://www.iecss.com/找到，贪心一下，把这些样式都保存了一份： IE6(下载) IE7(下载) IE8(下载) IE9(下载) Firefox 3.6.3(下载) Webkit (r57042) (下载) Opera 10.51(下载) 当然我们还可以找到更老的一些浏览器默认样...

• 终极攻略――未知高度元素垂直居中

一些未知高度元素垂直居中的方案。

• 多列等高方案

多列等高方案。

• display: inline-block在IE6、IE7下bug的解决方法

display: inline-block在IE6、IE7下应用到块元素时是不起作用的，可以用下面的方法解决。

• HTML5文件API之图片预览

图片上传在当今的Web应用中是一个非常常用的功能，如果不需要在上传前进行图片预览则可以简单的使用HTML+Javascript来实现，但如果一定要在上传之前提供图片预览功能则需要求助于Flash来实现。不过，随着HTML5 File API的诞生这一状况终于有了改观，本文将介绍如何使用HTML5 File API快速的实现图片预览功能。浏览器支持情况本文实现的功能在以下浏览器中经过测试：IE8、Firefox3.6、Chrome6.0、Opera10、Safari4。其中Firefox3...

• CSS3 媒介判断与 iPhone 4 视网膜显示屏

iPhone 4 的「视网膜显示屏」将像素密度提升一倍，文字的锐度得以大大改善。但图像何如？为了保持现有网站的外观，图像将自动放大一倍。这便产生了「设备像素」和「 CSS 像素间」的分裂。

• 移动网站开发――CSS

Mobile css的标准也是有些复杂的，与前一篇文章中提到的类似，之前存在着一个W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事实上它们都是CSS 2.1的子集，而且内容非常接近，不同的是，WAP CSS 1.0针对移动设备加入了一些扩展，这些扩展通过-wap-前缀来实现。

• 页面模块化实现的条件和基本实现思路

页面模块化实现的很大的受制于页面的结构和表现；一个统一的页面结构和表现能很好的实现页面的模块话。比如一个“网友评论”模块这个会在很多地方使用到，比如日志，照片，等等，如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等，包括后台的数据存贮。《页面模块化（设想）》上面总结了页面模块化的优点，《前端模块化设计思路》也提到要做到模块化的前提条件：为了做到这...

• 如何创建CSS的对象？获取合适的粒度！

强硬的把CSS和HTML塞到PHP里面可以防止代码太枯燥(DRY)并最终导致代码臃肿，因为的CSS和HTML需要比PHP更细致的对象结构。事实上，PHP的模板不是天生合适的，因为每个模板包含了许多不同的HTML，以及以不同的方式相结合的CSS对象。

• HTML和CSS中的视觉语义

网络堆栈中的每一层都有它自己的结构。你不会期望将数据库架构用于构建PHP中间件，人们对于HTML和CSS的期望是一样一样的。HTML需要用一种能代表数据或内容的有意义的东西来书写，也就是我所谓的代码语义。HTML中的代码语义对于可移植性和易用性都是极为重要的。另一方面，CSS在堆栈中确实是一个独立的层，它需要能反映页面的视觉语义的属于自己的体系结构。

• 页面模块化（设想）

这段时间做一个项目，其实项目本身很简单，页面表现和结构甚至是交互都是现有的，就是将现有的多个项目页面一些功能做一下重新的拼装组合。看上去很简单，其实做起来非常痛苦。因为由于历史和前期项目开发的原因其实做这些拼装是很痛苦的事情。现在碰到的一个问题，要开一个C项目，使用A项目的头部、底部、布局，使用B项目的模块功能，同时A项目和B项目本身存在这千丝万缕的联系，很多功能A项目和B项目功能是重叠的，表现上又是很...

• 我们来做一个会呼吸的菜单吧!!

我们来做一个会呼吸的菜单吧!!

• HTML优化

在前段领域中，对Javascript和CSS的优化一直是大家关注的焦点，相应的压缩优化工具也非常丰富，相对而言对HTML优化的关注则显得有些冷淡。在Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法，例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等，唯独没有细说HTML优化。在整个前端的构成中，HTML是必不可少的一部分，而且是真正的展示“前端”。虽然与动辄十几K的Javascript相比，HTML...

• CSS float 父层定义的颜色无法显示

今天又遇到一个css 浮动的问题。抓耳挠腮，心里已经开始有怨气。这CSS也太愁人了吧，总是让我遇到这样奇怪的问题呢？不过仔细一看书，原来人家设计的时候已经认识到会遇到这种问题了。同时为了公平起见，让你也看一下，让你也痛苦一下。看来这作者真不是一般的闲。不过话说回来，我喜欢人家这种方式。毕竟只有在问题中，才能学会成长。

• CSS 简易浮动清除方法讨论

CSS白痴再来讨论一下CSS简易浮动清除的方法。没办法，菜鸟入门，一切都得从头学。大家认为很菜，很土的东西，我也得从头接触。不过我认为这一切都是值得的。到底发生了什么？首先，大家先看图片，这里我要告诉大家我想得到什么样的效果。

• CSS 水平居中之相对定位与负边距法

CSS水平居中的方法有很多。现在最常用的大概就是margin加上text-align的组合了。不过条条大道通罗马，条条小路通我家。今天还看到一个使用相对定位与负边距来使元素水平居中的方法。之前咋没玩过，乍一看还挺不理解。后来自己捉摸了一会儿，还画了两张图，终于理解了。