浮動屬性：
float：定義網頁中其他文字如何環繞該元素。
有三個屬性值：
left：元素活動浮動在文字左面；
right：元素浮動在右面；
none:預設值，不浮動。
浮動的三大顯著特徵：
1.div塊元素失去「塊狀」換行顯示特徵，變為行內元素。
2.緊貼上乙個浮動元素（同方向）或父級元素的邊框，如寬度不夠將換行顯示。
3.佔據行內元素的空間，導致行內元素圍繞顯示。
浮動元素的寬度由子元素的寬度決定。
clear：清除浮動
如果前乙個元素存在左浮動或右浮動，則換行以區隔
只對塊級元素有效
屬性值none：允許兩邊都可以有浮動物件
both：清除兩邊浮動
left：清除左邊浮動
right:清除右邊浮動
如果父元素出現高度塌陷，給高度塌陷的元素新增overflow
：hidden
盒模型組成部分：
css盒子模式都具備這些屬性：內容（
content
）、填充（
padding
）、邊框（
border
）、邊界（
margin）.
1.border的使用方法
border:邊框寬度 邊框風格 邊框顏色;
例如：border:5px solid #f00
border-style的值：
solid實線，
dotted
點線，dashed
虛線，double
雙線，groove
槽邊，ridge
嶺邊，inset
凹邊，ouset
凸邊，none
無邊框，預設值，
hidden
無邊框。
2.padding的使用方法
padding區域在
border
與content
之間；背景色和背景影象會覆蓋
padding
和content
組成的區域；
屬性值的4
種方式：
四個值：上 右下
左 三個值：上
左右下
二個值：上下
左右
乙個值：四個方向 padding:2px;/*
定義元素四周填充為
2px*/
padding不可以為負值
padding-left
padding-left:10px;
左內邊距為10px
padding-right
padding-right:5px;
右內邊距為5px
padding-top
padding-top:20px;
上內邊距為20px
padding-bottom
padding-bottom:8px;
下內邊距為8px
3.margin的使用方法
外邊距(margin)
在border
之外，margin
區域不應用背景;
css中
margin
預設值為0
邊界：margin
，在元素外邊的空白區域，被稱為邊距。
margin:2px 4px 6px;/*定義元素上邊界為
2px，左右邊界
4px下邊界為
6px，*/
margin:0 auto;/*在瀏覽器中橫向居中。
說明：可單獨設定一方向邊界，如：margin-top:10px;
在非浮動的情況下，margin
兩者相遇取最大值，比如乙個
5px和乙個
10px,
顯示效果為
10px。
在非浮動的情況下，當我們的父元素既沒有padding
值也沒有
border
值，子元素的
margin-top
會和父元素合二為一，導致父元素產生
margin-top
的效果。
在浮動的情況下，margin
值相遇取相加值。
CSS盒模型與浮動
box sizing屬性用於改變元素width和height值的具體意義 段落p 標題h1或div等元素是塊級元素，它們生成塊級框，各個框體是縱向堆疊的 即 換行 任何元素可以由display block宣告為塊級元素。注 通過css的display屬性，是可以改變html文件中元素預設的布局方式的...
css 標準流 盒模型 浮動
一 盒模型 1.1 盒子的區域 乙個盒子的主要屬性5個 width height padding border margin padding 內邊距 border 邊框 margin 外邊框 1.2 認識width height 乙個盒子的真實占有的寬度 左border 左padding width...
學習CSS盒模型和CSS3彈性盒模型
css盒模型本質是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。div300px 寬 50px 左 右填充 50px 左 右邊框 50px 左 右邊距 450px 最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度...