CSS實用技巧（中）

言

我們經常使用CSS，但是卻不怎么了解CSS，本文主要對vertical-align、BFC、position中開發(fā)過程不怎么注意的特性進行簡要總結，從本文中，你將了解到以下內容：

vertical-align為何時靈時不靈
BFC是什么？有何作用
絕對定位的奇淫技巧

CSS特性

vertical-align為什么時靈時不靈

生效條件

只能應用在display為inline、inline-block、inline-table、table-cell上。

有個高頻面試題，“如何使一個不定寬高div垂直水平居中？”，有的萌新竟然回答用vertical-align: middle。這個回答是減分的，至少在某種程度上給人一種感覺CSS基礎比較薄弱。

內聯元素垂直居中對齊

開發(fā)中會遇到用字幕x代替關閉icon，用...顯示溢出或者加載中。但是會發(fā)現字母x、省略號并沒有與文本垂直方向居中對齊，這是因為文本默認是基線對齊，x、省略號默認底部在基線處。如下圖所示：

如下，為文本對齊demo:

<div class="container">
  <span>你好，世界</span>
  <span class="more">...</span>
</div>

實際顯示效果如下：

如果要實現垂直居中，利用vertical-align，搭配line-height即可，vertical-align不僅可以設置middle/top/bottom/baseline...關鍵字，也可以設置常用的度量單位，正負值均可，使用比較靈活。為什么要給.more設置line-height屬性呢？其實是因為line-height屬性可以繼承，如果不縮小.more的行高，就會撐大父元素的尺寸。

<style>
  .container{
    font-size: 64px;
    line-height: 64px;
  }
  .more{
    line-height: 16px;
    vertical-align: 16px;
  }
</style>

BFC究竟有什么作用

什么是BFC

BFC全稱block formatting context，即“塊狀格式化上下文”，與外界元素相對獨立的一片區(qū)域，具有以下特性：

計算BFC高度時，浮動元素也參與計算
屬于同一BFC容器的元素垂直方向的margin會合并
BFC容器是獨立容器，不會影響外部元素的布局

利用BFC的特性，我們可以實現以下功能：

清除浮動
防止垂直方向margin合并
實現多欄彈性布局

BFC的生效條件

以下CSS屬性會觸發(fā)元素生成BFC結界:

根元素（<html>）
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 為 absolute 或 fixed）
行內塊元素（元素的 display 為 inline-block）
表格單元格（元素的 display 為 table-cell，HTML表格單元格默認為該值）
表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
匿名表格單元格元素（元素的 display 為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別- 是HTML table、row、tbody、thead、tfoot 的默認屬性）或 inline-table）
overflow 計算值(Computed)不為 visible 地塊元素
display 值為 flow-root 的元素
contain 值為 layout、content 或 paint 的元素
彈性元素（display 為 flex 或 inline-flex 元素的直接子元素）
網格元素（display 為 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
column-span 為 all 的元素始終會創(chuàng)建一個新的BFc

BFC使用案例

清除浮動

<style>
  .container{
    /* overflow: hidden; */
    /* position: absolute; */
    /* float: left; */
  }
  .left{
    float: left;
    width: 200px;
    height: 200px;
  }
</style>
<div class="container">
  <div class="left"></div>
</div>

以上代碼，container容器高度為0，因為子元素left浮動。我們只需要把container容器轉成BFC容器，即可清楚浮動，注釋的幾種方法都可以。

防止垂直方向margin合并

<style>
  .blue, .red-inner {
    height: 50px;
    margin: 10px 0;
  }

  .blue {
    background: blue;
  }

  .red-outer {
    overflow: hidden;
    background: red;
  }
</style>
<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div>

自適應布局

左側固定，右側自適應。

<style>
  .left{
    height: 200px;
    width: 200px;
    float: left;
    background-color: burlywood;
  }
  .right{
    height: 200px;
    margin-left: 200px;
    background-color: cadetblue;
  }
</style>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

絕對定位還能玩出什么花樣

簡介

絕對定位使用場景非常多。絕對定位元素脫離文檔流，相對于最近的非 static 祖先元素定位，可以利用left/right/top/bottom定位元素位置。我們通常都是設置垂直方向與水平方向的的位置，如果四個方向都不設置或者四個方向都設置會出現什么彩蛋呢？下文會給出揭曉。

