前端高階系列 二 css常見布局解決方案

2021-09-13 03:53:45 字數 1432 閱讀 6827

demo


demo


demo
相容性佳（甚至可以相容ie6和ie7）

demo


demo


demo


demo
強大的absolute對於這種小問題當然是很簡單的

demo
同水平居中，這也可以使用margin-top實現，原理水平居中

如果說absolute強大，那flex只是笑笑，因為他才是最強的，但有相容性問題

demo


demo


demo


demo
這種布局最常見的就是中後台型別的專案，如下圖：

ie6中會有3px的bug,解決方法可以在.left加入margin-left:-3px當然下面的方案也可以解決這個bug:

left


right


right


left


right


right
設定overflow:hidden會出發bfc模式（block formatting context）塊級格式上下文。bfc是什麼呢？用通俗的江就是，隨便你在bfc裡面幹什麼，外面都不會手段哦影響。此方法樣式簡單但不支援 ie 6

left


right


right
table的顯示特性為每列的單元格寬度和一定等與**寬度。table-layout: fixed可加速渲染，也是設定布局優先。table-cell中不可以設定margin但是可以通過padding來設定間距

left


right


right
以上就是常見的幾種布局。

高階css 常見布局技巧

1.margin負值的應用 1 讓每個盒子margin往左側移動 1px 正好壓住相鄰盒子邊框 2 滑鼠經過某個盒子的時候，提高當前盒子的層級即可 如果沒有有定位，則加相對定位 保留位置 如果有定位，則加z index 2.文字圍繞浮動元素 我是乙個保安,上班為了下班.我是乙個保安,上班為了下班.3...

前端高階系列 五 flex布局

以下內容主要摘抄自阮一峰老師的部落格 flexbox布局 flexible box 模組 目前是w3c last call working draft 旨在提供更有效的布局方式，即使容器中的專案之間對齊和分配空間的大小未知或動態 因此單詞 flex flex布局背後的主要思想是讓容器能夠改變其專案的...

CSS常見布局解決方案

瀏覽部落格時，看到一篇部落格 css常見布局解決方案 因為平時在寫 的時候，也會出現很多css布局方面的問題，所以看到這個 文章格外興奮，借鑑他的學習經驗，希望自己以後也可以有所總結。水平居中布局 首先看水平居中 1.margin 定寬 demo 不定寬的水平居中 2.table margin de...