盒模型浮動佈局

1、css盒模型

1.經常使用標籤的使用

　　前往本頁面中個某個位置：Top =>錨點

　　1.設置錨點

　　2.設置前往錨點的a跳轉

　　    設置前往錨點的a跳轉：#錨點名

　　　　<div id="t_123">123</div>

　　　　<a href="#page_top"Top</a>

　　　　<a href="#t_123">123</a>

　　　　<a href="00_複習預習.html#md">前往錨點</a>

2.邊界圓角

　　邊界圓角用百分比控制，border-radius: 50%;

3.背景樣式

　　background-image: url('圖片地址‘） #導入圖片做爲背景

　　background-size: 200px 200px;   #規定背景圖片顯示尺寸

　　background-repeat:no-repeat;#平鋪圖片大小不夠，複製後填充

　　background-position: 10px  40px;#控制圖片移動

　　

　　background: url('img/123.png') red no-repeat 50px 50px;

4.精靈圖

　　精靈圖： 各類小圖拼接起來的一張大圖。

　　爲何使用精靈圖：減小請求次數，下降性能的消耗，二次加載圖片資源時極爲迅速（不須要發送請求）

　　.box{

　　　　background-image: url('img/bd.png');

　　　　background-position:0 -150px;

　　}

　　.box:hover {

　　　　cursor: pointer;

　　　　background-position:0 -250px;

　　}

5.盒佈局細節

　　margin坑：

　　上兄弟margin-bottom與下兄弟margin-top重合，取大值。

　　解決方案：

　　只設置一個，建議設置下兄弟margin-top

　　margin佈局： 下盒子的垂直起始位置決定於同結構中上盒子的margin結果位置；水平起始位置就是父級content最左側。

2、display

 

inline

1.同行顯示，詳單與純文本，當一行顯示不下，若是就是一個字顯示不下，那麼顯示不下的哪個字就會自動換行，和純文本的區別就是有標籤總體的概念，標籤與標籤間有一個空格的隔斷。

2.支持部分css樣式，不支持寬高|行高（行高會映射到父級block標籤）| margin上下

3.centent由文本內容撐開

4.inline標籤只嵌套inline標籤

inline-block

1.同行顯示，當一行顯示不下，標籤做爲一個總體換行顯示。

2.支持全部css樣式

3.content默認由文本（圖片）內容撐開，也能夠自定義寬高，當自定義寬高後，必定採用自定義寬高（顯示區域不足，內容會在標籤內容換行顯示，可能超出顯示區域）

4.inline-block標籤不建議嵌套標籤。

block

1.異行顯示，無論自身區域多大，都會獨佔一行。

2.支持全部css樣式。

3.width默認繼承父級，height由內容（文本，圖片，子標籤）撐開，當設置自定義寬高後，必定採用自定義寬高。

4.block能夠嵌套任意標籤。

3、overflow知識

本質

　　overflow:處理內容超出盒子顯示區域

　　overflow:auto | scroll | hidden

　　auto:自適應，內容超出，滾動顯示超出部分，不超出則正常顯示。

　　scroll:一直擦愛用滾動方式顯示

4、浮動佈局

　　float:浮動佈局，改變BFC的參照方位

　　爲何要使用：使用它，塊級盒子機會同行顯示

　　float: left | right；  左 | 右 浮動

　　left:BFC參照方向從左向右

　　right:BFC參照方向從右向左

　　浮動的區域有父級的width決定

5、清浮動

　　浮動問題：子級浮動了，再也不撐開父級的高度，那麼父級若是擁有兄弟  標籤，可能就

會出現佈局重疊的問題

　　清浮動：解決上面的問題，經過使父級獲取一個合適的高度，這樣子級就不會和父級的

兄弟佈局發生重疊 

　　clear:left | right | both

　　1.設置父級的死高度

　　2.經過兄弟設置 clear:both

　　3.設置父級overflow屬性

　　.sup{

　　　　overflow:hidden;

　　}

　　4.經過父級：after僞類

　　.sup:after{

　　　　content:"";

　　　　display:block;

　　　　cler:both;

　　}