zoukankan      html  css  js  c++  java
  • 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");

  • 相关阅读:
    简易计算器
    方法的声明和使用
    真与假与c#,java中的不同之处
    SD卡添加文件,添加不进去,报 Read-only file system错误
    BitMap画图
    绘制一些基本图形(例如矩形,圆形,椭圆,多边形)
    SufaceView(绘图类)
    CanVas类(绘图类)
    回车键
    [动态规划][LIS+方案数]低价购买
  • 原文地址:https://www.cnblogs.com/key1309/p/3400915.html
Copyright © 2011-2022 走看看