CSS的盒子及相關(guān)
盒子基礎(chǔ)
- postion，float，display——版式
? 邊框（border）。可以設(shè)置邊框的寬窄、樣式和顏色。
? 內(nèi)邊距（padding）?？梢栽O(shè)置盒子內(nèi)容區(qū)與邊框的間距。
? 外邊距（margin）?？梢栽O(shè)置盒子與相鄰元素的間距。 - 簡(jiǎn)寫——上右下左，缺省取對(duì)邊值
- 較寬的外邊距決定了元素間的距離
- 沒(méi)有設(shè)置width，其width為父元素width
- 盒子的width是其內(nèi)容區(qū)的寬度，增加邊距使整個(gè)盒子變得更大
浮動(dòng)和清除
- 為父元素添加overflow：hidden屬性強(qiáng)制包圍浮動(dòng)元素，該屬性真正左右是防止包含元素被內(nèi)容撐大
- 在父元素中添加非浮動(dòng)元素，或者通過(guò)clearfix添加，例子如下，content必須要有
<section class="clearfix">
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
- 對(duì)于子元素通過(guò)上面的clearfix處理也可以，在上例中就是給p加標(biāo)記
定位
- position：static，relative，absolute，fixed
- fixed與absolute的區(qū)別在于fixed時(shí)不隨屏幕滾動(dòng)而改變，換句話說(shuō)，它是對(duì)當(dāng)前屏幕定位，而absolute是對(duì)于整個(gè)頁(yè)面定位
- 只有當(dāng)position不為static時(shí)，top，bottom，left，right屬性才發(fā)揮作用
顯示屬性
塊級(jí)元素（段落，標(biāo)題等）堆疊顯示，行內(nèi)元素（a，img，span）則并排顯示，直到這一行沒(méi)有空間才顯示到下一行，通過(guò)改display為inline，block可以調(diào)整。將其設(shè)為none則其空間可以被復(fù)用。
背景
1.jpg
? background-color
? background-image
? background-repeat
? background-position
? background-size
? background-attachment
? background（簡(jiǎn)寫屬性）
- 比元素小的背景圖片會(huì)在水平和垂直方向上重復(fù)出現(xiàn)，直至填滿整個(gè)背景空間，使用background-repeat可以調(diào)整，有repeat，repeat-x，repeat-y，no-repeat，round（調(diào)整圖片大?。?，space（空白填充）
- background-position 屬性同時(shí)設(shè)定元素和圖片的原點(diǎn)，默認(rèn)top，left，可用百分比設(shè)置，默認(rèn)順序?yàn)樗?，垂直?/li>
- back-ground-size：
? 50%：縮放圖片，使其填充背景區(qū)的一半。
? 100px 50px：把圖片調(diào)整到 100 像素寬，50 像素高。
? cover：拉大圖片，使其完全填滿背景區(qū)；保持寬高比。
? contain：縮放圖片，使其恰好適合背景區(qū)；保持寬高比。 - 簡(jiǎn)寫
body {
background-image:url(images/watermark.png);
background-position:center;
background-color:#fff;
background-repeat:no-repeat;
background-size:contain;
background-attachment:fixed;
}
簡(jiǎn)寫后
body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
- 可以添加多張背景圖片，用，隔開(kāi)，最先添加的在上層
