当前位置： 移动技术网 > IT编程>网页制作>CSS > css布局技巧

css布局技巧

2019年11月17日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网