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