前言:上班划水偷空了解了一下聖杯布局和雙飛翼布局,一聽這兩個名字,覺得不明覺厲,其實就是三欄布局,左右兩邊的盒子寬度固定,中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。。。
聖杯布局,方法一:
.container
.middle
.left
.right
<
/style>
<
/head>
="container"
>
<
!-- 中間欄放在前面優先渲染 --
>
="middle"
>好好掛機吧更好的規劃規範過的很好的借**好好火狐u湖庫及高度和<
/div>
="left"
>left<
/div>
="right"
>right<
/div>
<
/div>
<
/body>
不使用定位,在中間盒子控制padding(以下**僅僅包含樣式**)
.container
.middle
.left
.right
雙飛翼布局:(最終效果跟聖杯布局沒什麼區別)
*.main-inner
.content
.content > div
.main
.left
.right
<
/style>
<
/head>
="content"
>
<
!-- 中間欄放在前面優先渲染 --
>
="main"
>
="main-inner"
>
好好掛機吧更好的規劃規
(123
)範過的很好
(誤會的話)的借**好好火狐u湖庫及高度和<
/div>
<
/div>
="left"
>left<
/div>
="right"
>right<
/div>
<
/div>
<
/body>
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進,web端的布局方式已基本成熟,那麼在 布局方式中,三列布局最為常用,布局方式也有很多,漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面,那麼瀏覽器在做重繪的時候不久有限顯示了嗎?機制的開發者們開始圍繞者這個方向進行了dom的優化,於是誕生了...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...
聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局,即中間是主要內容main content,然後是左邊側欄,一般是 的分類資訊,右邊欄就是一些附屬功能,最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰,分為main...