欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css布局技巧

程序员文章站 2022-08-20 07:52:48
CSS用户界面样式 1. 鼠标样式currsor ~~~ li{ cursor:pointer; } ~~~ 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 | 属性值 | 描述 | | | | | default | 默认 | | pointer | 小手 | | move | 移动 ......

css用户界面样式

  1. 鼠标样式currsor

    • li{
      cursor:pointer;
      }
    • 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状

      • 属性值 描述
        default 默认
        pointer 小手
        move 移动
        text 文本
        not-allowed 禁止
  2. 轮廓线 outline

    • 给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的边框
  3. 防止拖拽文本resize

    • textarea{
      resize:none;
      }

vertical-align属性应用

  1. css的vertical-align经常设置图片或者表单(行内块元素)和文字垂直对齐

  2. vertical-align:baseline|top|middle|bottom
    描述
    baseline 默认,元素放在父元素的基线上
    top 把元素的顶端与行中最高元素的顶端对齐
    middle 把此元素放置在父元素的中部
    bottom 把元素的顶端与行中最低的元素顶端对齐
  3. 解决图片底部默认空白缝隙问题

    • bug:图片底部会有一个空白缝隙,原因时行内块元素回和文字的基线对齐
    • 主要解决方法
      1. 给图片添加vertical-align:middle| top|bottom等
      2. 把图片转换为块级元素;display:block;

溢出文字省略号代替

  1. 单行文本溢出用省略号显示

    • 先强制一行内文本显示 white-space:nowrap;
    • 超出部分隐藏 overflow:hidden;
    • 文字用省略号代替超出的部分 text-overflow:ellipsis;
  2. 多行文本溢出用省略号显示

    • 多行文本显示省略,有较大的兼容先问题,适用于webkit浏览器或者移动端

    • overflow:hidden;
      text-overflow:ellipsis;
      /*弹性伸缩盒子模型显示*/
      display:-webkit-box;
      /* 限制在一个块元素显示文本的行数*/
      -webkit-line-clamp:2;
      /*设置或检索伸缩盒子对象的子元素的排列方式*/
      -webkit-box-orient:vertical;

常用布局技巧

  1. margin负值的运用

    • 让每一个盒子margin往左移动-1px正好压住相邻的盒子
    • 鼠标经过某个盒子时提高当前盒子的层级(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)
  2. ,文字围绕浮动元素

  3. css三角强化

    • div{
      width:0;
      height:0;
      border-color:transparent red transparent transparent;
      border-style:solid;
      border-width:22px 8px 0 0;
      }

css初始化

  1. css初始化是指重设浏览器的样式