css布局技巧
程序员文章站
2022-08-20 07:52:48
CSS用户界面样式 1. 鼠标样式currsor ~~~ li{ cursor:pointer; } ~~~ 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 | 属性值 | 描述 | | | | | default | 默认 | | pointer | 小手 | | move | 移动 ......
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初始化是指重设浏览器的样式