盒子壁 ： border
內邊距： padding
內容區：content
外邊距：margin
改變盒子渲染規則： boxsize：border-box；ie盒模型
w3c盒模型
盒子可視區域區別於盒模型
可視區域 = border + padding + content 切記 不計算margin
/* 乙個div作為另乙個的content區。外層div加padding就可以了 */
.content1
.content
.box
width: 50px;
height: 50px;
background-color: #0f0;
padding: 10px;
}
1、絕對定位 absolute 此時成為可定位元素、脫離原來的位置定位觸發層模型，他原來的位置別人可以過去，每乙個absolute都是乙個層
相對於最近的有定位的父級定位，如果所有父級定位都沒有，相對於文件定位
top、left 確定位置
2、相對定位 relative 成為可定位元素 同樣觸發層模型 但是保留原來位置進行定位
relative相對於自己的出生地點定位
使用定位的處理方式
3、fixed 固定定位
總結：relative做參照物、利用absolute來定位。
定位居中的方式
div*
/* 在body沒有指明高度時relative無法進行垂直定位百分比 */
position: absolute;
border: 5px solid #000;
width: 250px;
height: 180px;
left: 50%;
top: 50%;
margin-top:-90px ;
margin-left: -125px;
}.circle1,
.circle2,
.circle3,
.circle4,
.circle5
.circle2
.circle3
.circle4
.circle5
css盒狀模型定位
css盒狀模型用於描述乙個為html元素形成的矩形盒，盒狀模型為各個元素調整外邊距 邊框 內邊距和內容的具體操作。css盒狀模型 body model model1 model2 model3 width設定盒狀模型的內容的寬度，height設定盒狀模型中內容的高度。如上述body盒狀模型內容的寬度...
CSS盒模型與布局
1.1兩種基本的盒模型 block型別 這種盒模型的元素不會佔據一行，允許通過 css設定寬度 高度。例如 元素。inline元素 這種盒模型的元素不會佔據一行 預設允許在一行放置許多元素 即使通過 css設定高度和寬度也不會起作用。例如,css為display屬性提供了block和inline兩個...
CSS盒模型與浮動
box sizing屬性用於改變元素width和height值的具體意義 段落p 標題h1或div等元素是塊級元素，它們生成塊級框，各個框體是縱向堆疊的 即 換行 任何元素可以由display block宣告為塊級元素。注 通過css的display屬性，是可以改變html文件中元素預設的布局方式的...