CSS流式布局仿京東

個人自學demo。

效果圖：

總結：1：流式布局寬度使用百分比。

2：預設樣式

body

/*點選高亮我們需要清除清除設定為transparent 完成透明

*/*

/*在移動端瀏覽器預設的外觀在ios上加上這個屬性才能給按鈕和輸入框自定義樣式*/}

/*禁用長按頁面時的彈出選單

*/img,

a a ul

/*底部有空隙

/*浮動引起的父元素高度坍塌解決（最外層父元素新增clearfix ）

*/.clearfix:after

3：底部有空隙

4：浮動引起的父元素高度坍塌 css 經典問題

參考 clearfix類

5：和文字對齊

行內元素文字和對齊。預設：元素放置在父元素的基線上。

看到和文字對齊就要想到 vertical-align

父元素需要設定 line-height

6：聖杯布局

左右大小固定，絕對定位（中間元素 左右邊界**（margin）

7：外邊距塌陷

解決辦法

資料：pink老師自學

上篇精彩準備工作 tips區域搜尋框關於新增小圖示偽元素通過偽元素來設定它的邊線 search box search span after 搜尋框焦點圖布局 css3背景漸變效果 background image linear gradient 0deg,f1503b,c82519 50 ...

立即開啟登入京東超市京東超市京東超市京東超市京東超市京東超市京東超市京東超市京東超市京東超市 body img 頭部 height 45px float left color fff line height 45px text align center width 8 widt...

b size large 讓乙個div水平垂直居中 size b 一流式布局兩個要點 1，在link中加入media 2，把精確的畫素改為百分比，並使用box sizing border box。盒模型以border為準。解決流式布局中兩個水平盒子各分50 的寬度二在頁面布局中小的點在上面...

CSS流式布局 仿京東