CSS三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：

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

代码实现：

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

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

CSS用户界面样式

什么是用户界面样式

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

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

更改用户的鼠标样式

鼠标样式 cursor
语法：

li {cursor: pointer; }

  

 

  
1
 

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

表单轮廓

轮廓线 outline

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

语法：

input {outline: none; }

  

 

  
1
 

防止拖拽文本域 resize

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

textarea{ resize: none;}

  

 

  
1
 

vertical-align 属性应用

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

语法：

vertical-align : baseline | top | middle | bottom

  

 

  
1
 

关于几种线的理解

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

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

调整为

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

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

主要解决方法有两种：

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

文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/zyb18507175502/article/details/123642524