定位概述
默認(rèn)的文檔流的布局的方式?jīng)Q定了元素的位置就是靜態(tài)的定位方式哲思。默認(rèn)值：Static。
可以通過position CSS屬性來改變元素的定位的方式喳钟。
1相對定位：relative
相對于原來的位置進(jìn)行偏移劲蜻。
2絕對定位：absolute
根據(jù)父容器（必須是非static的定位的容器）進(jìn)行位置定位配猫。
一般原則：子絕父相
3固定定位：fixed
固定在瀏覽器的某個(gè)位置毛俏，瀏覽器scroll時(shí)不會發(fā)生變化炭庙。
?
Zindex
Zindex可以改變元素層疊的位置。
Zindex越大煌寇，越靠近用戶焕蹄。
頁面zindex規(guī)劃案例：
一般的zindex都會在100區(qū)間內(nèi)。
如果是頁面比較頂部的用200區(qū)間的
如果是廣告阀溶，那么需要最頂部擦盾，則是300區(qū)間
三列自適應(yīng)布局
前端學(xué)院公開課的網(wǎng)站： http://open.itcast.cn/front/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26三列自適應(yīng)布局</title>
<style>
* { padding: 0; margin: 0; }
.sub-nav, .aside {
width: 200px;
background-color: teal;
height: 300px;
}
.main {
margin-left: 203px;
margin-right: 203px;
height: 300px;
background-color: yellowgreen;
}
?
.sub-nav {
float: left;
}
.aside {
float: right;
}
</style>
</head>
<body>
<div class="sub-nav">sub-nav</div>
?
<div class="aside">aside</div>
?
<div class="main">main</div>
?
</body>
</html>
?
CSS設(shè)置背景
概述
background-attachment 設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。
background-color ??設(shè)置元素的背景顏色淌哟。
background-image 設(shè)置元素的背景圖像。
background-position 設(shè)置背景圖像的開始位置辽故。
background-repeat 設(shè)置是否及如何重復(fù)背景圖像徒仓。
background 合寫：在一個(gè)聲明中設(shè)置所有的背景屬性。
?
background-image設(shè)置盒子的背景圖片
background-image: url(bgimage.gif);
注意url指向一個(gè)相對路徑誊垢，url后面緊跟的是一對括號，括號內(nèi)的是路徑，路徑可以用引號堪置，也可以省略饮寞，建議省略。
背景圖片會蓋住背景顏色芋肠。
也就是說：背景圖片的優(yōu)先級要高于背景色
background-attachment
background-attachment屬性設(shè)置背景圖像是
scroll： 默認(rèn)值乎芳。背景圖像會隨著頁面其余部分的滾動(dòng)而移動(dòng)。否固定或者隨著頁面的其余部分滾動(dòng)。
fixed：固定顯示奈惑，相對于body固定吭净。一般只用于body的背景設(shè)置。
background-position
設(shè)置背景圖像的起始位置肴甸。
background-repeat
background-repeat 屬性定義了圖像的平鋪模式寂殉。
屬性值：no-repeat ?repeat-x ?repeat-y ??repeat
?
background合寫
background合寫的順序： 背景顏色、背景圖地址原在、平鋪設(shè)置友扰、背景圖滾動(dòng)、背景圖位置庶柿。
建議：背景都以合寫的形式存在村怪，CSS的字節(jié)更少。
?
CSS高級內(nèi)容補(bǔ)充
規(guī)避脫標(biāo)
盡量避免使用float和定位脫離標(biāo)準(zhǔn)文檔流澳泵。
寫css的最好優(yōu)先： 標(biāo)準(zhǔn)流→flat→定位实愚。
HTML標(biāo)簽的嵌套規(guī)則
n行內(nèi)禁止嵌套 塊級標(biāo)簽
ndt、h1-h6兔辅、p等標(biāo)簽禁止嵌套其他塊級標(biāo)簽腊敲，只能嵌套文字類型的行內(nèi)標(biāo)簽。
n超級鏈接標(biāo)簽可以嵌套圖片等標(biāo)簽维苔，但是不可以嵌套input標(biāo)簽
CSS擠兌盒子
2CSS可以通過padding和margin等屬性吧盒子擠開碰辅，另外配合父盒子的overflow的屬性對子盒子進(jìn)行切割操作。
2Text-indent也可以擠兌文字
CSS精靈技術(shù)
網(wǎng)頁中的小圖片特別多的時(shí)候介时，瀏覽器會跟后天交互很多次没宾，太浪費(fèi)帶寬和請求的連接。如果把多個(gè)小圖合并成一張圖進(jìn)行交互沸柔，能大量減少瀏覽器跟后臺服務(wù)器的交互次數(shù)循衰，也能極大提高瀏覽器的效率。
CSS精靈圖可以把多張小圖合并到一張大圖上褐澎，然后使用背景定位技術(shù)實(shí)現(xiàn)讓盒子背景顯示大背景圖的一小部分会钝，這就是精靈圖的原理。
消除inline-block中的空隙
??行內(nèi)塊之間會有縫隙工三，去掉的方法
??1. 去除空格迁酸，把代碼放在一行上。 ?????
??2. 使用margin負(fù)值俭正。
??3.給父級添加font-size:0奸鬓；
??4.使用letter-spacing或者 ?word-spacing
???5、使用float的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>消除行內(nèi)塊的空隙</title>
<style>
* { margin: 0; padding: 0; }
div span {
display: inline-block;
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #000;
font-size: 14px;
}
?
/*消除inline塊之間的空隙*/
/*第一種方法： font-size=0方法*/
/*div {
font-size: 0;
}*/
?
/*第二種方法： 使用html注釋消除空格方法 或者將行內(nèi)塊元素放到一行顯示*/
?
/*第三種辦法：可以使用float*/
?
/*第四種方法： 可以使用letter-space 和 word-space調(diào)整*/
div {
letter-spacing: -2px;
}
?
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span><!--
--><span>3</span>
<span>4</span>
</div>
</body>
</html>
