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

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:
CSS属性总结——思路很清晰

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

上一篇:RabbitMQ安装流程和注意事项


下一篇:消息中间件系列教程(04) -RabbitMQ -简介&安装