• css:style样式大全


    一、text字体font

    二、背景

    属性 作用
    background-color pink  
    background-image
    url(images/l.jpg)
    添加图片
    background-repeat
    repeat
    平铺
     
    no-repeat
    不平铺
     
    repeat-x
    横向平铺
     
    repeat-y
    纵向平铺
    background-position
    x坐标 y坐标
    50px 10px
     
     
    right top
    右上角
     
    left bottom
    左下角
      center center
    水平居中 垂直居中
     
    center left
    则两个值前后顺序无关 因为是方位名词
     
    top
    如果只指定了一个方位名词,另一个值默认居中对齐
     
    center 10px
    水平居中 上边10px
    background-position center top 一般用于body等大背景的设置,
    background-attachment
    fixed
    背景固定,互动滚轮时背景不移动
     
    scroll
    滚动,默认也是滚动的
    background
    #ccc url(images/sms.jpg) no-repeat fixed center top
    (背景简写)背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
    background
    rgba(0, 0, 0, .2) 背景透明  因为是CSS3 ,所以 低于 ie9 的版本是不支持的。
         

    三、部分常用属性

      属性 作用
      text-align center 字体居中,盒子里面的文字 行内元素 、行内块居中对齐水平居中
     
    border-radius
    10px
    圆角
       
    50%
    圆形
     
    box-shadow
    0 15px 30px rgba(0,0,0,.3)
    水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;
      text-decoration underline 有下划线
        none 没有下划线   (一般用于a标签)
      overflow scroll
    显示滚动条总是会显示 - 不会超出盒子大小,内容能显示全但是  太丑了我们不常用
        hidden 超出盒子大小的部分,隐藏起来
        auto 如果超出盒子大小就显示滚动条,不超出就不显示
     
    text-overflow
    ellipsis
    文字溢出 用省略号替代  ellipsis 省略号  (一般结合overflow:hidden一起使用)
     
    white-space
    normal
    文字自动换行,文字显示不开时(默认值换行的)
       
    nowrap
    文字强制一行内显示,除非遇到 br 换行标签
      dispaly block 块级元素
        inlinebolck 行内块元素
        inline 行内元素
        none 隐藏元素,不保留位置
     
    visibility
    hidden 隐藏元素,保留位置
       
    visible
    显示元素,默认的值
      positon relative 相对定位  (相对自己原来的位置,保留原来的位置,不脱离标准文档流)
        absolute 绝对定位 (相对浏览器,或者设有定位的父元素,脱离标准文档流,不保留原来的位置)
        fixed 固定定位 (相对于浏览器的位置)
     
    z-index
    1 填写数字,数字越大,在最上面一层
      cursor
    default
    默认的箭头(鼠标样式)
       
    pointer
    小手
       
    move
    移动 
       
    text
    文本 
       
    not-allowed
    禁止
     
    outline
    none
    取消轮廓线,input、textarea标签中的默认样式,就是焦点时会有一个大的边框,取消它
     
    resize
    none
    防止用户拖拽文本域,比如在textarea标签中
     
    vertical-align
    middle
    垂直居中,但是对于块级元素是没有作用的
       
    top
    垂直方向 顶部对齐
       
    bottom
    垂直方向 底部对齐
       
    baseline
    垂直方向与基线对齐(底部对齐,但是底部和父盒子之间会有白边缝隙)
    解决方法:不要设置基线对齐,或者将该标签设置为块级元素 display:block
          注意:如果是图片和文字的对齐方式,直接给图片img标签来设置vertical-align属性即可。
        word-break  break-all 英文语句换行 (在area标签中使用)  有时候英文不换行的时候使用
           

    ----

  • 相关阅读:
    Oracle--数据增删改
    Oracle--约束
    Oracle--常用数据类型、创建表
    Oracle基础入门--(用户、角色、权限)
    Oracle基础入门--(数据库、数据库实例、表空间)
    jQuery中的表单验证
    js 判断微信浏览器
    VUE 之 webpack 封装方法例子
    原创自己写的方法,获取url上的参数,返回一个对象
    axios拦截器配合element ui实现http请求的全局加载
  • 原文地址:https://www.cnblogs.com/cyycyhcbw/p/13131804.html
Copyright © 2020-2023  润新知