盒子模型的一些問題

2021-10-07 19:11:04 字數 401 閱讀 7154

1.margin疊加問題:

當給兩個盒子同時新增上下外邊距時,就會出現疊加問題,而且這個問題只會出現在上下疊加,不會出現在左右疊加,系統會取上下外邊距中較大的值作為兩個盒子之間的間距。
解決方案:

bfc規範;

在上下外邊距中只設定一方的邊距。

2.margin傳遞問題

margin傳遞問題出現在巢狀模型中,當乙個盒子內部巢狀另乙個盒子,給內部盒子新增margin-top時,外部盒子也會出現margin-top。
解決方案:

1.bfc規範;

2.給父容器加乙個邊框;

3.給父容器增加乙個padding-top;

4.給父容器設定overflow:hidden 。

盒子模型 一

任何乙個元素都可以看作是乙個盒子,在css中,box model這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。請看圖 盒子共包括以下幾個部分 內容區是指元素內容所佔的實際大小,是width和height所圍成的區域 內容區...

css盒子模型 CSS 盒子模型詳解(一)

在網頁布局中,一定離不開盒子模型這個東西。今天就來說一下這個概念。所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。或者說,每乙個可見的 html 元素都是乙個盒子。每個矩形都由元素的內容 content 內邊距 padding 邊框 b...

標準盒子模型和IE盒子模型的區別

盒子模型是css中很重要的乙個概念,裡面包含了內容 content 內邊距 padding 邊框 border 外邊距 margin 標準盒子模型 box sizing content box 盒子的內容不包括padding和border,那麼盒子的width content。比如你給乙個盒子100...