| Width | 宽度属性 | width: 20px;/*设置宽度*/
min-width: 200px;/*设置最小宽度*/
max-width: 200px;/*设置最大宽度*/
|
| Height | 高度属性 | height: 20px;/*设置高度*/
min-height: 200px;/*设置最小高度*/
max-height: 200px;/*设置最大高度*/
|
| Color | 颜色属性 | color:red;
|
| Font | 字体属性 | /*声明设置所有字体属性*/
font: normal 14px/28px "微软雅黑","Microsoft YaHei","宋体","SimSun","Arial","arial";
/*表示顺序如下*/
font-style: italic;/*设置字体样式，此处italic为斜体，normal为正常*/
font-size: 14px;/*设置字体大小、尺寸*/
/*设置多个字体，不支持则选择下一个*/
font-famiy: "微软雅黑","Microsoft YaHei","宋体","SimSun","Arial","arial";
|
| Background | 背景属性 | background: #00FF00 url(bgimage.gif) no-repeat center center;/*声明设置所有背景属性*/
background-color: #FF0000;/*设置背景颜色*/
background-image: url(../Project/Logo.icon);/*设置背景图片*/
/*背景图片默认平铺父级元素，且padding区域也有背景*/
/*不 平铺：*/background-repeat:no-repeat;
/*横向平铺：*/background-repeat:repeat-x;
/*纵向平铺：*/background-repeat:repeat-y;
/*设置图片方向：可以为负数，也可以使用top、right、bottom、left、center*/
background-position: center center;/*向右移动量、向下移动量*/
/*设置图片是否固定*/
background-arrachment: fixed;/*表示背景会被固定，不会被滚动条滚走*/
background-size: 80px 60px;/*设置背景图像的尺寸*/
|
| Text | 文本属性 | text-align: center;/*设置文本对齐方式*/
text-indent: 50px;/*规定文本首行缩进*/
text-shadow: 5px 5px 5px #FF0000;/*规定文本的阴影效果*/
text-transform: none;/*控制文本的大小写,capitalize每个单词以大写字母开头*/
line-height: 50px;/*设置行高*/
|
| Border | 边框属性 | border: 5px solid red;/*声明设置所有边框属性*/
border-top: thick doube #ff0000;/*设置上边框的样式*/
border-top-width: 5px;/*设置上边框的宽度*/
border-top-style: double;/*设置上边框的样式*/
border-top-color: #ff0000/*设置上边框的颜色*/
border-right: thick doube #ff0000;/*设置右边框的样式*/
border-top-width: 5px;/*设置右边框的宽度*/
border-top-style: double;/*设置右边框的样式*/
border-top-color: #ff0000/*设置右边框的颜色*/
border-bottom: thick doube #ff0000;/*设置下边框的样式*/
border-top-width: 5px;/*设置下边框的宽度*/
border-top-style: double;/*设置下边框的样式*/
border-top-color: #ff0000/*设置下边框的颜色*/
border-left: thick doube #ff0000;/*设置左边框的样式*/
border-top-width: 5px;/*设置左边框的宽度*/
border-top-style: double;/*设置左边框的样式*/
border-top-color: #ff0000/*设置左边框的颜色*/
|
| Padding | 内边距属性 | padding: 10px 20px 10px 20px;/*声明设置所有内边距属性*/
padding-top: 20px;/*设置上内边距*/
padding-right: 20px;/*设置右内边距*/
padding-bottom: 20px;/*设置下内边距*/
padding-left: 20px;/*设置左内边距*/
/*padding是描述父子元素和父子元素的距离*/
/*多使用padding，少使用margin*/
/*Padding会影响盒子大小，继承宽度的Padding不会增宽*/
|
| Margin | 外边距属性 | margin: 10px 20px 10px 20px;/*声明设置所有外边距属性*/
margin-top: 20px;/*设置上外边距*/
margin-right: 20px;/*设置右外边距*/
margin-bottom: 20px;/*设置下外边距*/
margin-left: 20px;/*设置左外边距*/
/*margin是描述兄弟元素和兄弟元素的距离*/
/*使用margin居中表示：margin: 0 auto;盒子必须有width宽度*/
/*浮动的盒子无法使用margin: 0 auto;来居中*/
/*父级元素中，没有border属性时，子元素的margin是为行对齐的*/
/*margin:0 auto;只能居中盒子，不能居中文本；居中文本使用text-align:center;*/
|
| Float | 浮动属性 | float: left;/*向左浮动*/
float: right;/*向右浮动*/
/*清除浮动1：父级元素增加高度*/
/*清除浮动2：使用clear:both;*/
/*清除浮动3：外墙或内墙，中间或结束加div*/
/*清除浮动4：使用overflow:hidden;溢出隐藏，可以撑出父级元素的高度*/
|
| Display | 显示模式 | /*将行级元素变为块级元素，可以设置宽高，如不设置，则继承父级宽高;显示元素，不占有位置*/
display: block;
display: inline;/*将块级元素变为行级元素，不可以设置宽高*/
display: none;/*隐藏*/
|
| Visibility | 元素可见 | Visibility：hidden;/*隐藏*/
Visibility: visible;/*显示，占有位置*/
|
| Overflow | 溢出隐藏 | overflow: hidden;/*溢出隐藏*/
|
| Line-Height | 行高属性 | line-height:12px;/*行高属性*/
|
| Text-Indent | 缩进属性 | text-indent:2em;/*首行缩进2个汉字*/
|
| 超链接伪类 | 超链接伪类 | /*超链接伪类用:冒号表示，且不可更改顺序*/
a:link{color:red;}/*表示用户没有点击过*/
a:visited{color:red;}/*表示用户访问过*/
a:hover{color:red;}/*表示鼠标悬停的样式*/
a:active{color:red;}/*表示用户点击时的样式*/
/*a标签属于特殊标签，不能继承text、font等属性*/
|
| 无序列表的圆点 | 无序列表的圆点 | ul{list-style: none;}/*去掉无序列表的圆点*/
|
| 相对定位 | 相对定位 | position: relative;/*让元素相对原来的位置进行位置调整，不会脱离标准文档流*/
/*使用top、right、bottom、left属性移动*/
/*上一层或下一层使用z-index属性，默认为0，只有定位的元素才能使用*/
/*值大压盖值小的*/
|
| 绝对定位 | 绝对定位 | position: absolute;/*比相对定位灵活，会脱离标准文档流。定位参考点是页面左上角或父级元素左上角*/
/*使用top、right、bottom、left属性移动*/
/*绝对定位居中：left:50%; margin-left:盒子总宽度的一半;*/
/*上一层或下一层使用z-index属性，默认为0，只有定位的元素才能使用*/
/*值大压盖值小的*/
|
| 固定定位 | 固定定位 | position: fixed;/*会脱离标准文档流,参考点是浏览器窗口，IE6不兼容*/
/*使用top、right、bottom、left属性移动*/
/*上一层或下一层使用z-index属性，默认为0，只有定位的元素才能使用*/
/*值大压盖值小的*/
|
| 静态定位 | 静态定位 | position: static;/*默认定位，正常显示文档流中*/
|
| 鼠标指针 | 鼠标指针 | Cursor: default; /*默认光标*/
Cursor: auto; /*默认。浏览器设置的光标。*/
Cursor: crosshair; /*光标呈现为十字线。*/
Cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/
Cursor: move; /*此光标指示某对象可被移动。*/
Cursor: e-resize; /*此光标指示矩形框的边缘可被向右（东）移动。*/
Cursor: ne-resize; /*此光标指示矩形框的边缘可被向上及向右移动（北/东）。*/
Cursor: nw-resize; /*此光标指示矩形框的边缘可被向上及向左移动（北/西）。*/
Cursor: n-resize; /*此光标指示矩形框的边缘可被向上（北）移动。*/
Cursor: se-resize; /*此光标指示矩形框的边缘可被向下及向右移动（南/东）。*/
Cursor: sw-resize; /*此光标指示矩形框的边缘可被向下及向左移动（南/西）。*/
Cursor: s-resize; /*此光标指示矩形框的边缘可被向下移动（南）。*/
Cursor: w-resize; /*此光标指示矩形框的边缘可被向左移动（西）。*/
Cursor: text; /*此光标指示文本。*/
Cursor: wait; /*此光标指示程序正忙（通常是一只表或沙漏）。*/
Cursor: help; /*此光标指示可用的帮助（通常是一个问号或一个气球）。*/
|
| 内容溢出 | 内容溢出 | overflow: visible; /*默认值。内容不会被修剪，会呈现在元素框之外。*/
overflow: hidden; /*内容会被修剪，并且其余内容是不可见的。*/
overflow: scroll; /*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。*/
overflow: auto; /*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
overflow: inherit; /*规定应该从父元素继承 overflow 属性的值。*/
|
