總結(jié)一下網(wǎng)易nec框架中的幾種布局
左側(cè)定寬，右側(cè)自適應(yīng)布局
<!-- html代碼 -->
<div class="g-bd1 f-cb">
<div class="g-sd1">
<p>左側(cè)定寬</p>
</div>
<div class="g-mn1">
<div class="g-mn1c">
<p>右側(cè)自適應(yīng)</p>
</div>
</div>
</div>
/*CSS代碼*/
/* 兩列右側(cè)自適應(yīng)布局 */
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-sd1 p{background-color:pink}
.g-mn1{float:right;width:100%;}
.g-mn1c{margin-left:200px;}
.g-mn1c p{background-color:green}
兩列右側(cè)自適應(yīng)布局.png
此時(shí)我們拿到了我們想要的效果，分析一下，css中position是做什么的，不設(shè)置定位貌似也能實(shí)現(xiàn)效果啊，有點(diǎn)疑惑。這個(gè)時(shí)候我們打開控制臺(tái)，鼠標(biāo)移動(dòng)到左邊的粉色區(qū)域發(fā)現(xiàn)顯示的是g-mn1的樣式，這是為什么呢？原因很簡(jiǎn)單，這里的g-sd1被覆蓋了，那你又要問了，為啥還是能看到正確的結(jié)果呢，那是因?yàn)槲覀兊膅-mn1樣式是透明的，如果加個(gè)背景色你就很清楚了，所以這里的定位是為了讓g-sd1出現(xiàn)在g-mn1 的上方，可是為什么會(huì)這樣呢？帶著疑惑我查了下mdn文檔。
relative.png
在這里很清楚的講了設(shè)置了relative這個(gè)關(guān)鍵字后的作用，是不是長(zhǎng)知識(shí)~
右側(cè)定寬，左側(cè)自適應(yīng)布局
聽著就像一樣的，我們看一下
<!-- html代碼 -->
<div class="g-bd2 f-cb">
<div class="g-mn2">
<div class="g-mn2c">
<p>左側(cè)自適應(yīng)</p>
</div>
</div>
<div class="g-sd2">
<p>右側(cè)定寬</p>
</div>
</div>
/*CSS代碼*/
/* 兩列左側(cè)自適應(yīng)布局 */
.g-bd2{margin:0 0 10px;}
.g-sd2{position:relative;float:right;width:230px;margin-left:-230px}
.g-sd2 p{background-color:pink}
.g-mn2{float:left;width:100%;}
.g-mn2c{margin-right:240px;}
.g-mn2c p{background-color:green}
hhh~就是一樣的，那我就跳過了。
兩側(cè)定寬，中間自適應(yīng)布局
這個(gè)看著要復(fù)雜一些啊，我們來看一下代碼
<!-- html代碼 -->
<div class="g-bd5 f-cb">
<div class="g-sd51">
<p>左側(cè)定寬</p>
</div>
<div class="g-mn5">
<div class="g-mn5c">
<p>中間自適應(yīng)</p>
</div>
</div>
<div class="g-sd52">
<p>右側(cè)定寬</p>
</div>
</div>
/*CSS代碼*/
/* 三列中間自適應(yīng)布局 */
.g-bd5{margin:0 0 10px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}
.g-sd51 p{background-color: red}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-sd52 p{background-color: lime}
.g-mn5{float:left;width:100%;}
.g-mn5c{margin:0 200px 0 240px;}
.g-mn5c p{background-color: pink}
看了一眼 其實(shí)和第一個(gè)也是一樣的思路，通過position:relative設(shè)置相對(duì)定位，使得兩側(cè)浮上來(其實(shí)并不是浮動(dòng)啊，我這里不知道用什么詞)。后面的幾個(gè)布局都是通過這種方式來實(shí)現(xiàn)自適應(yīng)布局的，那我要是用這種思路去實(shí)現(xiàn)不管多少列布局都可以啊
今天再來研究一下布局的問題呀，我發(fā)現(xiàn)nec中的三列自適應(yīng)布局有個(gè)好聽的名字叫雙飛翼布局。
查了一下發(fā)現(xiàn)與之對(duì)應(yīng)的叫圣杯布局，所以今天就來試一試這倆種布局的區(qū)別吧~
首先我們來看看圣杯布局
<!-- 圣杯的 HTML 結(jié)構(gòu) -->
<div class="container">
<!-- 中間的 div 必須寫在最前面，不然無法生效 -->
<div class="middle">中間彈性區(qū)</div>
<div class="left">左邊欄</div>
<div class="right">右邊欄</div>
</div>
.container{padding: 0px 120px 0 140px;/*騰出寬度*/}
.middle{width: 100%;position: relative;}
.left{width: 140px;margin-left: -100%;/*將left層拉回main層所在高度區(qū)域*/
left: -140px;/*調(diào)整位置*/
position: relative;
}
.right{width: 120px;margin-left: -120px;/*將right層拉回main層所在高度區(qū)域*/
right: -120px;/*調(diào)整位置*/ position: relative;
}
- 中間盒子的寬度設(shè)置為 width: 100%; 獨(dú)占一行；
- 使用負(fù)邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；
- .left {margin-left:-100%;} 把左邊的盒子拉上去
- .right {margin-left：-右邊盒子寬度px;} 把右邊的盒子拉上去
- 父盒子設(shè)置左右的 padding 來為左右盒子留位置；
- 對(duì)左右盒子使用相對(duì)布局來占據(jù) padding 的空白，避免中間盒子的內(nèi)容被左右盒子覆蓋；
這個(gè)布局就是得注意中間的盒子得放最前面，nec中的雙飛翼就不需要這么做，兩者的區(qū)別呢就是圣杯的html結(jié)構(gòu)簡(jiǎn)單一些，但是css上需要多配置一點(diǎn)，其實(shí)道理上二者是相同的。
圣杯和雙飛翼異同
圣杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。
- 兩種方法基本思路都相同：首先讓中間盒子 100% 寬度占滿同一高度的空間，在左右兩個(gè)盒子被擠出中間盒子所在區(qū)域時(shí)，使用 margin-left 的負(fù)值將左右兩個(gè)盒子拉回與中間盒子同一高度的空間。接下來進(jìn)行一些調(diào)整避免中間盒子的內(nèi)容被左右盒子遮擋。
- 主要區(qū)別在于 如何使中間盒子的內(nèi)容不被左右盒子遮擋：
- 圣杯布局的方法：設(shè)置父盒子的 padding 值為左右盒子留出空位，再利用相對(duì)布局對(duì)左右盒子調(diào)整位置占據(jù) padding 出來的空位；
- 雙飛翼布局的方法：在中間盒子里再增加一個(gè)子盒子，直接設(shè)置這個(gè)子盒子的 margin 值來讓出空位，而不用再調(diào)整左右盒子。
簡(jiǎn)單說起來就是雙飛翼布局比圣杯布局多創(chuàng)建了一個(gè) div，但不用相對(duì)布局了，少設(shè)置幾個(gè)屬性。
還有一種方式可以實(shí)現(xiàn)此三列布局，那就是浮動(dòng)布局和絕對(duì)定位布局，我們先看一下浮動(dòng)布局，左邊盒子左浮動(dòng)，右邊盒子右浮動(dòng)，中間盒子利用 margin-left 和 margin-right 來為左右盒子留位置，同時(shí)父盒子設(shè)置 overflow: auto; 來避免子盒子溢出。
<!-- 浮動(dòng)實(shí)現(xiàn)的 HTML 結(jié)構(gòu) -->
<div class="container">
<div class="left">左邊欄</div>
<div class="right">右邊欄</div>
<!-- 中間的 div 必須寫在最后面 -->
<div class="main">中間彈性區(qū)</div>
</div>
.container{overflow:auto;}
.left,.right {float: left;width: 220px;height: 200px;background: blue;}
.right{float: right;}
.main {margin: 0 230px;background: red;height: 200px;}
絕對(duì)定位是兩側(cè)使用絕對(duì)定位，中間自適應(yīng)，但是這種方式問題比較多，還是不列出來了。
接下來呢 我們通過一個(gè)題目來試試圣杯布局和雙飛翼布局吧。
百度前端學(xué)院.png
基本思路及區(qū)別：
1.兩種布局的基本構(gòu)思為：首先讓中間層100%寬度占滿同一高度的空間，在左右兩層被擠出中間層所在區(qū)域時(shí)， 使用margin-left的負(fù)值將左右兩個(gè)層拉回與中間層同一高度的空間，接下來調(diào)整左右兩層到指定位置， 最后使用中間層的margin或padding屬性使中間層的內(nèi)容躲出左右兩層占住的顯示區(qū)。
2.兩種布局的主要區(qū)別在于：圣杯布局采用一個(gè)父層包含中間、左右三個(gè)子層，設(shè)置父層的padding值騰出左右兩層的顯示區(qū)， 并對(duì)左右兩層使用relative和left、right值調(diào)整位置；雙飛翼采用中間、左右三層并列，再在中間層里設(shè)置一個(gè)子層， 設(shè)置中間層子層的margin值騰出左右兩層的顯示區(qū)，對(duì)左右兩層使用margin值即可調(diào)整位置；
首先看一下圣杯布局的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*設(shè)置外層*/
.container{background: #eee;padding: 20px 160px 20px 240px;margin: 20px;border: 1px solid #999999;box-sizing: border-box; overflow: auto;
}
article,aside{background: #fff;border:1px solid #999999;}
.main{float: left;position: relative;width: 100%;box-sizing: border-box;padding: 20px;}
.main h2{font-size: 25px;text-align: center;}
/*左側(cè)*/
.left{position: relative;width: 200px;float: left;margin-left: -100%;box-sizing: border-box;left: -220px;padding: 20px;}
.left img{width: 100px;height: 80px;padding-left: 30px;border-radius: 50px;}
.left span{display: block;margin-bottom: 10px;}
/*右側(cè)*/
.right{position: relative;width: 120px;float: left;margin-left: -120px;right: 0px;text-align: center;box-sizing: border-box;right: -140px;}
.right dl{margin: 20px;}
.right dl dd{text-align: center;width: 80px;}
.right dl dd span{display: block;margin-bottom:10px;}
.right dl dd img{width: 80px;height: 80px;}
/*設(shè)置footer*/
footer{clear: both;}
footer p{text-align: center;line-height: 70px;background-color: gray;}
</style>
</head>
<body>
<div class="container">
<article class="main">
<h2>圣杯布局</h2>
<p class="content">2017年，iPhone X所使用的OLED屏幕（有機(jī)發(fā)光二激光，以下簡(jiǎn)稱為“有機(jī)屏”）成為蘋果的一個(gè)煩惱來源，從最初的供貨不足，一直到最近發(fā)生的綠線門質(zhì)量丑聞，蘋果正在考慮推進(jìn)有機(jī)屏采購(gòu)的多元化，即積極和韓國(guó)LG公司進(jìn)行接觸。不過據(jù)外媒最新消息，蘋果和LG的合作也將面臨另外一個(gè)煩惱，即LG目前的屏幕被指質(zhì)量糟糕。和傳統(tǒng)的液晶屏相比，有機(jī)屏具備多個(gè)優(yōu)點(diǎn)，比如畫質(zhì)更好、黑色更黑，更加節(jié)省電能。在若干年前，中國(guó)的大量手機(jī)就開始使用有機(jī)屏（三星電子供貨的AMOLED屏幕），不過動(dòng)作遲緩的蘋果直到今年才開始使用這一屏幕。據(jù)Arstehchnia等國(guó)外媒體報(bào)道，在iPhone X的生產(chǎn)中，三星顯示器公司成為唯一的有機(jī)屏供貨商。之前的消息稱，三星無法提供足夠的有機(jī)屏，影響了富士康集團(tuán)的組裝，另外良品率不佳，甚至遭到了蘋果方面的質(zhì)量罰款。最近iPhone X已經(jīng)大量上市，有機(jī)屏爆出了糟糕的綠線門丑聞，懷疑極有可能和三星公司有關(guān)系。不過直到目前，蘋果并未公布綠線門的具體原因，只是給消費(fèi)者提供了更換手機(jī)的保修服務(wù)。按照蘋果的習(xí)慣，該公司不可能一直依賴一家公司向其提供某個(gè)零部件，除了遭遇瓶頸之外，蘋果在價(jià)格談判中將陷入被動(dòng)。據(jù)悉，在過去一年時(shí)間里，蘋果已經(jīng)和LG顯示器公司進(jìn)行了接觸，希望該公司未來能夠提供手機(jī)有機(jī)屏。在今年年中，雙方達(dá)成了一個(gè)初步協(xié)議，將共同投資20多億美元，新建一個(gè)有機(jī)屏工廠，產(chǎn)品主要提供給蘋果使用。臺(tái)灣凱基證券公司的分析師郭明錤預(yù)測(cè)，2019年，LG將提供蘋果一到兩成的有機(jī)屏，到2020年，供貨比例將增加到兩到三成。在顯示面板市場(chǎng)，LG對(duì)于有機(jī)屏技術(shù)下了大賭注。但是奇怪的是，該公司生產(chǎn)的有機(jī)屏電視機(jī)質(zhì)量良好，但是手機(jī)有機(jī)屏卻爆出了大量的故障。今年，谷歌公司推出了兩款自有品牌手機(jī)，其中的大屏版本Pixel 2 XL使用全面屏設(shè)計(jì)，委托LG電子設(shè)計(jì)和代工，另外也使用了LG生產(chǎn)的有機(jī)屏。但是在過去幾個(gè)月中，這款手機(jī)爆出了嚴(yán)重的屏幕質(zhì)量問題，設(shè)計(jì)到燒屏、顏色顯示不均勻、亮度低。用戶在網(wǎng)絡(luò)論壇上進(jìn)行了大量的吐槽。對(duì)于嚴(yán)重的燒屏問題，谷歌官方回應(yīng)稱，調(diào)查表明谷歌手機(jī)的燒屏概率和其他使用有機(jī)屏的高端手機(jī)基本類似，因此并不會(huì)影響消費(fèi)者使用。不過谷歌承諾，這款手機(jī)的保修期限從常規(guī)的一年增加到兩年。谷歌手機(jī)的屏幕故障，使得外界懷疑LG顯示器公司的有機(jī)屏質(zhì)量控制水平。在有機(jī)屏技術(shù)上，LG在全球處于領(lǐng)先水平，但是該公司一直發(fā)力于大尺寸有機(jī)屏，是全世界最大的有機(jī)屏電視機(jī)制造商，在小尺寸有機(jī)屏（手機(jī)屏幕）方面，LG公司還只算個(gè)新手。據(jù)市場(chǎng)機(jī)構(gòu)稱，目前在全球手機(jī)有機(jī)屏市場(chǎng)，三星顯示器公司掌握了99 % 的市場(chǎng)份額，處于完全壟斷。據(jù)彭博社報(bào)道，三星依靠自己的壟斷地位，從蘋果身上獲取了豐厚的利潤(rùn)。三星自家的手機(jī)采購(gòu)有機(jī)屏，價(jià)格為85美元，但是供貨給蘋果iPhone X，報(bào)價(jià)為110美元。在顯示屏領(lǐng)域，蘋果擁有大量的供應(yīng)商，不過遺憾的是，除了三星之外，其他廠商目前具不具備大規(guī)模量產(chǎn)技術(shù)。日本夏普公司在有機(jī)屏領(lǐng)域進(jìn)行了技術(shù)積累，但是由于之前一直資金困乏，難以量產(chǎn)。另外一家大型供應(yīng)商日本顯示器公司，目前也正在進(jìn)行結(jié)構(gòu)重組，推進(jìn)有機(jī)屏的量產(chǎn)研究。據(jù)報(bào)道，蘋果之前甚至和中國(guó)的京東方進(jìn)行了接觸，希望獲得有機(jī)屏供應(yīng)，但是雙方后來并沒有傳出進(jìn)一步的采購(gòu)合作。據(jù)臺(tái)灣媒體報(bào)道，中國(guó)大陸的有機(jī)屏制造商，在量產(chǎn)技術(shù)和質(zhì)量方面仍然和三星電子有著若干年的差距。</p>
</article>
<aside class="left">
<img src="https://wx3.sinaimg.cn/mw690/71167f01ly1flwwd0wtx0j20zk0tt0wu.jpg" />
</aside>
<aside class="right">
<dl>
<dt></dt>
<dd><span>妖妖靈</span><img src="https://wx1.sinaimg.cn/mw690/ea57f288ly1flxmhb8x2pj20b40b4mxc.jpg" /></dd>
<dd><span>幺幺九</span><img src="https://wx1.sinaimg.cn/mw690/ea57f288ly1flxmhba5v1j20b40b4dg1.jpg" /></dd>
<dd><span>幺幺兒</span><img src="https://wx2.sinaimg.cn/mw690/ea57f288ly1flxmhbdtyfj20b40b4weq.jpg" /></dd>
<dd><span>妖妖寺</span><img src="https://wx2.sinaimg.cn/mw690/ea57f288ly1flxmhbd3qwj20b40b40su.jpg" /></dd>
</dl>
</aside>
</div>
<footer>
<p>版權(quán)所有 © 妖妖靈</p>
</footer>
</body>
</html>
接下來我們看一下雙飛翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
article,aside{background: #fff;border:1px solid #999;}
.container{margin: 20px;overflow: hidden;}
.main{float: left;width: 100%;box-sizing: border-box;padding: 20px;background: #eee;}
.main-inner{margin: 0 140px 0 220px; border:1px solid #999; background: #fff; padding: 60px;}
.main h2{text-align: center;}
.left{position: relative;width: 200px;height: 100px; float: left;margin-left: -100%;box-sizing: border-box;margin-top: 21px;left: 20px;}
.left img{width: 80px;height: 80px;border-radius: 50px;margin: 10px 50px;}
.left span{vertical-align: top;}
.right{position: relative;width: 120px;float: left;margin-left: -140px; margin-top: 21px;}
.right dl{margin: 20px;}
.right dl dd{text-align: center;width: 80px;}
.right dl dd span{display: block;margin-bottom:10px;}
.right dl dd img{width: 80px;height: 80px;}
footer{text-align: center;line-height: 70px;background-color: #4a4746;color: #fff;}
</style>
</head>
<body>
<div class="container">
<article class="main">
<div class="main-inner">
<h2>雙飛翼布局</h2>
<p class="content">2017年，iPhone X所使用的OLED屏幕（有機(jī)發(fā)光二激光，以下簡(jiǎn)稱為“有機(jī)屏”）成為蘋果的一個(gè)煩惱來源，從最初的供貨不足，一直到最近發(fā)生的綠線門質(zhì)量丑聞，蘋果正在考慮推進(jìn)有機(jī)屏采購(gòu)的多元化，即積極和韓國(guó)LG公司進(jìn)行接觸。不過據(jù)外媒最新消息，蘋果和LG的合作也將面臨另外一個(gè)煩惱，即LG目前的屏幕被指質(zhì)量糟糕。和傳統(tǒng)的液晶屏相比，有機(jī)屏具備多個(gè)優(yōu)點(diǎn)，比如畫質(zhì)更好、黑色更黑，更加節(jié)省電能。在若干年前，中國(guó)的大量手機(jī)就開始使用有機(jī)屏（三星電子供貨的AMOLED屏幕），不過動(dòng)作遲緩的蘋果直到今年才開始使用這一屏幕。據(jù)Arstehchnia等國(guó)外媒體報(bào)道，在iPhone X的生產(chǎn)中，三星顯示器公司成為唯一的有機(jī)屏供貨商。之前的消息稱，三星無法提供足夠的有機(jī)屏，影響了富士康集團(tuán)的組裝，另外良品率不佳，甚至遭到了蘋果方面的質(zhì)量罰款。最近iPhone X已經(jīng)大量上市，有機(jī)屏爆出了糟糕的綠線門丑聞，懷疑極有可能和三星公司有關(guān)系。不過直到目前，蘋果并未公布綠線門的具體原因，只是給消費(fèi)者提供了更換手機(jī)的保修服務(wù)。按照蘋果的習(xí)慣，該公司不可能一直依賴一家公司向其提供某個(gè)零部件，除了遭遇瓶頸之外，蘋果在價(jià)格談判中將陷入被動(dòng)。據(jù)悉，在過去一年時(shí)間里，蘋果已經(jīng)和LG顯示器公司進(jìn)行了接觸，希望該公司未來能夠提供手機(jī)有機(jī)屏。在今年年中，雙方達(dá)成了一個(gè)初步協(xié)議，將共同投資20多億美元，新建一個(gè)有機(jī)屏工廠，產(chǎn)品主要提供給蘋果使用。臺(tái)灣凱基證券公司的分析師郭明錤預(yù)測(cè)，2019年，LG將提供蘋果一到兩成的有機(jī)屏，到2020年，供貨比例將增加到兩到三成。在顯示面板市場(chǎng)，LG對(duì)于有機(jī)屏技術(shù)下了大賭注。但是奇怪的是，該公司生產(chǎn)的有機(jī)屏電視機(jī)質(zhì)量良好，但是手機(jī)有機(jī)屏卻爆出了大量的故障。今年，谷歌公司推出了兩款自有品牌手機(jī)，其中的大屏版本Pixel 2 XL使用全面屏設(shè)計(jì)，委托LG電子設(shè)計(jì)和代工，另外也使用了LG生產(chǎn)的有機(jī)屏。但是在過去幾個(gè)月中，這款手機(jī)爆出了嚴(yán)重的屏幕質(zhì)量問題，設(shè)計(jì)到燒屏、顏色顯示不均勻、亮度低。用戶在網(wǎng)絡(luò)論壇上進(jìn)行了大量的吐槽。對(duì)于嚴(yán)重的燒屏問題，谷歌官方回應(yīng)稱，調(diào)查表明谷歌手機(jī)的燒屏概率和其他使用有機(jī)屏的高端手機(jī)基本類似，因此并不會(huì)影響消費(fèi)者使用。不過谷歌承諾，這款手機(jī)的保修期限從常規(guī)的一年增加到兩年。谷歌手機(jī)的屏幕故障，使得外界懷疑LG顯示器公司的有機(jī)屏質(zhì)量控制水平。在有機(jī)屏技術(shù)上，LG在全球處于領(lǐng)先水平，但是該公司一直發(fā)力于大尺寸有機(jī)屏，是全世界最大的有機(jī)屏電視機(jī)制造商，在小尺寸有機(jī)屏（手機(jī)屏幕）方面，LG公司還只算個(gè)新手。據(jù)市場(chǎng)機(jī)構(gòu)稱，目前在全球手機(jī)有機(jī)屏市場(chǎng)，三星顯示器公司掌握了99 % 的市場(chǎng)份額，處于完全壟斷。據(jù)彭博社報(bào)道，三星依靠自己的壟斷地位，從蘋果身上獲取了豐厚的利潤(rùn)。三星自家的手機(jī)采購(gòu)有機(jī)屏，價(jià)格為85美元，但是供貨給蘋果iPhone X，報(bào)價(jià)為110美元。在顯示屏領(lǐng)域，蘋果擁有大量的供應(yīng)商，不過遺憾的是，除了三星之外，其他廠商目前具不具備大規(guī)模量產(chǎn)技術(shù)。日本夏普公司在有機(jī)屏領(lǐng)域進(jìn)行了技術(shù)積累，但是由于之前一直資金困乏，難以量產(chǎn)。另外一家大型供應(yīng)商日本顯示器公司，目前也正在進(jìn)行結(jié)構(gòu)重組，推進(jìn)有機(jī)屏的量產(chǎn)研究。據(jù)報(bào)道，蘋果之前甚至和中國(guó)的京東方進(jìn)行了接觸，希望獲得有機(jī)屏供應(yīng)，但是雙方后來并沒有傳出進(jìn)一步的采購(gòu)合作。據(jù)臺(tái)灣媒體報(bào)道，中國(guó)大陸的有機(jī)屏制造商，在量產(chǎn)技術(shù)和質(zhì)量方面仍然和三星電子有著若干年的差距論壇上進(jìn)行了大量的吐槽。對(duì)于嚴(yán)重的燒屏問題，谷歌官方回應(yīng)稱，調(diào)查表明谷歌手機(jī)的燒屏概率和其他使用有機(jī)屏的高端手機(jī)基本類似，因此并不會(huì)影響消費(fèi)者使用。不過谷歌承諾，這款手機(jī)的保修期限從常規(guī)的一年增加到兩年。谷歌手機(jī)的屏幕故障，使得外界懷疑LG顯示器公司的有機(jī)屏質(zhì)量控制水平。在有機(jī)屏技術(shù)上，LG在全球處于領(lǐng)先水平，但是該公司一直發(fā)力于大尺寸有機(jī)屏，是全世界最大的有機(jī)屏電視機(jī)制造商，在小尺寸有機(jī)屏（手機(jī)屏幕）方面，LG公司還只算個(gè)新手。據(jù)市場(chǎng)機(jī)構(gòu)稱，目前在全球手機(jī)有機(jī)屏市場(chǎng)，三星顯示器公司掌握了99 % 的市場(chǎng)份額，處于完全壟斷。據(jù)彭博社報(bào)道，三星依靠自己的壟斷地位，從蘋果身上獲取了豐厚的利潤(rùn)。三星自家的手機(jī)采購(gòu)有機(jī)屏，價(jià)格為85美元，但是供貨給蘋果iPhone X，報(bào)價(jià)為110美元。在顯示屏領(lǐng)域，蘋果擁有大量的供應(yīng)商，不過遺憾的是，除了三星之外，其他廠商目前具不具備大規(guī)模量產(chǎn)技術(shù)。日本夏普公司在有機(jī)屏領(lǐng)域進(jìn)行了技術(shù)積累，但是由于之前一直資金困乏，難以量產(chǎn)。另外一家大型供應(yīng)商日本顯示器公司，目前也正在進(jìn)行結(jié)構(gòu)重組，推進(jìn)有機(jī)屏的量產(chǎn)研究。據(jù)報(bào)道，蘋果之前甚至和中國(guó)的京東方進(jìn)行了接觸，希望獲得有機(jī)屏供應(yīng)，但是雙方后來并沒有傳出進(jìn)一步的采購(gòu)合作。據(jù)臺(tái)灣媒體報(bào)道，中國(guó)大陸的有機(jī)屏制造商，在量產(chǎn)技術(shù)和質(zhì)量方面仍然和三星電子有著若干年的差距。</p>
</div>
</article>
<aside class="left">
<img src="https://wx3.sinaimg.cn/mw690/71167f01ly1flwwd0wtx0j20zk0tt0wu.jpg" alt="旅游"/>
</aside>
<aside class="right">
<dl>
<dt></dt>
<dd><span>妖妖靈</span><img src="https://wx1.sinaimg.cn/mw690/ea57f288ly1flxmhb8x2pj20b40b4mxc.jpg" /></dd>
<dd><span>幺幺九</span><img src="https://wx1.sinaimg.cn/mw690/ea57f288ly1flxmhba5v1j20b40b4dg1.jpg" /></dd>
<dd><span>幺幺兒</span><img src="https://wx2.sinaimg.cn/mw690/ea57f288ly1flxmhbdtyfj20b40b4weq.jpg" /></dd>
<dd><span>妖妖寺</span><img src="https://wx2.sinaimg.cn/mw690/ea57f288ly1flxmhbd3qwj20b40b40su.jpg" /></dd>
</dl>
</aside>
</div>
<footer>
<p>版權(quán)所有 © 妖妖靈</p>
</footer>
</body>
</html>
css3中可以對(duì)塊級(jí)元素和內(nèi)聯(lián)塊元素設(shè)置box-sizing屬性，屬性值分別為content-box（默認(rèn)值，讓元素維持W3C的標(biāo)準(zhǔn)Box Model， 元素的width/height值為元素內(nèi)容區(qū)寬高）和border-box（讓元素維持傳統(tǒng)的Box Model，元素的width/height值為內(nèi)容區(qū)寬高、 內(nèi)邊距寬高、邊框?qū)捀咧停?，在圣杯和雙飛翼布局中，如果某層的寬度設(shè)置為100%，還需要設(shè)置其邊框、內(nèi)邊距、外邊距屬性時(shí)， 為了避免該層撐破瀏覽器窗口寬度，需要將box-sizing屬性設(shè)置為border-box;
結(jié)果如圖所示：
image.png
