css布局技巧

2019-11-16 16:01:18来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

css布局技巧

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初始化是指重设浏览器的样式

原文链接:https://www.cnblogs.com/SSPOFA/p/11873403.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML列表简单介绍

下一篇:flex招式心法