如何實(shí)現(xiàn)左右定寬，中間自適應(yīng)寬度的css布局？對(duì)于左右定寬中間自適應(yīng)這種css布局，其實(shí)有很多實(shí)現(xiàn)方法，下面簡(jiǎn)單介紹幾種，供大家參考；絕對(duì)定位 margin原理是將左右兩邊的div使用絕對(duì)定位分別定位

如何實(shí)現(xiàn)左右定寬，中間自適應(yīng)寬度的css布局？

對(duì)于左右定寬中間自適應(yīng)這種css布局，其實(shí)有很多實(shí)現(xiàn)方法，下面簡(jiǎn)單介紹幾種，供大家參考；

絕對(duì)定位 margin

原理是將左右兩邊的div使用絕對(duì)定位分別定位到左右兩邊，中間的div使用margin屬性，留出左右div的寬度，將其中間的div寬度設(shè)為100%即可，代碼如圖

flex布局（彈性盒子）

在外層包一層div，設(shè)置屬性display：flex，里面的子元素設(shè)置屬性flex:1，具體實(shí)現(xiàn)，看下圖代碼

float（浮動(dòng)布局）

float布局將左右div分別浮動(dòng)到左右，中間使用margin屬性，留出左右的寬度，這個(gè)跟絕對(duì)定位布局有點(diǎn)相似，代碼如下圖

效果圖：
總結(jié)：

實(shí)現(xiàn)這種左右定寬，中間自適應(yīng)的css布局，其實(shí)有很多種實(shí)現(xiàn)方法，比如還有“圣杯布局”、“雙飛翼布局”；個(gè)人比較推薦flex布局方式，這也是css3新屬性，實(shí)現(xiàn)起來(lái)比較方便；如有疑問(wèn)，歡迎在評(píng)論下方留言，大家一起討論

先學(xué)js還是HTML5好？

個(gè)人建議先學(xué)容易的后學(xué)復(fù)雜的。毫無(wú)疑問(wèn)，HTML語(yǔ)言會(huì)比JavaScript容易上手。

HTML語(yǔ)言與css一般一起學(xué)，是用于畫網(wǎng)頁(yè)的語(yǔ)言工具，HTML好玩之處在于讓你馬上感受到編程的樂(lè)趣，可能有人說(shuō)這語(yǔ)言算編程？其實(shí)編程沒(méi)有這么難，你把代碼輸完然后可以馬上出效果，這就是HTML，代碼就是磚塊，HTML就是磚塊的原料，最后的網(wǎng)頁(yè)產(chǎn)品就是被磚塊造好的房子。

JavaScript別看它是個(gè)腳本語(yǔ)言，如今的使用度已經(jīng)遙遙領(lǐng)先很多語(yǔ)言，甚至一度被評(píng)為最受歡迎的語(yǔ)言。JavaScript的寫法非常精煉，而且用它確實(shí)是能感受到編程的厚重感，很多如今的前端框架基本上都是JavaScript為基礎(chǔ)，也就是說(shuō)你如果想搞前端，學(xué)JavaScript是必不可少的。

不過(guò)如果零基礎(chǔ)可以先學(xué)HTML練練手，一兩天就能掌握個(gè)大概。

關(guān)注“極客宇文氏”，更多獨(dú)到見(jiàn)解