left/top/right/bottom都有值的定位

當對立位置（left與right，top與bottom）都設置值且元素沒用固定寬高

此時元素的寬高是根據元素位置決定的，張鑫旭大佬在《CSS世界》中定義為格式化寬高，如下代碼，最終box-item的寬高計算為：width=200 - 50 -50=100px;width=200 - 50 -50=100px;

<style>
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: bisque;
  }
  .box-item{
    position: absolute;
    left: 50px;
    right: 50px;
    top: 50px;
    bottom: 50px;
    background-color: coral;
  }
</style>
 <div class="box">
    <div class="box-item"></div>
  </div>

這種行為特性對于我們做自適應布局非常有用，而且兼容性非常好，比如我們要做左側固定寬度，右側自適應，除了以上BFC的寫法，我們還可以采用以下方法：

<style>
  .container{
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
  }
  .left{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: burlywood;
  }
  .right{
    position: absolute;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: cadetblue;
  }
</style>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

當對立位置都設置了值且元素設置了固定寬高

這個時候你會發(fā)現，元素的寬高時以width/height為準，上述說的格式化寬度、高度并沒有生效。這是因為在高度計算過程中，元素的內部尺寸優(yōu)先級大于外部尺寸，width/height影響的是元素內部尺寸，絕對定位影響的是外部尺寸，當元素絕對定位四個方向都設置值，此時外部尺寸會被內部尺寸覆蓋，導致實際元素寬度是width/height的值。

我們經常用margin: 0 auto;實現元素水平居中，但是不定寬高元素垂直水平居中就有些麻煩。但是有個神奇的現象，絕對定位配合margin: auto;，可以實現元素垂直水平居中，如下所示：

<style>
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: bisque;
  }
  .box-item{
    position: absolute;
    margin: auto;
    width: 50px;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: coral;
  }
</style>
<div class="box">
  <div class="box-item"></div>
</div>

出現這種現象是因為margin:auto本質上是平分元素剩余可用空間，塊級元素一般是水平方向自動充滿，垂直方向順序排列。平常我們用margin: 0 auto;之所以能夠使塊級元素水平居中，是因為水平方向元素存在剩余可用空間，而auto平分剩余可用空間，因此就產生居中效果。而垂直方向不存在剩余可用空間，因此無法垂直居中。
上述demo，box-item之所以能夠垂直居中，得益于top/bottom設置了值，使元素產生高度100%的外部尺寸，而width/height固定元素的內部尺寸，使得 外部尺寸高度-內部尺寸高度=元素剩余可用空間高度，而auto等分剩余可用空間，可以使元素達到垂直居中效果?？梢試L試調整四個方向的值，看看box-item位置是怎么移動的。

無依賴的絕對定位

當絕對定位沒有設置四周定位尺寸時，會發(fā)生神奇的一幕，當前元素沒有相對于最近的非 static 祖先元素定位，而是在當前位置不變，并且當前元素脫離文檔流，不占據頁面空間。這個特性某些情況下非常有用，比如給box-card加一個圖標，借助無依賴定位 + padding/margin即可。寫法比較簡潔，建議嘗試一下。

小結

比起其他的開發(fā)語言，想要深入了解CSS，并不是一件容易事，大多數人都是停留在用的基礎上，知道這個屬性/方法，至于為什么會這樣了解較少。張鑫旭大佬CSS高度讓人嘆為觀止，繼續(xù)加油吧！?。?/p>

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數據

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用html 標簽名稱
maxlength —— 定義文本框可輸入字符最大長度
size —— 定義文本框在頁面中顯示的長度
vaule —— 定義文本框中默認的值

如下是文本輸入框和密碼框制作一個登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時自動對電子郵件地址進行驗證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時能夠自動驗證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type=“radio” 和 type=“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked=“true”指選中那個選項，表單會將 checked=“true” 的選型值傳遞給后臺。

如下實例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺的數據是不一樣的，如下會看到地址欄中的數據，多選會發(fā)送多個值，后臺將會獲取一個數組形式的數據。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type=“button”，一般配合腳本使用，語法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type=“submit”，用于提交表單內容，是一種特殊按鈕。

如剛才的登錄表單，提交后會返回結果：

重置按鈕：type="reset"，用于清除表單數據，也是一種特殊按鈕。

