❶ 盒模型」這個概念的理解,和它都涉及到哪些css屬性
border為盒子的邊框,margin為盒子與外界的距離,padding為盒子里的東西與盒子邊框的距離,width,height為盒子里的東西的長和寬.
border有border-top,border-bottom,border-left,border-right,分別設置上下左右的邊框樣式,比如border-left:2px solid red;是把左邊框的粗細設置為2像素,風格為實線,顏色為紅色。前面的例子為簡寫形式,其實際上是些為border-left-width:2px; border-left-style:solid; border-left-color:red;
border-radius有border-top-left,border-top-right,border-bottom-left,border-bottom-right,是設置盒子的四個角的半徑,可以接受的單位有像素和百分比,可以將盒子的邊框弄成一個圓角矩形甚至圓形。
margin有margin-top,margin-bottom,margin-left,margin-right,設置了盒子與其他元素之間的距離,比如margin-left:3px;就把盒子與左邊元素的距離設置成了2像素,另外設置好body的寬度後,用margin-left:auto;margin-right:auto;就把盒子居中了。
padding有padding-left,padding-bottom,padding-right;padding-top;可以設置盒子里的東西與盒子邊框的距離。
ps:margin與padding不接受顏色設置。
整個盒子的寬度為width+padding-left+padding-right+border-left-width+border-right-width;
整個盒子的高度為height+padding-top+padding-bottom+border-top-width+border-bottom-width;
❷ CSS盒子模型的介紹
網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也就是能裝東西的一種箱子,也具有這些屬性,所以叫它盒子模式。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
❸ 什麼是盒子模型
在網頁中,一個元素佔有空間的大小由幾個部分構成,其中包括元素的內容(content),元素的內邊距(padding),元素的邊框(border),元素的外邊距(margin)四個部分。這四個部分佔有的空間中,有的部分可以顯示相應的內容,而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
❹ 什麼是盒子模型啊能舉個實際的例子嗎
什麼是CSS的盒子模式呢?為什麼叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin).在黑馬程序員學習時候就會有老師教過,
CSS盒子模式這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那麼內容就是盒子里裝的東西;而內邊距(padding)就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框(border)就是盒子紙板的厚度;至於外邊距(margin)則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。內容(content)就是盒子里裝的東西. 在網頁設計上,內容(content)常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現實生活中盒子不同的是,現實生活中的東西一般不能大於盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,裡面的東西大過盒子本身最多把它撐大,但它不會損壞的。
❺ 什麼是css的盒子模型
CSS盒子模型就是在CSS技術所使用的一種思維模型。CSS假定所有的HTML文檔元素都生成一個描述該元素在HTML文檔布局中所佔空間的矩形元素框,可以形象地將其看作是一個盒子。通過定義一系列與盒子相關的屬性,可極大地豐富和促進各個盒子乃至整個HTML文檔的表現效果和布局結構。
CSS盒子模型由內容區、填充、邊框和空白邊四部分組成。內容區是盒子模型的中心,呈現盒子的主要信息內容;填充是內容區和邊框之間的空間;邊框是環繞內容區和填充的邊界;空白邊位於盒子的最外圍,是添加在邊框外周圍的空間。
(5)前端盒子模型一般用在什麼地方擴展閱讀:
CSS盒子模型特點:
1、豐富的樣式定義:CSS提供了豐富的文檔樣式外觀,以及設置文本和背景屬性的能力;允許為任何元素創建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
2、易於使用和修改:CSS可以將樣式定義在HTML元素的style屬性中,也可以將其定義在HTML文檔的header部分,也可以將樣式聲明在一個專門的CSS文件中,以供HTML頁面引用。總之,CSS樣式表可以將所有的樣式聲明統一存放,進行統一管理。
3、多頁面應用:CSS樣式表可以單獨存放在一個CSS文件中,這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬於任何頁面文件,在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。
❻ web前端問題,關於盒子模型,謝謝
這個是一個標准 可以不加的
下面的dtd文件是一個用來描述文檔格式的文件
也就是說 如果你加了那一句
瀏覽器就會根據dtd裡面規定的格式進行解析
dtd規定了你html的格式
❼ box模型只能用在div里嗎
我覺得應該是頁面上存在的任何一個元素,包括Div在內,我們都可以把它看成一個存在於盒子模型。也就是說盒子模型不是只針對Div。這個盒子模型是相對而言的。
❽ 小白必知什麼是css和盒模型
看網路就行了
css 就是 網頁前端修飾語言, 也叫 層疊樣式表!
顧名思義 就是一層套一層的 的來布局 網頁 呈現給用戶看的!
盒子模型 div+css配合, 不用特別 在意盒子模型 這個詞,
你可以把盒子模型理解成 你每創建個div 用css 定義div的 寬高後 它就是個盒子!
之後你可以給這個盒子 設置背景 邊框 顏色 內邊距 外邊距 圓角 定位 等等
❾ CSS盒子模型有什麼用處,怎麼用
如果你對CSS有相關知識的話,以下的東西你可以看懂的:CSS盒子 http://ke..com/view/2758739.htm?fr=ala0_1