CSS高级技巧

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

CSS高级技巧

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

display 显示（重点）

• display 设置或检索对象是否及如何显示

  display: none 隐藏对象
  

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

- 特点： 隐藏之后，不再保留位置



#### visibility 可见性

- 设置或检索是否显示对象。

~~~css
visibility：visible; 　对象可视
visibility：hidden; 　 对象隐藏

• 特点： 隐藏之后，继续保留原有位置

overflow 溢出(重点)

• 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

• 作用：
  • 清除浮动
  • 隐藏超出内容，隐藏掉, 不允许内容超过父盒子

显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

CSS用户界面样式

• 更改一些用户操作样式，以便提高更好的用户体验
  • 更改用户的鼠标样式
  • 表单轮廓等
  • 防止表单域拖拽

鼠标样式cursor

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

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width 

一般都是选择去掉，故最直接的写法是 ： outline: 0; 或者 outline: none;

防止拖拽文本域resize

设置文本域右下角不可拖拽：

<textarea  style="resize: none;"></textarea>

用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none

vertical-align 垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto;

• 让文字居中对齐，是 text-align: center;

• vertical-align 垂直对齐，它只针对于或者行内块元素，不影响块级元素中的内容对齐

vertical-align : baseline |top |middle |bottom 

图片、表单和文字对齐

可以通过vertical-align 控制图片和文字的垂直关系

• 设置设置vertical-align:baseline（默认）会使图片会和文字基线对齐
• 设置vertical-align:middle会使图片会和文字居中对齐
• 设置vertical-align:top会使图片会和文字顶部对齐

去除图片底侧空白缝隙

• 原因：

  图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐，导致图片底侧会有一个空白缝隙。

• 解决方法：

  • 给img设置 vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

  • 给img设置 display：block; 转换为块级元素

溢出的文字省略号显示

white-space

• white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal ；默认处理方式
white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow 文字溢出

• 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

注意：

一定要首先强制一行内显示，再次和overflow属性 搭配使用

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

滑动门

作用：使各种特殊形状的背景能够自适应元素中文本内容的多少

核心技术：

利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

1. a 设置 背景左侧，padding撑开合适宽度
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度
3. 之所以a包含span就是因为 整个导航都是可以点击的