輸入數據

點擊重置按鈕后，表單數據清空

重置清空數據

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，button 使用語法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：

<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節(jié)省空間，當數據選項比較多時，使用多選列表，語法如下：

<select name="名稱" size="可看見的列表項數" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現形式也不一樣，不是下拉而是一個列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態(tài)網站中使用，這為以后制作動態(tài)網站打下基礎。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網頁中使用窗口框架

TML5方興未艾，但也有不少遺憾。下面提了10點希望在HTML6中看到的特性，歡迎評論。

HTML6提案1：對視頻對象的更多控制

我們可能永遠不會解決與壓縮編解碼器的爭斗，但我們可以與之配合。不同的壓縮算法可能需要更多的工作來實現，但是它們提供競爭。能對展現在頁面上的視頻幀提供更多控制的方式會是更好的方案。當前的標準是使用視頻中的一系列幀填充一個矩形。然后提供了一個帶有注釋，字幕和其他內容的文本軌道的控制。一些聰明的人已經開始將注釋與其他DOM對象同步。但是如果有回調鉤子和同步機制是不是更好？例如，DOM與視頻混合的能力如何？

HTML6提案2：圖像的瀏覽器大小

照片在屏幕上看起來要漂亮，需要多少像素？這個答案根據根據設備的不同而不同。即使窗口的大小也會改變最小分辨率。但HTML標準

<img>

標簽只能獲得一個SRC，它指向一個可能有太多或太少像素的圖像文件。如果它太多，瀏覽器必須降級圖像才能顯示，這就浪費網絡帶寬和時間。如果像素太少，效果又太差。更好的HTML協(xié)議應該為圖像提出所需的寬度或高度，以便服務器可以提供最佳分辨率。

HTML6提案3：可插拔語言

標準的HTML瀏覽器使用且只是用JavaScript。但由于某些原因，我們需要用script標簽的type屬性設定為text/javascript來指定語言類型。從html4開始，type一直就沒有默認值。

HTML4的建議稿覺得有人可能會使用像text/tcl或text/vbscript這樣的類型，但是實際上有沒有人使用這些？微軟已經棄用了IE11的text/vbscript，而且近年來Sun在使用tcl。

Google正在慢慢推Dart，但包括Dart的Chromium（Chrome的開發(fā)版）確有一個不祥的警告：“不要使用Dartium作為主瀏覽器，不要將Dartium分發(fā)給用戶！”說明Google對Dart也不是很有信心。

但在未來，我們可以擁有更強大的可插拔語言。它將為開發(fā)人員增加更多的靈活性和設計選擇。會不會把互聯網弄壞？如果有一個穩(wěn)固的開源實現，它就可以被所有瀏覽器采用?？赡芎茈y讓網站使用可插入語言來為廣泛的受眾提供內容 - JavaScript會可以繼續(xù)擁有廣泛的網絡基礎 - 但是對于使用專門語言的更專業(yè)的擴展來說，這可能是一個很好的選擇。

HTML6提案4：可插拔預處理器

想超越JavaScript的開發(fā)人員可以有另外一個解決方案，就是將其他語言轉換為JavaScript。許多開發(fā)人員已經使用一些翻譯語言（如CoffeeScript）的預處理器。

杰里米·阿什肯納斯（Jeremy Ashkenas）列出來了可以編譯成JavaScript的語言列表，范圍很廣。Lisp，Python，Ruby，Erlang，Scala - 列表還在繼續(xù)擴大。

這樣的提案將會付出代價。當一種語言被交叉編譯成JavaScript時，通常會在同一時間進行細化，生成一個更小的更容易通過互聯網傳輸的版本。在部署過程中執(zhí)行此操作比在每個人的瀏覽器上執(zhí)行的效率要高得多。

但是，縮小的版本有其缺點。開放一直是網絡的巨大優(yōu)勢之一。我們能夠通過閱讀通常仍然以人類可讀的形式寫的JavaScript代碼來學習和調試。交叉編譯和縮小的代碼對于其他人是無價值的。它正在慢慢打破Web的開放性。

在瀏覽器中執(zhí)行此轉換還有其他優(yōu)點。每臺機器都有不同，轉換過程需要利用到RAM大小、視頻卡庫等知識。當前版本的HTML假定采用JavaScript的一般版本，這使得為本地機器優(yōu)化代碼變得更難。

