CSS属性总结——思路很清晰

CSS 属性总结

CSS的属性是用来改变文档元素的状态的，其中主要改变两方面的东西，即位置、样式，现在我们就将CSS的属性分为定位和样式两方面来总结,知识结构图如下：

 

 

用来定位的属性:

在同一个层里的定位(盒子模型)： 
             内补丁-外补丁    margin ：margin-top/...       Padding：padding-top...
             尺寸             height/width     max-height/min-height    max-width/min-width
             边框宽度

脱离原来的层：float、position

position 和 float属性都可以使元素脱离文档流，一般不会一起使用，
float以后的所有元素的高度是相同的，而position脱离文档流以后不再同一个高度，因此可以；用z-index来设置高度

float：

float:left/right;                浮动以后， 前面的东西会把后面的东西挡住，后面的东西会会在原来的流里面占用原来的位置
clear:left/right/both;           为避免为浮动的的块会被浮动后的元素影响，用clear() 方法忽略前面块的浮动
display:inline/block/none
visibility:visible,hidden，inherit(默认值，继承父对象的可见性)      被隐藏的对象仍然会占据物理空间

position：
position:static/absolute/fixed/relative    用来设置块与层位置的关系            
 注：        absolute：将对象完全放入到另外一个层里面，层的高度由z-index属性控制，对象的位置由top、left、fight、bottom属性控制
               relative：它的对象还是在原来的层，会占据原来层的物理空间，但是可以相对它的上一个对象进行偏移

-----------------------------------------------------------------------------------------------------------------------------------------------

用来做样式的属性： (常用的有：字体~、背景样式~、边框~)

字体：
设置字体属性后，标签内的文字就是按照这个属性来显示                                                                                 参数类型  
font是对字体的综合设定                                                           
color:#345456;                           字体颜色                                 #345456 / rgb(100,14,200);       
font-family:                              宋体;                                     各种字体的名称
font-size:12px;                          字体大小                                   像素点数、百分数
font-size-adjust:15px;                 是否强制转换字体为统一大小                   none     15px
font-stretch:wider;                     字体宽度的设定                            normal/narrower/wider        
font-style:italic;                       是否斜体                                   normal   italic
font-weight:normal;                        字体的粗细                                normal   400(是标准的粗细)
text-decoration:none;                      字体的装饰线                            none无装饰 /underline下划线 /line-through贯穿线 /overline上划线
text-shadow:text-shadow: red 0px 0px 5px;   文字阴影                              
text-transform:none;                         大小写转换                             none无转换发生/capitalize每个单词首字母大写/uppercase转换成大写 /lowercase转换成小写
line-height:6px;                             行间距                                  normal  像素点
letter-spacing:6px;                           字符间距                               normal  像素点
word-spacing:                                   单词间距

-------------------------------------------------------------------------------------------------------------------------------------------        
背景
综合属性：background:url(../images/icon-3.png) 0 0 no-repeat;
         
background-color:red;                          背景颜色                                同字体颜色
background-image:url(1.gif);                    背景图片                                可以使本地地址，也可以是网络连接
background-repeat:no-repeat;                                                            no-repeat   repeat   repeat-x   repeat-y
backguound-position:x y;    background-position-x 背景图片的位置                             x，y是长度值
                                      background-position-y
background-attachment                          背景事故相对文字固定                           scroll背景跟随内容滚动、fixed背景固定

-----------------------------------------------------------------------------------------------------------------------------------

Border:

列表：   list-style-type:none;
 list-style-image: url("images/ie.gif");