整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
?￣△￣)?
每天晚上一篇英語(yǔ)知識(shí)普及
英語(yǔ)罐頭
本文是我的第49篇英語(yǔ)知識(shí)文章
當(dāng)你生氣或者與別人激烈討論的時(shí)候，你可能會(huì)說，That's my bottom line. （這是我的底線了，不能越過這線）。
然而，這說法并不正確，bottom line 并不是這個(gè)“底線”的意思哦！
一.bottom line可不是底線哦
一般來(lái)說，bottom line 和我們中文的“底線”有很多不同。bottom line主要來(lái)源于財(cái)務(wù)表格的盈虧情況，用于表明這個(gè)結(jié)果，因此，現(xiàn)在一般會(huì)引申為兩個(gè)意思:
1.關(guān)鍵因素
盈虧狀況，當(dāng)然就是一個(gè)很關(guān)鍵的因素
The bottom line is that we need another one thousand dollars to complete the project.
關(guān)鍵是我們還需要1千美元才能完成項(xiàng)目。
2.最終結(jié)論
算了很多才出來(lái)的結(jié)果，所以盈虧狀況稱為最終結(jié)論也不為過
I won't sign the contract, and that's the bottom line.
我不會(huì)簽這個(gè)合同，這就是我最后要的。
那么中文的"底線"還要怎么表達(dá)呢？
其實(shí)非常簡(jiǎn)單粗暴，所謂的底線，就是不能超越這條線，可以說是一個(gè)“極限”，因此，直接翻譯成limit 即可。
limit 底線，極限
Stop testing my limits!
別再考驗(yàn)我的極限（底線）!
二.那些“線條”單詞
1.online 在線
這個(gè)詞相信大家都十分熟悉，online就是網(wǎng)絡(luò)在在線的意思，順便也普及一個(gè)詞匯：come online：上線，例如叫小伙伴一起開黑吃雞的時(shí)候，就可以用come online.
I just come online a while.
我只是上線一陣子。
2.on the line 冒險(xiǎn)
在on line中間加冠詞“the”就會(huì)變成on the line，有冒險(xiǎn)，處于危險(xiǎn)的意思，可以理解為“命懸一線”。
Firefighters regularly put their lives on the line.
消防員經(jīng)常會(huì)處于危險(xiǎn)的境地當(dāng)中。
3.in line 排隊(duì)
同樣是介詞，把on換成in就是in line，排隊(duì)的意思。
People are waiting in line to enter the hall.
人們有秩序地排隊(duì)等著進(jìn)入大廳。
4.cut in line 插隊(duì)
隊(duì)伍被cut，被切斷，就是插隊(duì)的意思，所以加上cut。
Remember don't cut in line.
請(qǐng)記住千萬(wàn)別插隊(duì)。
感謝大家的閱讀，我是罐頭菌
快樂英語(yǔ)學(xué)習(xí)，放眼全球資訊，歡迎關(guān)注英語(yǔ)罐頭
者｜顏海鏡
編輯｜覃云
出處丨前端之巔
本文已獲作者授權(quán)，轉(zhuǎn)載來(lái)源：
https://segmentfault.com/a/1190000016389031
劃重點(diǎn)，這是一道面試必考題，很多面試官都喜歡問這個(gè)問題，我就被問過好幾次了。
要實(shí)現(xiàn)上圖的效果看似很簡(jiǎn)單，實(shí)則暗藏玄機(jī)，本文總結(jié)了一下 CSS 實(shí)現(xiàn)水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個(gè) github 倉(cāng)庫(kù)在：https://github.com/yanhaijing/vertical-center
歡迎大家 star。
僅居中元素定寬高適用：
居中元素不定寬高：
為了實(shí)現(xiàn)上面的效果先來(lái)做些準(zhǔn)備工作，假設(shè) HTML 代碼如下，總共兩個(gè)元素，父元素和子元素：
<div class="wp"> <div class="box size">123123</div> </div>
wp 是父元素的類名，box 是子元素的類名，因?yàn)橛卸▽捄筒欢▽挼膮^(qū)別，size 用來(lái)表示指定寬度，下面是所有效果都要用到的公共代碼，主要是設(shè)置顏色和寬高。
注意：后面不在重復(fù)這段公共代碼，只會(huì)給出相應(yīng)提示。
/* 公共代碼 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
.box.size{
width: 100px;
height: 100px;
}
/* 公共代碼 */
絕對(duì)定位的百分比是相對(duì)于父元素的寬高，通過這個(gè)特性可以讓子元素的居中顯示，但絕對(duì)定位是基于子元素的左上角，期望的效果是子元素的中心居中顯示。
為了修正這個(gè)問題，可以借助外邊距的負(fù)值，負(fù)的外邊距可以讓元素向相反方向定位，通過指定子元素的外邊距為子元素寬度一半的負(fù)值，就可以讓子元素居中了，css 代碼如下。
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
這是我比較常用的方式，這種方式比較好理解，兼容性也很好，缺點(diǎn)是需要知道子元素的寬高。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/absolute1.html
這種方式也要求居中元素的寬高必須固定，HTML 代碼如下：
<div class="wp"> <div class="box size">123123</div> </div>
這種方式通過設(shè)置各個(gè)方向的距離都是 0，此時(shí)再講 margin 設(shè)為 auto，就可以在各個(gè)方向上居中了。
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
這種方法兼容性也很好，缺點(diǎn)是需要知道子元素的寬高。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/absolute2.html
這種方式也要求居中元素的寬高必須固定，所以我們?yōu)?box 增加 size 類，HTML 代碼如下：
<div class="wp"> <div class="box size">123123</div> </div>
感謝 css3 帶來(lái)了計(jì)算屬性，既然 top 的百分比是基于元素的左上角，那么在減去寬度的一半就好了，代碼如下
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
這種方法兼容性依賴 calc 的兼容性，缺點(diǎn)是需要知道子元素的寬高。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/absolute3.html
還是絕對(duì)定位，但這個(gè)方法不需要子元素固定寬高，所以不再需要 size 類了，HTML 代碼如下：
<div class="wp"> <div class="box">123123</div> </div>
修復(fù)絕對(duì)定位的問題，還可以使用 css3 新增的 transform，transform 的 translate 屬性也可以設(shè)置百分比，其是相對(duì)于自身的寬和高，所以可以講 translate 設(shè)置為 -50%，就可以做到居中了，代碼如下：
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
這種方法兼容性依賴 translate2d 的兼容性。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/absolute4.html
利用行內(nèi)元素居中屬性也可以做到水平垂直居中，HTML 代碼如下：
<div class="wp"> <div class="box">123123</div> </div>
把 box 設(shè)置為行內(nèi)元素，通過 text-align 就可以做到水平居中，但很多同學(xué)可能不知道通過通過 vertical-align 也可以在垂直方向做到居中，代碼如下：
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
text-align: left; /* 修正文字 */
}
這種方法需要在子元素中將文字顯示重置為想要的效果。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/lineheight.html
很多同學(xué)一定和我一樣不知道 writing-mode 屬性，感謝 @張?chǎng)涡窭蠋煹姆答?，?jiǎn)單來(lái)說 writing-mode 可以改變文字的顯示方向，比如可以通過 writing-mode 讓文字的顯示變?yōu)榇怪狈较颉?/p>
<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
writing-mode: vertical-lr;
}
顯示效果如下：
水平方向 垂 直 方 向
更神奇的是所有水平方向上的 css 屬性，都會(huì)變?yōu)榇怪狈较蛏系膶傩裕热?text-align，通過 writing-mode 和 text-align 就可以做到水平和垂直方向的居中了，只不過要稍微麻煩一點(diǎn)：
<div class="wp">
<div class="wp-inner">
<div class="box">123123</div>
</div>
</div>
/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
writing-mode: vertical-lr;
text-align: center;
}
.wp-inner {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.box {
display: inline-block;
margin: auto;
text-align: left;
}
這種方法實(shí)現(xiàn)起來(lái)和理解起來(lái)都稍微有些復(fù)雜。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/writing-mode.html
曾經(jīng) table 被用來(lái)做頁(yè)面布局，現(xiàn)在沒人這么做了，但 table 也能夠?qū)崿F(xiàn)水平垂直居中，但是會(huì)增加很多冗余代碼：
<table> <tbody> <tr> <td class="wp"> <div class="box">123123</div> </td> </tr> </tbody> </table>
tabel 單元格中的內(nèi)容天然就是垂直居中的，只要添加一個(gè)水平居中屬性就好了。
.wp {
text-align: center;
}
.box {
display: inline-block;
}
這種方法就是代碼太冗余，而且也不是 table 的正確用法。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/table.html
css 新增的 table 屬性，可以讓我們把普通元素，變?yōu)?table 元素的現(xiàn)實(shí)效果，通過這個(gè)特性也可以實(shí)現(xiàn)水平垂直居中。
<div class="wp"> <div class="box">123123</div> </div>
下面通過 css 屬性，可以讓 div 顯示的和 table 一樣：
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
這種方法和 table 一樣的原理，但卻沒有那么多冗余代碼，兼容性也還不錯(cuò)。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/css-table.html
flex 作為現(xiàn)代的布局方案，顛覆了過去的經(jīng)驗(yàn)，只需幾行代碼就可以優(yōu)雅的做到水平垂直居中。
<div class="wp">
<div class="box">123123</div>
</div>
.wp {
display: flex;
justify-content: center;
align-items: center;
}
目前在移動(dòng)端已經(jīng)完全可以使用 flex 了，PC 端需要看自己業(yè)務(wù)的兼容性情況。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/flex.html
感謝 @一絲姐 反饋的這個(gè)方案，css 新出的網(wǎng)格布局，由于兼容性不太好，一直沒太關(guān)注，通過 grid 也可以實(shí)現(xiàn)水平垂直居中。
<div class="wp">
<div class="box">123123</div>
</div>
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
代碼量也很少，但兼容性不如 flex，不推薦使用。
點(diǎn)擊查看完整 DEMO：
http://yanhaijing.com/vertical-center/grid.html
下面對(duì)比下各個(gè)方式的優(yōu)缺點(diǎn)，肯定又雙叒叕該有同學(xué)說回字的寫法了，簡(jiǎn)單總結(jié)下：
小貼士：關(guān)于 flex 的兼容性決方案，請(qǐng)看這里：
https://yanhaijing.com/css/2016/08/21/flex-practice-on-mobile/
最近發(fā)現(xiàn)很多同學(xué)都對(duì) css 不夠重視，這其實(shí)是不正確的，比如下面的這么簡(jiǎn)單的問題都有那么多同學(xué)不會(huì)，我也是很無(wú)語(yǔ)：
<div class="red blue">123</div>
<div class="blue red">123</div>
.red {
color: red
}
.blue {
color: blue
}
問兩個(gè) div 的顏色分別是什么，竟然只有 40% 的同學(xué)能夠答對(duì)，這 40% 中還有很多同學(xué)不知道為什么，希望這些同學(xué)好好補(bǔ)習(xí)下 CSS 基礎(chǔ)。
<div id="parent">
<!-- 定義子級(jí)元素 -->
<div id="child">居中布局</div>
</div>過以下CSS樣式代碼實(shí)現(xiàn)水平方向居中布局效果
.parent{display:table-cell;vertical-align:middle;}優(yōu)點(diǎn):
瀏覽器的兼容性比較好
缺點(diǎn):
vertical-algin屬性具有繼承性, 導(dǎo)致父級(jí)元素的文本也是居中顯示的
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
