css技巧总结

素颜马尾好姑娘i 2023-01-03 12:50 203阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.元素的显示与隐藏
 *   *  1.1 display 显示（重点）
     *  1.2 visibility 可见性 (了解)
     *  1.3 overflow 溢出(重点)
     *  1.4 显示与隐藏总结
 *  2. CSS用户界面样式
 *   *  2.1 鼠标样式cursor
     *  2.2 轮廓线 outline
     *  2.3 防止拖拽文本域resize
     *  2.4 用户界面样式总结
 *  3.vertical-align 垂直对齐
 *   *  3.1图片、表单和文字对齐
     *  3.2 去除图片底侧空白缝隙
 *  4. 溢出的文字省略号显示
 *   *  4.1 white-space
     *  4.2 text-overflow 文字溢出
     *  4.3 总结三步曲
 *  5. CSS三角形

--------------------

# 1.元素的显示与隐藏 #

## 1.1 display 显示（重点） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]  
实际开发场景：

> 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

## 1.2 visibility 可见性 (了解) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

## 1.3 overflow 溢出(重点) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]

## 1.4 显示与隐藏总结 ##

![在这里插入图片描述][20210108102941615.png]

# 2. CSS用户界面样式 #

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

*  更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
 *  表单轮廓等。
 *  防止表单域拖拽

## 2.1 鼠标样式cursor ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]

## 2.2 轮廓线 outline ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]

## 2.3 防止拖拽文本域resize ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]

## 2.4 用户界面样式总结 ##

![在这里插入图片描述][20210108103316458.png]

# 3.vertical-align 垂直对齐 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]

## 3.1图片、表单和文字对齐 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]

## 3.2 去除图片底侧空白缝隙 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]  
给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。  
给img 添加 display：block; 转换为块级元素就不会存在问题了。

# 4. 溢出的文字省略号显示 #

## 4.1 white-space ##

![在这里插入图片描述][20210108104628787.png]

## 4.2 text-overflow 文字溢出 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]

## 4.3 总结三步曲 ##

溢出的文字省略号显示

/*1. 先强制一行内显示文本*/
          white-space: nowrap;
      /*2. 超出的部分隐藏*/
          overflow: hidden;
      /*3. 文字用省略号替代超出的部分*/
          text-overflow: ellipsis;

# 5. CSS三角形 #

div { 
    
     	width: 0; 
    
        height: 0;
        line-height:0；
        font-size: 0;
    	border-top: 10px solid red;
    
    	border-right: 10px solid green;
    
    	border-bottom: 10px solid blue;
    
    	border-left: 10px solid #000; 
    
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221119/1d963c7f8c5c4db3aeae173506d4863f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221119/3f93e0aef60d4e5dac6ad979324e9409.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221119/03f48fd0608045edb582f11b7e192dd5.png
[20210108102941615.png]: /images/20221119/77e008d6500a4d35ad4b940265b5a0fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]: /images/20221119/099e38b4b6664ec484f601fb44091bc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]: /images/20221119/a6521ee9706b4b70801716723bb9e92a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]: /images/20221119/367842ea42614c8c93cfd5a9b9a7f037.png
[20210108103316458.png]: /images/20221119/86832314ba45494d84db33c8c23c46f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]: /images/20221119/b8aa02eec0ff46128ce6c8fc354dbaf3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]: /images/20221119/b5cf2f0ac4674a5dac95540a50d0a4ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]: /images/20221119/b3294f4340f743b780cbb74dfc8448be.png
[20210108104628787.png]: /images/20221119/9bbf519527ca4239b81169f53b3ea126.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]: /images/20221119/077819ad1ef2405eb1889b8b2231d10d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]: /images/20221119/664337550f4d4bb0b28061274a72d14e.png