CSS盒子模型的應用

2021-09-26 02:23:27 字數 1415 閱讀 6863

盒子模型是我們日常常用的布局的方式一般分為content盒模型,標準盒模型

一些基本概念

html的大多數元素都是塊級(block)元素或行內(inline)元素

塊級元素

預設情況下,塊級元素會另起一行,並盡可能的充滿整個容器。

塊級元素可以包含行內元素和其他塊級元素,相比於行內元素可以建立更複雜和大型的結構

塊級元素列表:

address:****資訊,ol:有序列表,p:行,form:表單,pre:預格式化文字,blockqute:塊引用

h1-h6:標題,table:**,dd:列表中條目描述,dl:定義列表,div,hr:水平分割線

行內元素

行內元素不會另起一行只佔據它對應的標籤的邊框所包含內容的空間,

只能包含資料和其他行內元素

行內元素列表

b,big,i,small,tt,

abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var,

a,bdo,br,img,map,object,q,script,span,sub,sup,

button,input,label,select,textarea

塊級元素和行內元素的區別

塊級元素:

1.會另起一行,

2.可以設定width,height,margin,padding,border屬性

3.預設寬度是容器的100%

行內元素:

1.和其他元素在同一行內

2.高度和寬度就是內容的高度和寬度

3.可以設定margin-left和margin-right屬性,無法設定margin-top和margin-bottom屬性

4.border和padding可以設定,但是border-top和padding-top到頁面頂部後就不再增加

正常流正常流指:從左到右,從上到下顯示。要讓乙個元素不在正常流中,唯一的辦法是讓元素浮動或定位

非替換元素

如果元素的內容包含在文件中,則稱之為非替換元素。比如乙個段落的文字都在該元素本身之內,這個段落就是乙個非替換元素。

替換元素

作為其他內容佔位符的乙個元素稱為替換元素,根據標籤和屬性的值來顯示內容的元素。比如img元素,它只是指向乙個影象檔案,這個檔案插入到文件流中。大多數表單元素(input,根據type屬性來顯示內容)也是替換元素。

根元素位於文件樹的頂端,在html文件中就是html元素

盒模型html文件中的每個元素都被描繪成矩形盒子,這些矩形盒子通過乙個模型來描述其占用空間,這個模型稱為盒模型。盒模型通過四個邊界來描述:margin(外邊距),border(邊框),padding(內邊距),content(內容區域),如圖所示:

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盒...