CSS高级特性②(三角、用户界面样式、vertical-align属性)

CSS高级特性②(三角、用户界面样式、vertical-align属性)

文章目录

​​CSS三角​​​​CSS用户界面样式​​

​​什么是用户界面样式​​​​更改用户的鼠标样式​​​​表单轮廓​​​​防止拖拽文本域 resize​​

​​vertical-align 属性应用​​

​​解决图片、表单和文字对齐的问题​​​​解决图片底部默认空白缝隙问题​​

CSS三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：

本质就是盒子将高度和宽度设为0，此时边就呈现一个三角形的效果

代码实现：

div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-left-color: pink;}

注意： ①line-height和font-size那两行属性是为了浏览器的兼容问题 ②三角形的大小可以通过border的大小来控制。

CSS用户界面样式

什么是用户界面样式

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

更改用户的鼠标样式表单轮廓防止表单域拖拽

更改用户的鼠标样式

鼠标样式 cursor 语法：

li {cursor: pointer; }

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

表单轮廓

轮廓线 outline

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

语法：

input {outline: none; }

防止拖拽文本域 resize

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

textarea{ resize: none;}

vertical-align 属性应用

CSS 的 ​​vertical-align​​​ 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。 官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align :

解决图片、表单和文字对齐的问题

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

调整为

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

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

例如：

主要解决方法有两种：

给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）把图片转换为块级元素 display: block;

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。