lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
web前端基礎知識title
>
rel=
"stylesheet"
href
="css/page2.css"
>
head
>
>
>
>
css盒子模型
h1>
>
>
>
網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， css盒子模式都具備這些屬性。p
>
>
這些屬性我們可以用日常生活中的常見事物——盒子作乙個比喻來理解，所以叫它盒子模式。p
>
>
css盒子模型就是在網頁設計中經常用到的css技術所使用的一種思維模型。p
>
header
>
>
>
原理h2
>
>
先說說我們在網頁：內容(content)、填充(padding)、邊框(border)、邊界(margin)， css盒子模式都具備這些屬性。 p
>
>
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。
p>
section
>
>
>
特點h2
>
>
想象乙個盒子，它有：外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）四個屬性；
p>
>
讓我們俯視這個盒子，它有上下左右四條邊，所以每個屬性除了內容（content），都包括四個部分：上下左右；這四部分可同時設定，也可分別設定；內邊距可以理解為盒子裡裝的東西和邊框的距離，而邊框有厚薄和顏色之分，內容就是盒子中間裝的東西，外邊距就是邊框外面自動留出的一段空白。
p>
section
>
>
>
結構h2
>
>
內容（content）就是盒子裡裝的東西；
p>
>
而填充(padding)就是怕盒子裡裝的東西（貴重的）損壞而新增的泡沫或者其它抗震的輔料；
p>
>
邊框(border)就是盒子本身了；至於邊界(margin)則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出。在網頁設計上，內容常指文字、等元素，但是也可以是小盒子（div巢狀），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而css盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。 填充只有寬度屬性，每個html標記都可看作乙個盒子；
p>
section
>
>
>
>
href
="#"
>
>
p>
>
>
div>
footer
>
article
>
div>
body
>
html
>
body
divh1
article>headerh2p
footer
footer>div
a:link,a:visited
a:hover
盒模型基礎布局練習
lang en charset utf 8 name viewport content width device width,initial scale 1.0 第三個介面title rel stylesheet href css page3.css head header class articl...
盒模型基礎
盒模型屬性 盒模型有五個屬性分別為 1 width 內容寬度 2 height 內容高度 3 border 邊框 4 padding 內邊距 即邊框到內容之間的距離 5 margin 外邊距 即乙個盒子到另乙個盒子之間的距離 一 width與height 指盒子的寬和高 盒子的體積或者容積，顯示內容...
盒模型基礎內容
盒模型包含有效內容區域，邊框以及外邊距部分 盒模型的寬度 width padding left padding right border right border left marign left marign right 盒模型高度 height padding top padidng botto...