说起浮动大家并不陌生,因为有 Word 中看到太多的浮动围绕现象。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”

大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构，但他不能让我们实现美丽的页面制作，此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果，但其在不同的浏览器下是有不可预知的效果，为了让你的CSS能解决这些不一致下，今天给大家介绍25个CSS技巧代码，我相信这些对你肯家有很大的作用。

一、使用text-indent来隐藏文本

这个常用在图片替换文本中，最常见的就是使用使用图片来替换Logo，这个是非常有用的，使用“text-indent”我们可以达到图片替换文本的效果，而且方便搜索引擎的优化，还能支持阅读器阅读网页内容：

			h1 {
				text-indent:-9999px;
				margin:0 auto;
				width:400px;
				height:100px;
				background:transparent url("images/logo.jpg") no-repeat scroll;
			}
		

当然，这个只是使用“text-indent"替换文本的一种效果，其实他还有更多的方法。

扩展阅读：

早前在《CSS3 box-shadow》一文中详细介绍了Box-shadow的使用。

Float在CSS中是一个重中之重的东西，因为他是一个强大的，极有作用的一个CSS属性，但如果你没有理解透这个Float的话，那将是一个难搞的事情，特别是对于初学者来说，更是一个棘手事情。那么从今天开始我们一起来探讨这个Float。

刚才说过了，Float是一个极有用的属性，首先表现在布局上，全前提是你要清楚他，了解他。这样才能达到知已知彼，方能百战百胜。下面我们先来看一段代码：

HTML Markup

很多网站的logo都使用图片替换文本来实现，而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过，那么今天我老话重谈，整理了十种图片替换文本的制作方法。希望对大家有所帮助。

制作原理：

使用图片替换文本，其原理是相当的简单：就是在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点，优点就是能实现一些特殊的页面效果，缺点就是需要加载图片，而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处，另外据说会对搜索引擎的搜索有影响，对于这一点没有考究过。那么我们也不去控寻这方面的问题，我们一起来看今天所要说的图片替换文本的制作方法。

大家都知道，在Web的Form中美化是最头痛的，尤其是表单中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select这些元素我们单单只使用CSS是无法匹配设计图的，像背景颜色或者背景图片，甚至说margin和padding等等在各浏览器下都没法实现一致的效果，具体大家可以看看这里所展示的页面效果。为了解决这样的问题，我们只有另选其他的途径。使用CSS和js配合，使用他们实现各浏览器的统一样式。

前面我们整了一个有关于CSS3的颜色属性的教程《CSS3 RGBA》，在这个教程中主要介绍了CSS3的RGBA属性的使用。传统上，我们给CSS设置颜色一般都是十六进制和rgb格式，比如“#abcdef”，而使用相对应的RGB应该就是“brg(171，205，239)”。

CSS3的到来，在CSS样式中，我们增加了一些其他的颜色控制方式，比如：HSL(H：色调，S:饱和度，L:亮度)和透明度apacity。不幸的是，现在CSS3的这些属性只有Firefox3+,Opera10+,Chrome1.0+和Safari3+支持，而在IE6-8是不支持这些属性，但Internet Explorer 9开始支持这些属性。

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧：

1. 左侧固定宽，右侧自适应屏幕宽；
2. 左右两列，等高布局；
3. 左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）
4. 要求不用JS或CSS行为实现；

仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事：

CSS3的出现无疑是一个强大的新东西，我现在在一些Web项目中开始在使用，很方便，同也很高兴能开始使用这一种新的技术。其先进的功能，给我们Web的页面制作真的带来极大的方便，比如说圆角、阴影、渐变等。这里我总结了常用的12种CSS3属性的使用，来帮助大家一起学习CSS3的新功能。

一、圆角——border-radius

早期制作元素的圆角都是使用图片来实现，这样需要增加多个标签来实现，而且对于多色的圆角，给我们的页面制作会带来极大的不便。有了CSS3的圆角属性——border-radius后，我们不必会每种不同的圆角制作图片而烦恼了，我们可以直接使用CSS3来制作。

		.demo {
			-moz-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
			-webkit-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
			border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
		}
	

具体效果如下：

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。