前端知识复习补漏

• 保留空白

使用 HTML 实体，如  
使用 <pre> 标签包起来
在父元素使用 CSS white-space:pre

• html实体

显示结果	描述	实体名称	实体编号
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
“	引号	&quot;	&#34;

• 定制页面图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

• 元数据 <meta>

//适配移动页面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//添加页面描述
<meta name="description" content="腾讯网(www.QQ.com)">

• post vs get

表象不同，get把提交的数据url可以看到，post看不到
原理不同，get 是拼接 url， post 是放入http 请求体中
提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
get提交的数据在浏览器历史记录中，安全性不好
场景不同，get 重在 "要", post 重在"给"

• 属性选择器 Attribute Selectors

[attr~=val]
仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
[attr*=val]
选择 attr 属性的值中包含字符串 val 的元素。
[attr^=val]
选择 attr 属性的值以 val 开头（包括val）的元素。
[attr$=val]
选择 attr 属性的值以 val 结尾（包括val）的元素。
[attr|=val]
选择 attr 属性的值以 val（包括val）或 val-开头的元素（-用来处理语言编码）。

• 单位
  vw, vh 1vw = 1% 视口宽度, 1vh = 1% 视口高度
  动态计算值例：calc(90% - 15px)

• inline-block 之间空隙

  Why?
  inline-block 之间有空格、Tab、换行符。
  解决：
  给父元素设置 font-size: 0，在 inline-block 元素上重新设置 font-size。

• white-space: nowrap; （不换行）
• text-overflow: ellipsis;（多余的文本以省略号显示）

• background-size
  cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
  contain 缩放背景图片以完全装入背景区，可能背景区部分空白。

• background-clip (设置元素背景区域覆盖的范围)
  border-box 覆盖至边框的最外围
  padding-box 覆盖至内边距的最外围
  content-box 仅覆盖元素内容区域

• 弹性盒子

• 浮动
  两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负 margin 值大于自身的宽度可将其上移