css布局技巧
Posted sspofa
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css布局技巧相关的知识,希望对你有一定的参考价值。
CSS用户界面样式
鼠标样式currsor
li{ cursor:pointer; }
设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状
属性值 描述 default 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止
轮廓线 outline
- 给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的边框
防止拖拽文本resize
textarea{ resize:none; }
vertical-align属性应用
CSS的vertical-align经常设置图片或者表单(行内块元素)和文字垂直对齐
vertical-align:baseline|top|middle|bottom
值 描述 baseline 默认,元素放在父元素的基线上 top 把元素的顶端与行中最高元素的顶端对齐 middle 把此元素放置在父元素的中部 bottom 把元素的顶端与行中最低的元素顶端对齐 解决图片底部默认空白缝隙问题
- bug:图片底部会有一个空白缝隙,原因时行内块元素回和文字的基线对齐
- 主要解决方法
- 给图片添加vertical-align:middle| top|bottom等
- 把图片转换为块级元素;display:block;
溢出文字省略号代替
单行文本溢出用省略号显示
- 先强制一行内文本显示 white-space:nowrap;
- 超出部分隐藏 overflow:hidden;
- 文字用省略号代替超出的部分 text-overflow:ellipsis;
多行文本溢出用省略号显示
多行文本显示省略,有较大的兼容先问题,适用于webKit浏览器或者移动端
overflow:hidden; text-overflow:ellipsis; /*弹性伸缩盒子模型显示*/ display:-webkit-box; /* 限制在一个块元素显示文本的行数*/ -webkit-line-clamp:2; /*设置或检索伸缩盒子对象的子元素的排列方式*/ -webkit-box-orient:vertical;
常用布局技巧
margin负值的运用
- 让每一个盒子margin往左移动-1px正好压住相邻的盒子
- 鼠标经过某个盒子时提高当前盒子的层级(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)
,文字围绕浮动元素
css三角强化
div{ width:0; height:0; border-color:transparent red transparent transparent; border-style:solid; border-width:22px 8px 0 0; }
CSS初始化
- CSS初始化是指重设浏览器的样式
以上是关于css布局技巧的主要内容,如果未能解决你的问题,请参考以下文章