CSS 盒子模型

author : 朱盟 |吃火星的寶寶

time: 2019/5/30 學習的第4天

git hub ： embaobao

email:[email protected]

csdn：

：

內邊距外邊距

內填充和外邊距是根據元素來說的

盒子的大小會隨著邊框、內邊距、增加增加，但是寬高的儲存內容大小沒變

padding 加在父元素上來控制子元素

margin 加在子元素控制本身外邊距

margin 不會擁有盒子的背景

*margin值的解析：左右邊界累加，正常文件流的上下邊界重合。

*在正常文件流下，子元素（塊）直接寫margin-top時，會將margin-top屬性值加上父元素身上,(子元素或父元素不設定任何浮動及定位的屬性，或父元素不設定邊框的情況下。)

所以當父元素沒有邊框時，且子元素父元素沒有定位，沒有浮動 ，子元素給自己加magrgin-top 他會讓父元素擁有給子元素的margin-top而子元素加不上 ,那怎麼辦了？怎麼能不浮動，且我想載入子元素的本身的外邊距？

overflow:hidden; 可以解決

css 選擇器 交集選擇器 選擇器選擇器

ex: ul.clss1

交集選擇器的權重也是相加

當權重相同時後者會覆蓋前面的哦

寬度 width + border2+ padding(left + right )

高度 height + border2+ padding(top + bottom )

怪異盒模型/ie盒子模型組成：margin+內容區

一般存jpg

png 大 但是需要透明時，只有png、gif 的可以

單一顏色的 最好存 png 8位，區別不大;

顏色豐富，或者較大的最好是24位或以上。否自會有鋸齒。

gif:支援動畫 。

ie 會給放在a標籤的裡加藍色邊框，所以預設去掉邊框。

imgtip : h3自帶font-size :1.17em; h3、h4 有預設行高。 可以body

也會有底部間距 盒子會被預設撐開一些有間隙，可設定盒子的寬高來刪除間隙。

*/*清除預設間距*/  

body /*清除有預設行高*/ 
a/*清除a標籤下劃線*/ 
li/*清除列表圖示*/ 
img/*清除ie a 標籤下有預設邊框*/

樣式先確定基本的字等基礎的樣式

border-style:dotted solid double dashed;

上邊框是點狀

右邊框是實線

下邊框是雙線

左邊框是虛線

a 是內聯元素 在解析margin 是會有問題

上下邊距 內填充都不支援。span 也是的。

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...

css盒子模型 說說css盒子模型

引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...

css 盒子模型 ie盒子模型

css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...