通过最近几次对网页布局的经历，总结几个常见并且容易出错的的布局样式如下:

定位

static：静态定位\rrelative：相对定位\rabsolute：绝对定位\rfixed：固定定位

圆角

border-radius: ? px;\rborder-radius: ? %;\r/*\r如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。\r但是，如果你要在四个角上一一指定，可以使用以下规则：\r四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。\r三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角\r两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角\r一个值： 四个圆角值相同\r*/\r\r	属性				描述\rborder-radius			所有四个边角 border-*-*-radius 属性的缩写\rborder-top-left-radius		定义了左上角的弧度\rborder-top-right-radius		定义了右上角的弧度\rborder-bottom-right-radius	定义了右下角的弧度\rborder-bottom-left-radius	定义了左下角的弧度

添加阴影

box-shadow:10px 10px 5px #888;

添加多个背景图像

background-image:url(img_flwr.gif),url(img_tree.gif);/* 逗号隔开 */

css文本框文字顶部对齐

vertical-align:top;

背景是否重复

background-repeat:no-repeat; /* 不重复 */\rbackground-repeat:repeat; /* 重复 */

删除线

text-decoration: line-through;

省略号

overflow: hidden;\rtext-overflow:ellipsis;\rwhite-space: nowrap;\rwidth: 100px; /* 必须有宽度 */

清除默认的margin 和 padding

body{\r    margin: 0;\r    padding: 0;\r}\r\rul{\r    margin: 0;\r    padding: 0;\r}\r\rul li{\r    list-style-type:none; /* 清前面圆点 */\r    margin: 0;\r    padding: 0;\r}

a标签移上去有 “小手”

a:hover{\r    cursor:pointer;\r}

超过几行省略

display: -webkit-box;\r-webkit-box-orient: vertical;\r-webkit-line-clamp: n; /* n 为具体行数 */\roverflow: hidden;