zoukankan      html  css  js  c++  java
  • 样式属性

    样式属性

    大小
        width:宽度
        height:高度


    背景
        background-color:背景色
        background-image:背景图片
        background-repeat:背景图的平铺方式
        background-position:背景图片位置
        background-attachment:设置背景图片是否滚动  需要与 overflow:scroll 配合使用
        background-size :景图的大小 200px 200px


    字体
        font-family:字体样式
        font-size字体大小: 12px  14px
        font-style:italic倾斜
        font-weight:bold加粗
        text-decoration:underline下划线
                                  overline上划线
                                  line-through删除线
                                  none没有,用来去掉超链接的下划线

                               
        color:字体颜色


    对齐方式
        text-align:水平对齐方式
        vertical-align:垂直对齐方式,配合行高使用
        line-height:行高
        text-indent:缩进 单位像素


    边界边框
        margin:外边距  上右下左
        padding:(1.)内边距 上右下左 (2.) 如果加了内边距,该元素会相应的变大
        border:1px solid #60F 简写方式  第一个边框粗细 第二个边框样式 第三个边框颜色


    列表方块
        list-stylenone:将列表前面的序号去掉
        list-style-image:可以将前面的序号变为图片


    格式与布局
        位置
            (1)position:
                           fixed固定: 相对于浏览器边框位置固定
                           absolute绝对位置: 相对于父级元素(浏览器,绝对定位的上级)
                           relative相对位置: 相对于自身应该出现的位置
            (2)top: 距离上边的距离
            (3)right: 距离右边的距离
            (4)bottom: 距离下边的距离
            (5)left: 距离左边的距离
        流
            (1)float:
                       left :向左流
                       right: 向右流
            (2)clear:
                       both :清掉流
                       z-index分层 :值越大越靠上


    其它
        display: 显示block和隐藏none,不占位置
        visibility: 显示visible和隐藏hidden,占位置
        overflow: 超出范围 hidden隐藏

        scroll: 超出范围出滚动条
        透明: opacity:0.5;  -moz-opacity:0.5(火狐);filter:alpha(opacity=50)(IE浏览器);-webkit-opacity:0.5(谷歌)
        圆角: border-radius:5px;
        阴影: box-shadow:0 0 5px white;

  • 相关阅读:
    享元模式及php实现
    共享内存
    LCD触屏驱动
    I2C驱动
    C++ & java小结
    使用GlobalKey启动APP
    socketpair通信
    inotify和epoll
    C语言之二叉树
    灯光系统
  • 原文地址:https://www.cnblogs.com/zhaohui123/p/6544353.html
Copyright © 2011-2022 走看看