CSS属性与值的功能

background

.background{
    background-color: #000000;/*性设置元素的背景颜色*/
    background-image: url(bgimage.gif);/* 属性为元素设置背景图像 */
    background-repeat: repeat-y;/*属性设置是否及如何重复背景图像*/
    background-attachment: fixed;/* 属性设置背景图像是否固定或者随着页面的其余部分滚动*/
    background-position:center;/*属性设置背景图像的起始位置*/
    /*background-color，image，repeat，attachment，position*/
    background: #00FF00 url(bgimage.gif) no-repeat fixed top;
    background:rgba(0, 0, 0, .3);/*alpha 透明度*/
}

border

.border{
    /* border-width，style,color */
    border:5px solid red;
    border-collapse: collapse; /* 属性设置表格的边框是否被合并为一个单一的边框 */
    border-spacing: 10px 50px; /* 属性设置相邻单元格的边框间的距离 */
    border-radius:25px;/*属性允许您为元素添加圆角边框*/
}

box

.box{
	/*			水平阴影 垂直阴影  尺寸 	 颜色
	box-shadow: h-shadow v-shadow spread color */
    box-shadow: 10px 10px 5px #888888;
}

clear

.clear{
    clear: both;/*属性规定元素的哪一侧不允许其他浮动元素*/
}

content

.content{
    content: '';/*属性与 :before 及 :after 伪元素配合使用，来插入生成内容*/
}

display

.display{
	display: none;/* 隐藏元素，不保留元素原有位置 */
    display: inline;/*转换为行内元素 margin左右 padding*/
    display:block;/*转换为块状元素 都有效*/
    display:inline-block;/*转换为行内块状元素 width height*/
}

font

.font{
    font-style: italic;/* 字体的风格 */
    font-weight:bold;/* 属性设置文本的粗细 */
    font-variant:small-caps;/* 把段落设置为小型大写字母字体 */
    font-size: 200%;/* 属性可设置字体的尺寸 */
    font-family:"Times New Roman",Georgia,Serif;/* 规定元素的字体系列 */
    /* font-style,variant,weight,size/line-height,family */
    font:italic bold 12px/20px arial,sans-serif;
}

float

.float{
    /* 标准流中放浮动流，标准流设置 width, height 
    height 如果是 auto 必须清除浮动*/
    float: left;
}

line

.line{
    line-height:100%;/* 设置行间的距离（行高） */
}

list

.list{
    list-style: none;/*简写属性在一个声明中设置所有的列表属性*/
}

overflow

.overflow{
    overflow: hidden;/* 隐藏溢出盒子的部分元素 */
    overflow: auto;/* 常用，溢出盒子有滚动条，反之没有 */
    overflow: scroll;/* 有没有溢出滚动条都存在 */
}

position

.position{
    position: relative;/* 相对定位，不脱标 ，以原来位置定位*/
    position: absolute;/* 绝对定位，脱标，没有定位元素以浏览器窗口为准定位 */
    position: fixed;/* 绝对定位，脱标，有没有定位元素都以浏览器窗口为准定位 ，并不受滚动条影响*/
}

text

.text{
    text-align: center;/*把文本排列到中间*/
    text-align: left;/*把文本排列到左边*/
    text-align: right;/*把文本排列到右边*/
    text-decoration: overline;/*文本上的一条线*/
    text-decoration: underline;/*文本下的一条线*/
    text-decoration: line-through;/*穿过文本下的一条线*/
    text-decoration-color: teal;/*规定 text-decoration 的颜色*/
    text-indent: 2em;/*首行缩进2个字*/
    text-shadow: 5px 5px 5px #FF0000;/*属性向文本设置阴影*/
}

visibility

.visibility{
    visibility: hidden;/* 隐藏元素，会保留元素原来位置 */
}

选择器

a:link/*选择所有未访问过的链接*/
a:visited/*选择所有已访问的链接*/
a:hover/*选择鼠标指针位于其上的链接*/
a:active/*选择活动链接*/
input:focus/*选择获得焦点的 input 元素*/

问题解决

浮动

/* 解决标准流中浮动导致盒子height为0的问题 */
.clearfix:after{
    content: '';/*属性与 :before 及 :after 伪元素配合使用，来插入生成内容*/
    display: block;
    height: 0px;
    clear: both;/*属性规定元素的哪一侧不允许其他浮动元素*/
    visibility: hidden;/*属性规定元素是否可见*/
}

.clearfix{
    *zoom: 1;/* IE6,7专有 */
}
-----------------------------------------------------------------------------------------------------------------------------------
/*第二种解决方法*/
.clearfix:before, .clearfix:after{
    content: '';
    display: table;
}

.clearfix:after{
    clear: both;
}

.clearfix{
    *zoom: 1;
}