整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
片的位置搞的差不多了之后再來(lái)完善一下。你看這個(gè)Demo里面把鼠標(biāo)挪到圖片這里之后有沒(méi)有發(fā)現(xiàn)什么變化？鼠標(biāo)挪到圖片這里，鼠標(biāo)從箭頭變成了一個(gè)手指，這是第一個(gè)。鼠標(biāo)懸浮到圖片上的時(shí)候圖片是會(huì)放大的，所以接下來(lái)在圖片上加上這兩個(gè)效果。
·第一個(gè)效果也就是鼠標(biāo)挪過(guò)來(lái)之后從箭頭變成手指。這個(gè)怎么搞？其實(shí)很簡(jiǎn)單，有個(gè)CSS的屬性也叫pointer，這個(gè)是光標(biāo)的意思。如果要讓它變成手指就是設(shè)置成pointer，然后保存，把鼠標(biāo)挪過(guò)來(lái)，挪到圖片范圍里面去就變成手指了，出來(lái)就變成箭頭了。
如果想換成別的也可以，比如crosshair，變成十字架了，換成pointer，第一個(gè)效果已經(jīng)實(shí)現(xiàn)了。
·第二個(gè)效果就是挪到圖片上之后會(huì)放大。這個(gè)怎么搞？其實(shí)也簡(jiǎn)單，可以再加一個(gè)CSS選擇器。首先針對(duì)的是這些image元素，所以image要處理的是當(dāng)鼠標(biāo)懸浮到圖片上的時(shí)候是什么效果，所以后面加個(gè)冒號(hào)，再加上一個(gè)hover大括號(hào)。
hover是什么意思？就是懸停的意思，也就是這里面的一些設(shè)置只會(huì)在什么時(shí)候起效？就是當(dāng)鼠標(biāo)懸停到圖片上的時(shí)候可以實(shí)驗(yàn)一下看起不起效果。比如當(dāng)鼠標(biāo)懸停到圖片的時(shí)候讓圖片的邊框顯示出來(lái)，那就是border，width，3Pixel，border style，solid，實(shí)實(shí)線。它的顏色border，color，比如白色。
把鼠標(biāo)挪過(guò)來(lái)，這里的設(shè)置是不是只有在我這個(gè)鼠標(biāo)，懸停到了某張圖片上的時(shí)候才會(huì)起效果。但是需要的效果不是把邊框顯示出來(lái)，是希望坤坤能夠變大，所以可以搞一個(gè)transform，這個(gè)是幾何變換的意思。
想讓坤坤變大肯定是縮放，這里有個(gè)scale是縮放，點(diǎn)一下，這里就可以設(shè)置坤坤到底要縮放成多大。這里可以填一個(gè)系數(shù)，比如填個(gè)1.1就相當(dāng)于是會(huì)比原來(lái)大1.1倍，填個(gè)0.9就會(huì)比之前縮小10%。
這里來(lái)試一下，比如1.4，保存好移過(guò)來(lái)，是不是變大了？但是變大不像這邊這么絲滑，像是有一個(gè)過(guò)渡圖動(dòng)畫(huà)一樣。這個(gè)怎么搞？也簡(jiǎn)單，再加一個(gè)設(shè)置transition，這個(gè)就是變化的意思。
后面可以加上一個(gè)時(shí)間，也就是當(dāng)鼠標(biāo)挪過(guò)來(lái)之后不是會(huì)變大嗎？從原始大小變成這么大，這個(gè)過(guò)程需要多長(zhǎng)時(shí)間？這個(gè)時(shí)間就可以在這里設(shè)置，比如搞個(gè)一秒鐘，就1S好保存，挪過(guò)來(lái)是不是一秒鐘的樣子？如果覺(jué)得時(shí)間太長(zhǎng)了，可以再縮短，比如0.3，快一點(diǎn)了。
文：https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
作者：Tess Gadd
翻譯：水手哥（公眾號(hào)ID:shuishouge_design）
按鈕在UI界面設(shè)計(jì)中是不可或缺的元素之一，這篇文章我們將介紹不同類(lèi)型的按鈕包括按鈕的狀態(tài)和交互。我們介紹的都是日常界面中使用的普通按鈕，并不包括單選按鈕、選項(xiàng)卡、復(fù)選框等其他類(lèi)型的按鈕。
按鈕的不同分類(lèi)如下：
動(dòng)作按鈕
我們將分析按鈕的層次結(jié)構(gòu)和它們通信的語(yǔ)言。雖然有些按鈕通熟易懂，但按鈕操作不取決于它們的外觀，而是取決于用戶的行為。
1_1.行為召喚（CTA / C2A）
在設(shè)計(jì)中行為召喚按鈕通常會(huì)提示用戶注冊(cè)/立即購(gòu)買(mǎi)等。在產(chǎn)品設(shè)計(jì)中如果強(qiáng)烈建議用戶應(yīng)該做的事情應(yīng)該使用CTA按鈕。
行為召喚按鈕
對(duì)于CTA按鈕，我喜歡使用圓形按鈕，這樣會(huì)更引人注目。
1_2.主要操作按鈕
雖然CTA按鈕和主按鈕看起來(lái)相同，但我喜歡將它們分開(kāi)。主按鈕應(yīng)該是一個(gè)強(qiáng)大的視覺(jué)指示器，可以幫助用戶完成他們的旅程。主按鈕應(yīng)該在用戶可能想要“下一步”、“完成”、“開(kāi)始”等的情況下使用。
主要操作按鈕
對(duì)于主要操作，我喜歡使用實(shí)心按鈕。
1_3.次要操作按鈕
從“返回”的輔助按鈕到“下一步”的主按鈕，或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們?yōu)橛脩籼峁┑闹饕僮鞯膫溥x方案。
主按鈕旁邊的輔助按鈕的兩種設(shè)計(jì)
我更傾向于使用線性按鈕或文本鏈接作為輔助按鈕。
1_4.三級(jí)按鈕
三級(jí)按鈕通常用于其他操作，可能暫時(shí)不是用戶想要做的事情。比如“添加朋友”、“掃一掃”、“編輯”或“刪除”之類(lèi)的內(nèi)容，前提是它們不是主要操作。
不同形式的三級(jí)按鈕
一般來(lái)說(shuō)，人們會(huì)使用較小或較不突出的按鈕樣式。
常用按鈕樣式
下面我們將介紹常見(jiàn)的按鈕樣式，不同風(fēng)格的按鈕樣式和他們的使用技巧。
2_1.實(shí)心按鈕
實(shí)心按鈕是帶有實(shí)心填充的按鈕。
一個(gè)實(shí)心按鈕
2_2.線性和幽靈按鈕
線性按鈕和實(shí)心按鈕正好相反，一個(gè)沒(méi)有填充的按鈕 – 只是一個(gè)輪廓。雖然經(jīng)常互換使用，但我更喜歡將線性按鈕視為淺色（在白底下按鈕的輪廓和文本顏色深一點(diǎn)更明顯），將幽靈按鈕視為深色（在黑底下按鈕的輪廓和文本顏色淺一點(diǎn)更明顯）。
線性按鈕（左）和幽靈按鈕（右）
2_3.圓形按鈕
圓形按鈕其邊緣設(shè)置為最大圓角半徑。
圓形按鈕
2_4.FAB（懸浮按鈕）
懸浮按鈕是一種巧妙的設(shè)計(jì)模式，Google Material Design中更加受歡迎。雖然它們可能看起來(lái)像一個(gè)圖標(biāo)按鈕，但實(shí)際上它們用在屏幕上的主要操作按鈕。
一個(gè)懸浮按鈕
如果您想了解有關(guān)FAB的更多信息，我建議您在Material Design的網(wǎng)站上查看( https://material.io/design/components/buttons-floating-action-button.html )
2_5.文字鏈接
文本鏈接是一種非常簡(jiǎn)單的按鈕類(lèi)型。有幾種不同的方式可以表明它是一個(gè)鏈接。它可以是顏色/下劃線/鏈接的文本，甚至就是文本本身（例如“閱讀更多”）。
文本鏈接的不同樣式
在顏色方面，大多數(shù)網(wǎng)站使用藍(lán)色，因?yàn)樗亲钊菀鬃R(shí)別的。為什么文本鏈接的顏色會(huì)使用藍(lán)色？它一直追溯到是萬(wàn)維網(wǎng)的發(fā)明者，在他選擇顏色時(shí)發(fā)現(xiàn)藍(lán)色很酷的一種顏色，即使是色盲的人通常也能看到它。
2_6.帶圖標(biāo)的標(biāo)簽按鈕
圖標(biāo)按鈕越來(lái)越受歡迎，一些按鈕仍然需要一個(gè)標(biāo)簽來(lái)確保按鈕的語(yǔ)意明了。
帶圖標(biāo)的標(biāo)簽按鈕
處理圖標(biāo)和標(biāo)簽時(shí)最棘手的事情是弄清楚字體組合的圖標(biāo)有多大。
方法1：讓圖標(biāo)的大小對(duì)齊字體的頂線。
方法2：讓圖標(biāo)的大小對(duì)齊字體的行高。需要注意的是確保圖標(biāo)和字體的組合視覺(jué)均衡。
2_7.圖標(biāo)按鈕
圖標(biāo)按鈕沒(méi)有標(biāo)簽，只是一個(gè)圖標(biāo)。因?yàn)樗鼈儧](méi)有標(biāo)簽，所以它們?cè)诮缑嬷泄?jié)省了大量空間。圖標(biāo)按鈕還可以將其他圖標(biāo)按鈕一起排列在它們的小空間中。
圖標(biāo)按鈕具有不同的風(fēng)格
如果你在為計(jì)算機(jī)認(rèn)知度較低的人群設(shè)計(jì)產(chǎn)品時(shí)，我建議使用帶標(biāo)簽的按鈕 – 尤其是那些很抽象的語(yǔ)意。
2_8.帶圖標(biāo)的文本鏈接
某些文本鏈接可能帶有圖標(biāo)。這些通常不會(huì)在正文中使用。
各種帶圖標(biāo)的文本鏈接
按鈕的顏色和形狀
在設(shè)計(jì)按鈕時(shí)，需要考慮以下幾個(gè)不同的元素。
3_1.顏色
在設(shè)計(jì)產(chǎn)品時(shí)，你應(yīng)該要考慮有視覺(jué)障礙的人。為確保每個(gè)人都可以訪問(wèn)你的顏色，你可以使用在線對(duì)比度檢查器。我使用的是那個(gè)。( https://accessible-colors.com/ )
不同顏色的按鈕
另外，在選擇顏色時(shí)應(yīng)該考慮色彩心理學(xué)。紅色按鈕多用于刪除，黃色按鈕多用于警示等。
“刪除”、“警告”、“保存”和“更多”按鈕
3_2.邊界半徑
邊界半徑為按鈕提供了很多個(gè)性化設(shè)計(jì)。具有更圓半徑的按鈕看起來(lái)更有趣。
不同邊界半徑設(shè)置的按鈕
3_3.投影
按鈕上的投影使按鈕更加自然引人注意。陰影也可用于指示不同的狀態(tài)。 ( https://material.io/design/environment/elevation.html#depicting-elevation )
Material Design通過(guò)使按鈕在懸停狀態(tài)下來(lái)達(dá)到這個(gè)效果。
不同陰影設(shè)置的按鈕
3_4.標(biāo)簽樣式
標(biāo)簽樣式歸結(jié)為字體以及閱讀的容易程度。選擇字體時(shí)，請(qǐng)確保它清晰可辨。
不同標(biāo)簽樣式的按鈕
以下是一些簡(jiǎn)單的方法可以讓字體清晰易讀：
* 選擇大寫(xiě)的標(biāo)簽或大標(biāo)題。（Material Design使用過(guò)帶有大寫(xiě)標(biāo)簽的按鈕。）
* 確保標(biāo)簽顏色與按鈕填充對(duì)比較為突出。您可以使用( http://accessible-colors.com/ ) 查看。始終確保您的顏色符合AAA要求。
* 選擇字體時(shí)，請(qǐng)確保字體清晰。
3_5.垂直內(nèi)間距
按鈕的大小對(duì)界面的可訪問(wèn)性起著很大的作用。大多數(shù)沒(méi)有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)說(shuō)“按鈕的高度應(yīng)該是36像素”。如果你是為產(chǎn)品系統(tǒng)的設(shè)計(jì)按鈕。你應(yīng)該采用所用字體的行高，并在其中添加一定單位的內(nèi)間距。例如：“我的按鈕標(biāo)簽的行高為20px，垂直內(nèi)間距為8px”。
不同垂直內(nèi)間距的按鈕
為什么會(huì)這樣設(shè)定呢？這里有兩個(gè)原因：
1）有視覺(jué)障礙的人可能會(huì)增大瀏覽器中的字體，因此他們需要更改字體大小而不會(huì)將按鈕高度定死。
2）這也是開(kāi)發(fā)人員創(chuàng)建按鈕的方式-他們?cè)贒IV容器中添加內(nèi)間距，而不是固定高度。
3_6.水平內(nèi)間距
有兩種方法可以接近水平內(nèi)間距。
第一個(gè)方法：
使按鈕寬度與網(wǎng)格對(duì)齊。這是保持所有按鈕長(zhǎng)度一致的好方法。但是它限制了你可以使用的字體數(shù)量。
寬度由網(wǎng)格決定的按鈕
第二個(gè)方法：
兩側(cè)有固定內(nèi)間距。我通常還會(huì)定按鈕最小寬度，雖然避免了很窄的按鈕，但是最小寬度按鈕可容納的不同字段會(huì)讓按鈕看上去不是很均勻。
寬度由內(nèi)間距和標(biāo)簽長(zhǎng)度決定的按鈕
按鈕狀態(tài)和反饋
按鈕狀態(tài)讓用戶知道他們是否可以點(diǎn)擊、已經(jīng)點(diǎn)擊或已成功點(diǎn)擊。按鈕還可以有重疊的狀態(tài)。例如可以同時(shí)是“點(diǎn)擊”和“懸停”狀態(tài)。
4_1.點(diǎn)擊和禁用狀態(tài)
點(diǎn)擊狀態(tài)就是鼠標(biāo)可以點(diǎn)擊按下按鈕的狀態(tài)，當(dāng)然如果用戶沒(méi)有完成必要的步驟，按鈕可以被禁用。例如用戶沒(méi)有輸入他們的姓名和電子郵件地址，他們就不能提交他們的詳細(xì)信息。
點(diǎn)擊和禁用按鈕
4_2.懸停和懸停離開(kāi)（鼠標(biāo)懸停和鼠標(biāo)懸停離開(kāi)）
在PC端按鈕應(yīng)具有不同的狀態(tài)，讓用戶知道它是可點(diǎn)擊的。通常“懸停”狀態(tài)和“懸停離開(kāi)”狀態(tài)相反，但也不一定。你應(yīng)該有效的區(qū)分讓用戶感知鼠標(biāo)懸停在某個(gè)按鈕上。
懸停演示按鈕
平板電腦和移動(dòng)設(shè)備上永遠(yuǎn)不會(huì)出現(xiàn)懸停狀態(tài)，因?yàn)槟愕氖种笩o(wú)法“懸停”。如果您正在為應(yīng)用程序進(jìn)行設(shè)計(jì)，請(qǐng)不要擔(dān)心此狀態(tài)。
4_3.焦點(diǎn)
焦點(diǎn)狀態(tài)可能會(huì)讓用戶困惑。如果你的用戶專(zhuān)注度較差，他們可能需要使用選項(xiàng)卡式導(dǎo)航。用戶將點(diǎn)擊“選項(xiàng)卡”在網(wǎng)站上移動(dòng)，從一個(gè)導(dǎo)航鏈接移動(dòng)到下一個(gè)。這意味著按鈕需要有一個(gè)“焦點(diǎn)”狀態(tài)才能顯示它是“可點(diǎn)擊的或尚未點(diǎn)擊”。
默認(rèn)的焦點(diǎn)狀態(tài)是藍(lán)色“發(fā)光”，幸運(yùn)的是，我們生活在一個(gè)可以自定義按鈕狀態(tài)的時(shí)代。大多數(shù)設(shè)計(jì)師對(duì)懸停和焦點(diǎn)狀態(tài)使用相同的視覺(jué)提示。
兩個(gè)不同“焦點(diǎn)”狀態(tài)的例子
4_4.按下
按下?tīng)顟B(tài)是當(dāng)用戶的光標(biāo)或手指“按住”按鈕時(shí)的狀態(tài)。當(dāng)用戶將手指或光標(biāo)“釋放”在按鈕上時(shí)，該按鈕會(huì)指示為“已點(diǎn)擊”。
“按下”狀態(tài)的按鈕
4_5.點(diǎn)擊
按鈕需要“點(diǎn)擊”狀態(tài)以向用戶指示它已被點(diǎn)擊。
“點(diǎn)擊”狀態(tài)的按鈕
按鈕標(biāo)簽
按鈕標(biāo)簽的訣竅是一致性。我們?cè)诋a(chǎn)品設(shè)計(jì)前期需要制定按鈕標(biāo)簽的規(guī)范，以避免以后花更多時(shí)間去改變你所有的按鈕標(biāo)簽。
5_1.動(dòng)詞的用法
大多數(shù)按鈕都包含指示按鈕將執(zhí)行什么操作，例如“保存”、“發(fā)布”、“編輯”。雖然“back”和“next”不是動(dòng)詞，但在接口上下文中，它們的工作方式似乎相同。我喜歡在編寫(xiě)按鈕標(biāo)簽時(shí)使用“動(dòng)詞” “名詞”結(jié)構(gòu)，這會(huì)讓操作更具規(guī)定性，例如“保存文章”等，而不是“保存”。
5_2.案例
你還應(yīng)該決定使用哪種字體大小寫(xiě)。以下是我使用的一些規(guī)范：
所有大寫(xiě)字母，例如“NEXT SECTION”，我把它們用于更專(zhuān)業(yè)的平臺(tái)。Material Design使用所有大寫(xiě)字母的按鈕。
標(biāo)題框，例如“Next Section”，我傾向于避免使用標(biāo)題大小寫(xiě)，因?yàn)樗幌窬渥哟笮?xiě)那樣容易閱讀。就語(yǔ)調(diào)而言，我認(rèn)為它介于“專(zhuān)業(yè)”和“會(huì)話”之間。
句子大小寫(xiě)，例如“Next section”，我把它們用于更“友好”或“對(duì)話”的平臺(tái)。它更像是一句話，正常我們一句話結(jié)束會(huì)加一個(gè)句號(hào)，但是為了設(shè)計(jì)的美感，請(qǐng)不要加一個(gè)句號(hào)。
小寫(xiě)，例如“next section”，小寫(xiě)按鈕標(biāo)簽使用頻率較低。
5_3.一致性
為按鈕編寫(xiě)標(biāo)簽時(shí)，請(qǐng)確保一致性。以下是一些我在項(xiàng)目使用的指導(dǎo)原則：
選擇字?jǐn)?shù)：每個(gè)按鈕一個(gè)、兩個(gè)或多個(gè)字
選擇大小寫(xiě)：句子大小寫(xiě)，或大寫(xiě)，或標(biāo)題大小寫(xiě)，或小寫(xiě)
標(biāo)簽結(jié)構(gòu)：如“動(dòng)詞” “名詞”，或“動(dòng)詞”等。
觸摸屏按鈕
桌面按鈕大小調(diào)整（單擊）
因?yàn)樽烂嫔系墓鈽?biāo)比觸摸屏上的手指小，所以您可以將按鈕縮小很多。
觸摸屏按鈕尺寸（點(diǎn)擊）
麻省理工學(xué)院觸摸實(shí)驗(yàn)室的研究表明，人在使用觸摸屏?xí)r手指部分是8-10毫米，如果你想避免用戶手指觸摸錯(cuò)誤，最小目標(biāo)尺寸需要10毫米或更大。如上所述-我需要較大的按鈕。
那么，你應(yīng)該做多大尺寸的按鈕呢？專(zhuān)家們說(shuō)的是：
Material Design建議接觸目標(biāo)應(yīng)為48dp x 48dp，不同接觸點(diǎn)之間距為8dp。
雖然我找不到關(guān)于iOS設(shè)計(jì)系統(tǒng)目標(biāo)尺寸的任何文檔，但一般的理解是，它的最小目標(biāo)尺寸是44 x 44磅。
如果您在設(shè)計(jì)大小尺寸方面遇到困難，我強(qiáng)烈推薦Zac Dickerson關(guān)于易用性的故事。
按鈕位置
如果你非要放置2個(gè)按鈕，主按鈕應(yīng)放在哪一側(cè)？
主要和次要按鈕的兩種不同立場(chǎng)
選項(xiàng)A顯示左側(cè)為主按鈕。它可能是用戶首先想要看到的，所以先顯示它。
選項(xiàng)B顯示右側(cè)為主按鈕。我們希望用戶首先看到輔助按鈕，方便他們繼續(xù)完成他們的旅程。右側(cè)的按鈕也表示繼續(xù)。
系統(tǒng)按鈕
這里會(huì)介紹一些很酷的設(shè)計(jì)原則和系統(tǒng)。我喜歡Material Design System的按鈕，因?yàn)樗麄兊脑硎墙?jīng)過(guò)深思熟慮的。
Material Design System的按鈕
Material Design 按鈕圖片
Material Design中介紹了按鈕的操作，以及按鈕如何與系統(tǒng)中的其他組件交互。我喜歡用戶在觸摸屏上使用按鈕的交互方式。
查看按鈕部分：
https://material.io/design/components/buttons.html
懸浮按鈕在這里查看：
https://material.io/design/components/buttons-floating-action-button.html
總結(jié)
如果沒(méi)有按鈕，你就不能真正構(gòu)建界面；我們應(yīng)該更多的關(guān)注它們。了解按鈕在界面中是如何設(shè)計(jì)的？怎樣正確的使用按鈕并為你的用戶提供最佳的體驗(yàn)？
哥們遇到一老外擺地?cái)傎u(mài)紀(jì)念品。哥們選中一個(gè)問(wèn)多少錢(qián)，老外伸出拇指和食指。 哥們說(shuō)太貴了，伸出五根指頭。老外沒(méi)再爭(zhēng)，很干脆地把紀(jì)念品給哥們打包。 事后，老外由衷的夸獎(jiǎng)：“中國(guó)人真有錢(qián)，買(mǎi)東西這么大方：我明明給他要兩塊，他偏給我五塊。”
元素浮動(dòng)起來(lái)脫離 正常流 來(lái)進(jìn)行向左邊或想右移動(dòng)，直到靠著盒子的邊緣或者飄起來(lái)的浮動(dòng)元素不占據(jù)空間
可以理解3D空間中 飄起來(lái) 會(huì)遮住下面的元素，文字內(nèi)容則不會(huì)，會(huì)被浮動(dòng)元素?cái)D出來(lái)
<!--===== HTML =====--> <div class="left"></div> <div class="right"></div>
.left, .right {
height: 600px;
}
.left {
width: 730px;
float: left;
background: pink;
}
.right {
width: 250px;
background: skyblue;
float: right;
}<!--===== HTML =====--> <div class="left"></div> <div class="middle"></div> <div class="right"></div>
.left, .middle, .right {
float: left;
width: 200px;
height: 400px;
background: pink;
margin-left: 100px;
}
.middle {
background: skyblue;
}
.right {
background: green;
}三列布局同上一樣~
<!--====== HTML =====--> <div class="box"> <div class="left"></div> <div class="right"></div> </div>
/* CSS */
.box {
width: 900px;
border: 3px solid red;
}
.left, .right {
width: 200px;
height: 200px;
background: skyblue;
float: left;
}
.right {
float: right;
background: pink;
}這時(shí)候會(huì)發(fā)生奇怪的現(xiàn)象 外邊的大盒子 包不住里面浮動(dòng)的小盒子，這時(shí)候就需要 清除浮動(dòng) 來(lái)讓他有實(shí)際的內(nèi)容，能被 父元素包裹著
不是原本意義清除浮動(dòng)，而是讓下面的元素從浮動(dòng)元素之后開(kāi)始排列而不會(huì)被蓋在下面
方法一、
<!--====== HTML =====--> <div class="box"> <div class="left"></div> <div class="right"></div> <!--===== 在浮動(dòng)元素的后面添加一個(gè)空的div元素 =====--> <div class="clear"></div> </div>
/* 空div用來(lái)清除浮動(dòng) */
.clear {
clear: both;
}最基本的清除浮動(dòng)的方式
方法二、
.box {
width: 900px;
border: 3px solid red;
/* 可以添加overflow: hidden; */
overflow: hidden;
}假如里面還有別的同級(jí)元素在浮動(dòng)的兩個(gè)元素用div套起來(lái) overflow: hidden; 清除浮動(dòng)的方式非常多，這兩種方式足夠使用
隨心所欲的擺放元素，可以使其不影響別的元素位置
只要使用了定位 除了 static 以外，都擁有四個(gè)樣式top right bottom left 值允許正負(fù)
生成一個(gè)相對(duì)定位元素，（如果不使用定位的移動(dòng)樣式，則不會(huì)產(chǎn)生任何效果）
特點(diǎn)：
會(huì)以自身元素作為參考進(jìn)行移動(dòng)
元素還占據(jù)著原來(lái)的位置（只是人動(dòng)了，坑還在）
變成一個(gè)絕對(duì)定位的元素，想挪動(dòng)哪里就挪動(dòng)哪里，不會(huì)碰撞元素、不占空間、并且會(huì)發(fā)生重疊元素現(xiàn)象
特點(diǎn)：
以定位父級(jí)(用了除了 static 以外的定位父元素) 作為參考進(jìn)行移動(dòng)，當(dāng)沒(méi)有的時(shí)候會(huì)以瀏覽器作為參考
不占據(jù)任何空間
特點(diǎn)：
不占據(jù)任何空間
只會(huì)以瀏覽器窗口作為參考移動(dòng)
只允許調(diào)整定位的元素層級(jí)顯示關(guān)系，值越大顯示越靠前，如果相同則會(huì)先后覆蓋顯示
z-index: 999;
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
