div 盒子的元素組成和寫法:
margin 外邊距
padding 內邊距
border 邊框
內容
元素的總寬度 = width + padding-left+padding-right + margin-left + margin-right + border-left + border-right
作用: 重新制定元素盒子的計算模式
樣式: box-sizing
1、 普通流(文件流)
塊級元素獨佔一行 行內元素不獨佔一行
問題:如何讓多個塊級元素擺成一排呢?
浮動布局:float : left(左浮動) right(右浮動)
1. 浮動的概念
元素浮動起來之後會脫離文件流,不再占有之前的空間,其他未浮動浮動的元素會上前補位。
浮動元素會停靠在父元素的左邊或者右邊,或者停靠在已經浮動元素的邊緣上
浮動元素只會在當前行浮動
浮動元素依然位於父元素之內
2、浮動引發的特點
父元素的寬度不夠時,最後乙個元素會自動換行
元素一旦浮動起來之後,會變成塊級元素(可以設定寬高)
margin auto會失效
文字 行內元素和行內塊元素 採用文字環繞的方式進行排列是不會被浮動元素壓在底下
clear 清除浮動
清除浮動:不是去掉浮動效果,而是清除上方元素因為浮動所對自己產生的影響。
left:當前元素不會向前佔位並且左邊不允許有浮動元素
right:當前元素不會向前佔位並且右邊不允許有浮動元素
both:同時清空左右
由於浮動元素脫離文件流 ,所以導致元素不占有父元素的頁面空間所以會帶來影響
如果乙個元素中所有的子元素全部浮動了,父元素的高度為0
如何解決:
1.設定固定的高度
缺點:必須要知道父元素準確高度
2.使用父元素也浮動
缺點:對後續的元素有影響
3.為父元素設定溢位隱藏
缺點:如果子元素需要溢位父元素,那麼也會被隱藏
4.在元素後面新增乙個空子元素 並且給這個元素設定clear:both京東超市
兩個相鄰盒子的邊框怎麼只顯示乙個 盒子模型高階
在css入門我們已經了解了盒子模型,就不重複了。下面主要聊聊盒子模型的一些原理。深入border 對於border屬性,border 0 和 border none 是有區別的。效能區別 border 0 表示把border定義為0px。雖然0px在頁面上看不見,但是瀏覽器依然會對border進行渲...
乙個站長論壇運營經驗 和大家分享
乙個站長論壇運營經驗 和大家分享 其實馬雲說得過冬,不包括我們這些個人站長的,我們過冬是早就開始了,一直沒到春天。以前隨便做做電影聯盟,靠搜尋就來很多人。確實以前比較傻得。收錄很快 也容易被一些站長研究可是,電影聯盟sp通道全部都關閉了。是從06年就開始了的。真的懷念每天帶來n個萬ip的日子。這樣日...
乙個很有趣的fork面試程式,和大家分享下經驗
大家有興趣可以想想,下面輸出了多少個 g include include include int main void wait null wait null return 0 也許你很快就說,那麼簡單,第一次迴圈,fork後2個程序,第二次再fork出4個,一共6個程序,肯定是6個 g 恭喜你,如果...