必须掌握的CSS书写小技巧

Posted 2020-12-24

一、元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！

display 显示

• 说明

  display 设置一个元素是否显示或者如何显示。

• 语法

  {display:none|block|inline|inline-block|table}

  display：none隐藏元素，并从布局中删除元素。与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

• 特点

  隐藏之后，不再保留位置。

visibility 可见性

• 说明

  指定一个元素是可见，还是隐藏。

• 语法

  {visibility:visible|hidden }

  visible : 显示元素

  hidden : 隐藏元素，但隐藏的元素仍占用之前一样的空间。即虽被隐藏，仍会影响布局。

• 特点

  隐藏之后，继续保留原有位置。（停职留薪）

overflow 溢出

• 说明

  设置当对象的内容超过指定高度或宽度时候的显示方式。

• 语法

  {overflow:visible}

  属性值	描述
  visible	不剪切内容，也不添加滚动条
  hidden	内容会被修剪，超出部分隐藏
  scroll	内容会被修剪，显示滚动条
  auto	若内容被修剪，则显示滚动条
  inherit	从父元素继承 overflow 属性值

二、超出文本显示省略号

word-break:自动换行

• 说明

  规定自动换行的处理方法

• 语法

  {word-break:normal |break-all|keep-all;}

  属性值	描述
  normal	使用浏览器默认的换行规则
  break-all	允许在单词内换行
  keep-all	只能在半角空格或连字符处换行

• 示例

  <style>
  width:90px;
    height:20px;
    border:1px solid red;
    word-break:keep-all;
  </style>
  <div>
    My name is Doraemon!
  </div>

• 注意

  主要处理英文单词

white-space

• 说明

  指元素内的空白怎样处理，通常习惯强制一行显示内容。

• 语法

  { white-space:nowrap; }

  属性值	描述
  normal	默认。空白会被浏览器忽略。
  nowrap(常用)	强制在一行内显示所有文本，直到文本结束或者遇到<br/>才换行。
  pre	空白会被浏览器保留。其行为方式类似 html 中的 <pre> 标签。
  pre-line	合并空白符序列，但是保留换行符。

• 注意

  可以处理中文

text-overflow 文字溢出

• 说明

  指当文本溢出，包含它的元素应该发生什么。设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

• 语法

  {text-overflow : clip | ellipsis}

  属性值	描述
  clip	不显示省略标记（...），而是简单的裁切
  ellipsis	显示省略符号来代表被修剪的文本
  string	使用给定的字符串来代表被修剪的文本。

• 注意书写顺序

  1. 首先强制一行内显示 white-space:nowrap;
  2. 超出部分隐藏 overflow :hidden
  3. 再设置text-overflow ：ellipsis

三、CSS用户界面样式

所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽

鼠标样式cursor

• 说明

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

• CSS语法

  {cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本}

  鼠标放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>

轮廓 outline

• 说明

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

• 语法

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

但是，通常都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

右下角可以拖拽：

<textarea></textarea>

右下角不可以拖拽：

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

vertical-align 垂直对齐

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

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

vertical-align : baseline |top |middle |bottom 

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

baseline、bottom：基线对齐，文字与图片底边线对齐

middle：垂直居中，文字在图片高度的中中间

top：顶部对齐，文字与图片上边线对齐

图片、表单和文字对齐

通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

图片或者表单等行内块元素的底线会和父级盒子的基线对齐，但会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

1. 给img vertical-align:middle | top，让图片不要和基线对齐。
2. 给img 添加 display：block;转换为块级元素就不会存在问题了。