H5/C3进阶(10) 下 -- CSS高级技巧(CSS用户界面样式等)

4.CSS用户界面样式

所谓的界面样式,就是更改-些用户操作样式,以便提高更好的用户体验。

● 更改用户的鼠标样式。

● 表单轮廓。

● 防止表单域拖拽。

4.1.鼠标样式 cursor

语法：

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

4.2.轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。

4.3.防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

语法：

5.vertical-align属性应用

5.1.图片、表单和文字居中对齐

CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。

语法：

属性

5.2.解决图片底部默认空白缝隙问题

bug :图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。

主要解决方法有两种:

1.给图片添加vertical-align:middle | top: bottom等。(提倡使用的)

2.把图片转换为块级元素display: block;

6.溢出的文字省略号显示

6.1.单行文本溢出显示省略号

必须满足三个条件;

1.先强制一行内显示文本

white- space: nowrap;/*(默认normal自动换行)*/

2.超出的部分隐藏

overflow: hidden; 

3.文字用省略号替代超出的部分

text-verflow: ellipsis;

6.2.多行文本溢出显示省略号

多行文本溢出显示省略号,有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)

overflow: hidden;

display:- webkit- box; /*弹性伸缩盒子模型显示,有兼容性问题*/

-webkit- line -clamp: 2; /*限制在一个块元索显示的文本的行数,有兼容性问题*/   

-webkit- -box- -orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式,有兼容性问题*/

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

7.常见的布局技巧

7.1.margin负值的运用

运用在类似地方（边框重叠，导致边框尺寸增大）

效果：

1.让每个盒子marqin往左侧移动- n px（盒子边框宽度）正好压住相邻盒子边框

但是！！！！！！！！！！！！！

会出现如下效果

而我们想要如下效果

只需要给鼠标经过的当前盒子设置 相对定位。

例：

2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置) , 如果有定位,则加z- index )

例：

7.2.文字围绕浮动元素

实现以上布局，需要 巧妙运用浮动元素不会压住文字的特性

7.3.行内块元素的巧妙运用

实现以上板块居中布局

只需要

给父盒子添加水平居中

7.4.CSS三角强化

实现以上 梯形布局

原理：

先准备一个盒子

再准备一个三角

定位到盒子右侧

直角三角形做法：

简述：

创建一个盒子，将下边框和左边框设置为0，右边框和上边框依情况自己设置，出现如图三角。

然后将上边框定位透明色，出现如图效果。