HTML5提案5：有保證的庫

JavaScript編程的世界已經被jQuery以及其他標準庫改造了。然而，幾乎每個網站仍然要加載自己加載某個版本的副本。在加載jQuery時浪費的能量可能足以照亮一個小國家，治愈癌癥或兩者兼而有之。

一些網站使用像Google或Yahoo這樣的公司托管的標準緩存版本，這樣可以節(jié)省帶寬，但下一個HTML標準應該比這更好。如果大量設計人員同意，則可以使用瀏覽器進行分發(fā)。這將節(jié)省更多時間再次刷新jQuery的緩存版本。

HTML6提案6：授權對聯系信息的訪問

瀏覽器已經可以共享位置信息。期待更多國家加入。人們通常希望在自己設備的聯系信息庫里面放入電子郵件地址或電話號碼?，F在他們必須剪切和粘貼。為什么不讓JavaScript挖掘并保存所有的剪切和粘貼？這對移動設備來說是非常棒的。在交互上可以提供細粒度的控制，允許人們來自某些域的代碼可以自動訪問到聯系信息，而其他域不行。

HTML6提案7：相機集成

在網絡攝像頭和手機的多攝像頭提供的設備基礎上，用戶與瀏覽器交互的場景少不了鏡頭和麥克風。W3C已經在探索一種向表單添加照片或視頻捕獲的方法。一些瀏覽器已經支持自己的版本，如

webkitGetUserMedia

。很容易想到更多。表單元素還可以訪問存儲在設備中的存儲空間，并且該設備可以更好地控制攝像機和捕獲速率。這將讓網站與專門的應用程序競爭。

HTML6提案8：硬件化認證

鑒于構建可信硬件是多么困難的事情，因此我們可能會提供很多硬性和快速認證的方式。而瀏覽器可以為此提供更多的功能。瀏覽器可以使用嵌入式Key進行簽名，而不是Cookie。這些可以以硬化的芯片存儲在設備之外，以防止人們提取密鑰。向瀏覽器添加API將允許網站要求更好的數字簽名。如果把太多的信任放在其中，這可能是危險的，但這將是cookie和會話身份驗證的一個步驟。

HTML6提案9：更好的注釋

文章底部的注釋部分只是我們如何注釋文章的開始，但是一個標準的結構可以添加與段落、句子、甚至單詞相關的注釋。復雜的版本甚至可以允許對視頻內的圖像或某個時間點進行注釋。有些網站正在開始提供這些功能，但在標準化API方面會使所有網站和瀏覽器都以相同的方式處理基本注釋。W3C有一個研究該領域并提供基本標準的小組。

HTML6提案10：更強的微格式

HTML標簽區(qū)分標題，段落和頁腳，但還不夠多。為什么不創(chuàng)建一個標準的方法來指定其他常見的細節(jié)，例如地址或電話號碼的部分？當然，用于描繪電子郵件地址的標準標簽可以使垃圾郵件發(fā)送者的生活變得更輕松，但標準的一組標簽可以加速網頁抓取工具和搜索引擎，這將有利于我們所有人。W3C一直在探索微格式來標記數據，并曾經認為它們是HTML5的一部分，盡管它們不是。我們可以為地點，時間，日期，出售物品，參考書目以及所有標準數據使用更全面的標記。

在線咨詢

上一篇：springmvc實驗-帶有頭像的注冊
下一篇：2015打造火爆H5頁面全攻略！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS實用技巧（中）

言

CSS特性

vertical-align為什么時靈時不靈

生效條件

內聯元素垂直居中對齊

BFC究竟有什么作用

什么是BFC

BFC的生效條件

BFC使用案例

絕對定位還能玩出什么花樣

簡介

left/top/right/bottom都有值的定位

無依賴的絕對定位

小結

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

HTML6提案1：對視頻對象的更多控制

HTML6提案2：圖像的瀏覽器大小

HTML6提案3：可插拔語言

HTML6提案4：可插拔預處理器

HTML5提案5：有保證的庫

HTML6提案6：授權對聯系信息的訪問

HTML6提案7：相機集成

HTML6提案8：硬件化認證

HTML6提案9：更好的注釋

HTML6提案10：更強的微格式

您的項目需求