背景与前景：
背景：600px; 背景的宽
height:600px; 背景的高
background—color: 颜色; 背景色
background—image:url(路径); 背景图片
backgeound—attachment:scroll; 背景随字体滚动 scroll 滚动 fixed 固定
background—repeat:no-rpeat; 背景图不平铺 repeat，平铺； repeat—x，横向平铺； repeat—y，纵向平铺；
background—position:ceter; 背景图居中
background—position:right top; 背景图放在右上角
background—position:left 30px top 30px; 离左边30像素，离上边30像素
background—size:width 500px height 500px; 背景色宽500像素高500像素 背景色大小先写宽度在写高度
字体;
font—family:微软雅黑; 字体
font—size:14px; 字体大小 14px普通正文字体大小 12px 页脚小字体 16px 大字体
font—weight:bold; bold字体加粗，normal是正常
font—style:italic; 字体倾斜
color： ; 颜色
text—decoration:underline; 下划线 overline是上划线 line—through是删除线 none是去掉下划线
text—align:center; 水平居中对齐 left 左对齐 right 右对齐
vertical—align:middle; 垂直对齐 top 顶部对齐 botton 底部对齐
line—height:24px; 行高 与垂直对齐同时存在
text—indent:28px; 首行缩进量
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #text{ width:600px; height:600px; background-color:#F0F; background-image:url(01.jpg.200.150.jpg); background-attachment:scroll; /*背景随字体滚动*/ background-repeat:no-repeat; /*背景图片不平铺*/ background-position:center; /*背景图居中*/ background—size:width 500px hight 500px; font-family:微软雅黑； font—size:30px; font—weight:bold; /*字体加粗*/ font-style:italic; /*字体倾斜*/ color:#F00; text-decoration:line-through; /*删除下划线*/ text-align:center; /*水平对齐*/ vertical-align:middle; /*垂直居中对齐*/ line—height:600px; /*与垂直居中对齐同时存在*/ } </style> </head> <body> <div id="text">测试文字</div> <div type="text—indent:28px">柔和的阳光斜挂在苍松翠柏不凋的枝叶，显得那么安静肃穆，绿色的草坪和白色的水泥道貌岸然上，脚步是那么轻起轻落，大家的心中却是那么的激动与思绪波涌。如果你现在就已经觉得自己是一个毫无希望的失恋者，那我也没什么办法，只能向你免费提供一个古老的偏方——时间，加上别的女人。 </div> </body> </html>
边界与边框：
margin 外边距
margin-top 内容与边框的上间距
margin-left
margn-right
margn-botton
margin:20px 0px 0px 20px; 上，右，下，左，内容与边框的四边间距顺时针顺序
magin:20px; 上右下左四边外边框宽度都为10像素
padding 内边距
padding-top
padding-left
padding-right
padding-botton
paddng:20px 0px 0px 0px;
padding:20px;
加入padding元素会变大，变大值为padding的值
border:5px solid blue; 四边框：5像素宽，实线，蓝色
border-top:5px solid blue; 上边框：5像素宽，实线，蓝色
<style type="text/css"> #test{ margin:20px; width:300px; height:300px; background-color:#06F; padding:20px; border:5px solid #9F3; } #erji{ width:200px; height:200; background-collor:#FF6; } </style> </head> <body> <div id="test"> <div id="erji"></div> </div> </body>
列表与方块：
list-style 列表样式
list-style:none; 取消序号
list-style:circle; 序号变为圆圈，样式相当于无序
list-style-image:url(图片地址); 图片做序号
格式布局：
position: fixed 固定位置 相对于浏览器边界
position: absolute 绝对位置 相对于浏览器边界
position: relative 相对定位 相对该元素本该出现的位置
right:
height:
bottom:
top:
分层：
z-index 层级 数字越大越靠上
流式布局：
overflow:hidden; 超出范围时隐藏，scroll，显示出滚动条
float:left;
float:right;
<div style="clear:both"></div> 截断流