css布局技巧

Posted sspofa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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初始化是指重设浏览器的样式

以上是关于css布局技巧的主要内容,如果未能解决你的问题,请参考以下文章

2018-05-22 CSS 左右布局左中右布局以及一些小技巧

css有用的代码片段

css CSS技巧,看到CSS布局不一致

常用前端布局,CSS技巧介绍

css4种布局技巧-float

HTML与CSS布局技巧总结