pc端常見布局

1.固定寬度三列布局

html結構如下

/**右側主要內容區域**/

/**主要內容區域的主要內容**/

/**主要內容區域中的次要內容**/

/**左側導航區**/

css布局如下

/**為了讓容器元素水平居中，因ie6混雜模式下不識別margin：0 auto宣告，

而text-align:center,ie會理解為讓所有的東西居中，而不只是文字，此hack無害**/
body
margin:0 auto; /**固定寬度的塊級元素水平居中**/
overflow:hidden; /**此技巧用來應對子元素浮動，這樣不會因為子元素浮動導致父元素沒有了高度**/ 
text-align:left; /**讓文字重新左對齊**/
} width: 670px;
/**padding-right:20px;**/
float:right;
display:inline; /**防止ie雙外邊距浮動產生的bug**/
overflow:hidden;
} width:230px;
float:left;
dispaly:inline; /**防止ie雙外邊距浮動產生的bug**/
} width:400px;
float:left;
display:inline;
} width:230px;
padding-right:20px;
float:right;
display:inline;
}

有點：根據設計稿的固定寬度來布局，可以清楚知道每乙個元素的寬度，知道所有東西在什麼地方，這種布局最直接最簡單。

缺點：1.不能合理利用瀏覽器空間，遇到大的解析度機器，頁面只會集中在中間，兩邊留下很多空白；遇到小解析度的機器，會出現滾動條　

2.布局只適用於瀏覽器的預設字型大小，如果設定字型大小變大，會導致短行，不易閱讀

pc端常見布局 水平居中布局 單元素定寬

doctype html html head meta charset utf 8 title 常見元素布局 title style type text css 一 水平居中布局 1.單個元素水平居中 寬度固定 最常用 box style head body div class content di...

移動端常見布局方式

流動布局與固定寬度布局基本不同點就在於對 尺寸的測量單位不同，流動布局就是使用百分比來代替px作為單位。除此之外，流動布局使用浮動，float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow 溢位 避免了水平滾動條的出現。通過查詢當前瀏覽器...

pc常見端相容性問題

原因 開啟除錯面板，你會發現 ie8 瀏覽器把 png 格式的 img 解析成了 span 標籤，導致圖無法顯 示。解決方案 在樣式裡面對 span 設定寬高和 display inline block 即可。解決方案 可以用 opacity opacity 0.7 ff chrome safari...