写CSS和CSS3的一些基本原则

一、设置body标记的 CSS 基础样式

body{
 background-color:#EEEEEE;
 color:#000000;
 margin: 0;
 padding: 0;
 text-align: left;
 font-size: 100%;
 font-family: sans-serif;
 }

将背景颜色设置为白色 (background-color)，以确保字体颜色是黑色的 (color)。它还可确保所有内容边缘都与浏览器窗口边框相匹配（margin 和 padding），而且标记将文本内容向左水平对齐 (text-align)。最后，该样式将字号设置为浏览器默认字号 (font-size) 并使用一个 sans-serif（也就是一种边缘四周没有细微装饰的字体）字体集 (font-family)

二、使用CSS3增强的 < div> 效果

如：圆角功能

webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;

让该标记适用于基于 Mozilla（比如 Mozilla Firefox）和基于 Webkit（比如 Apple Safari）的旧浏览器。如果您愿意，可以将上述 3 个属性设置为不同值并让样式在 Firefox 和 Google Chrome 中显示不同的效果。

如：边框的阴影功能

webkit-box-shadow:8px 8px 6px #AAAAAA;
 -moz-box-shadow:8px 8px 6px #AAAAAA;
 box-shadow:8px 8px 6px #AAAAAA;

第一个属性是水平阴影，第二个是垂直阴影，第三个是模糊量，第四个是阴影的颜色。可以在模糊量和阴影之间放置另一个属性（另一个与阴影的覆盖范围相关的大小值），但是此属性似乎没有广泛使用。

如：文字的阴影功能

li { text-shadow:2px 2px 2px #AA00FF; }
ul#nav li:hover { text-shadow:2px 2px 2px #AA00FF; }

三、CSS3 属性增强的 CSS 导航示例

a, a:link, a:active, a:visited {
 color:#000000;
 text-decoration:none;
 font-weight:bold;
 background-color:#EEEEEE;
 }
 li {
 text-align:center;
 list-style-type:none;
 width:50px;
 padding:10px;
 margin:10px;
 background-color:#EEEEEE;
 border:1pxsolid#000000;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
 -moz-transform:rotate(-20deg);
 -webkit-transform:rotate(-20deg);
 transform:rotate(-20deg);
 }
 li:hover {
 text-decoration:underline;
 background-color:#FFFFAA;
 }

四、创建没有表格的列

 <div id="left" class="equal-column"> < /div>
 < div id="right" class="equal-column"> < /div>
 < div class="something-below"> < /div>

css为

 div.equal-column { width:45%; height:100%: }
 div#left{ float:left; }
 div#right{ float:right; }
 div.something-below{ width:100%; clear:both;}

将两列都设置为宽 45%，然后将左侧的列固定到左侧，将右侧的列固定到右侧。最后，使用另一个带有类 something-below 的 < div>，我们希望它占据两列下的整个屏幕。这是一种有用的技术，可用于快速、轻松地在屏幕上获得两列

在 CSS3 中，还有另一个巧妙的概念，那就是文本列。换句话说，如果 column-count 属性设置为一个数字，一个段略会自动拆分为两段：

div#textual-columns {
 -webkit-column-count:2;
 -moz-column-count:2;
 column-count:2;
 }

五、使用网络字体

Google Font API 和 Typekit 提供了它们自己的系统来跨系统下载漂亮的字体。它的工作原理类似于 (X)HTML、JavaScript 和 CSS3 的结合，所以可能仅适用于比较现代的浏览器。

至于现在，我们主要关注 Google Font API，它可以免费、轻松地使用。要应用此功能，首先在 (X)HTML 头部添加一行表明您希望使用 Google Font Directory 中的 Architects Daughter 字体

< link href='http://fonts.googleapis.com/css?family=Architects+Daughter'rel='stylesheet'type='text/css'>

然后，使用 CSS 应用样式：

body { font-family:'Architects Daughter',serif;}

 网站现在使用了 Architects Daughter Google 字体。但是，我的建议是不要为整个网站使用 “太过漂亮的” 字体。请确保您的网站继续保持干净、紧凑和清新。

六、其他

1、3像素问题及解决办法

当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高的话，解决方法：加一个空白DIV，并设置样式clear:both;

2、上边容器浮动后，下边的容器跟着浮动，造成页面错乱

如footer必须要单独占一行，但当sidebar浮动后，content的高度小于 sidebar的高度时，footer也跟着浮动到sidebar右侧了，造成页面错乱。解决办法是在maincontent和footer之间插入一个 容器，设置样式 clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除，即可使页面正常

3、当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>中，这样应该可以通过验证了

4、相对定位与绝对定位

规划页面时，许多时候需要用到相对定位或绝对定位，这里边有个技巧，掌握后有些地方就不用繁冗的js了。就是当父容器使用相对定位后，此时子元素再使用绝对定位，位置是相对于父元素。如果父元素没有定位，那么子元素的绝对定位是相对于浏览器

5、IE6双倍边距bug

当页面内有多个连续浮动时，如图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/31/2664739.html