2.1標準流(文件流)
塊級元素獨佔一行顯示,標準流的顯示方式
讓兩個盒子在一行顯示
html>
>
>
乙個靠左邊,乙個靠右邊
2.2浮動
float: left/right
設定了浮動的元素,不在原來的位置(脫標)
設定可以浮動可以讓塊級元素在一行上顯示
浮動可以將行內元素轉化為行內塊元素
模式轉化的過程中,能用display就用display
浮動用來解決文字的環繞問題
浮動的第二個作用: 製作導航欄
實現導航欄一:
實現導航欄二:
**:
html>
>
>
網頁布局
案例一: 實現以下效果:
案例二:實現以下效果:
實現思路:
實現**:
html>
>
>
2.3清除浮動
清除浮動不是刪除浮動
清除浮動指的是清除浮動的影響
注意:
當子元素設定了浮動,父元素沒有高度的時候,造成頁面混亂
這種情況下進行清除浮動
/*清除浮動一*/
/*清除浮動方式二*/
/*清除浮動方式三:*/
2.4清除浮動的幾種方式
使用: clear: left/right/both
在要清除浮動的元素後面新增乙個標籤
給父盒子設定overflow:hidden
如果父盒子中有定位的元素,一般不推薦使用該種方式清除浮動
使用偽元素清除浮動
2.5 overflow的使用
hidden: 將超出的部分進行隱藏
如果內容超出盒子,那麼給盒子設定滾動條
如果內容沒有超出盒子,那麼不顯示滾動條
scorll
3.定位
方位名稱:
left right top bottom
3.1靜態定位(static)
用法:
position:static
靜態定位就是元素標準流的顯示方式
3.2 絕對定位(absolute)看臉型
用法:
position: absolute
特點:1. 當給乙個單獨的元素設定絕對定位,以瀏覽器左上角(body)為
基準設定定位的
2. 當盒子發生巢狀關係的時候,如果父盒子沒有設定定位,子盒子設定
定位以瀏覽器的左上角為基準設定定位
3. 當盒子發生巢狀關係的時候,如果父盒子設定定位,子盒子設定定位的
時候,會以父盒子左上角為基準,設定定位
4. 給盒子設定了絕對定位,該盒子不佔位置(脫標)
5. 給行內元素設定絕對定位後,該元素轉化為了行內塊元素
注意: 元素設定了絕對定位後,通過具體的方位名稱可以隨便設定元素的
位置
3.3 相對定位(relative)(自戀型)
元素設定了相對定位後佔原來的位置
設定相對定位,以自己的位置為參照設定位置
相對定位不能進行元素的模式轉換
子絕父相(子元素設定絕對定位,父元素設定相對定位)
3.4固定定位 (fixed)
固定定位不佔位置
將行內元素轉化為行內快元素
李洪強和你一起學習前端之 11 梅蘭商貿案例
李洪強和你一起學習前端之 11 梅蘭商貿案例 今天的內容是梅蘭商貿案例的講解,這也是css的最後一天 今天要實現的效果是 大家看到了,今天這個案例的內容非常的多,我們只能一點點的分析.一點點的完成,因為如果內容結構瑣碎,我們會感覺到很亂 要不斷想著剛才的結構,一不留神就會重新理清之前的思路,這樣特別...
想和你一起放風箏
想和你一起放風箏 雖然感情已沒有了支撐 還是可以迎著風 show出我遲來的情感 昨天天氣真好，寒流帶來清新的空氣 水還有陽光。想起前年一起放風箏的情景，要是這會兒發生的事情都是在做夢就好了，我願意立刻醒過來。好多天沒有寫東西了，漸漸的，覺得min和我還是會在一起的。有朋友說，他和女朋友分手4年後又走...
開源一起學習
要想自己學習機器學習，3本 聖經 是一定要看的 花書，西瓜書，和統計學習方法 但不是剛入門就要看的，首先啊，我們必須學好學校教的c語言,對程式設計有乙個初步的了解，其次，我們都知道python的厲害，可以幹很多事，也很出名，這就出現了人人都知道py，但不是人人都懂py的現象。確實要想搞機器學習，你最...