和大家分享乙個學習盒子模型的小妙招,快來康康吧!

2021-10-22 06:14:56 字數 1238 閱讀 1335

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 恭喜你,如果...