超全的css新手學習筆記
1.CSS三大特性
繼承性、層疊性、優先順序
繼承性：子元素可以繼承父元素的樣式。
什麼樣的屬性才可以繼承：
color，以text-,font-,line-開頭的屬性都是可以繼承的
這些關於文字樣式的，都能繼承；而所有關於盒子、定位、佈局的屬性都不能繼承。
具體應用：在寫頁面之前我們會通過給body設定一個字型，來將頁面上所有的標籤都能夠繼承這個屬性。
特殊性：
- a標籤的顏色不能繼承，如果一定要修改a標籤的顏色直接作用在a標籤上面。
- h標籤的大小不能繼承，如果一定要修改h標籤的大小直接作用在h標籤上面。
層疊性：是瀏覽器處理衝突的一個特性。
- 如果一個屬性通過兩個選擇器設定到同一個元素上面，那麼這個時候一個屬性就會將另一個屬性層疊掉。
- 如果多個不同的屬性通過兩個選擇器設定到一個元素上面，那麼不會發生層疊。
優先順序
！important>行內樣式>id選擇器>類選擇器>標籤選擇器>萬用字元>繼承
變數：!important
雖然important是一個變數，但是不能作用在繼承上。!important屬性無法繼承。
關於important：
正確的：
|
1 font-size:60px !important; |
錯誤的：
|
1 font-size:60px; !important; → 不能把!important寫在外面 2 font-size:60px important; → 不能忘記感嘆號 |
!important需要強調3點：
1） !important提升的是一個屬性，而不是一個選擇器
|
1 p{ 2 color:red !important; → 只寫了這一個!important，所以就字型顏色屬性提升權重 3 font-size: 100px ; → 這條屬性沒有寫!important，所以沒有提升權重 4 } 5 #para1{ 6 color:blue; 7 font-size: 50px; 8 } |
所以，綜合來看，字型顏色是red（聽important的）；字號是50px（聽id的）;
2） !important無法提升繼承的權重，該是0還是0
比如HTML結構：
|
1 <div> 2 <p>哈哈哈哈哈哈哈哈</p> 3 </div> |
有CSS樣式：
|
1 div{ 2 color:red !important; 3 } 4 p{ 5 color:blue; 6 } |
由於div是通過繼承性來影響文字顏色的，所以!important無法提升它的權重，權重依然是0。幹不過p標籤，因為p標籤是實實在在選中了，所以字是藍色的（以p為準）。
3）!important不影響就近原則
如果大家都是繼承來的，按理說應該按照“就近原則”，那麼important能否影響就近原則呢？
答案是：不影響。遠的，永遠是遠的。不能給遠的寫一個important，幹掉近的。
! important做站的時候，不允許使用。因為會讓css寫的很亂。
權重：
- 行內樣式：1000
- id：100
- class：10
- 標籤：1
選擇器的一個工作原理：
選擇器在查詢元素的時候不是從左往右找，而是從右往左找！
例一：
#father p.c2{
color:black;
}/*找到一個p標籤標籤的類名叫c2,判斷這個標籤是否有一個父元素叫father*/
例二：
<style type="text/css">
divdiv{ /*找到一個元素div,判斷它的父元素是否是div*/
color:blue;
}/*從右往左找*/
div{color:red;}
</style>
<div>文字（紅色）
<div>文字（藍色）
<div>試問這行字型是什麼顏色的？（藍色）</div>
</div>
</div>
例三：
<style type="text/css">
span{
color:green;
}
.nav{
color:red;
}
.navul li{
color:blue;
}
</style>
<div class="nav">
<ul>
<li><span>文字</span></li>
<li><span>文字</span></li>
<li><span>文字</span></li>
<li><span>文字</span></li>
</ul>
</div>
例四：同一個標籤攜帶多個類名有衝突
總結：在開始算權重之前，一定要看看是不是真的選中文字所在的最內層標籤，如果不是那麼最內層標籤權重為0！如果大家都為0，就近原則！
2.屬性—文字
Ø text-indent:2em; 設定首行縮排。
Ø text-align: 設定文字的位置
center:設定內容在容器的水平方向上居中。
left:設定內容在視窗的水平方向上靠左
right:設定內容在容器的水平方向上靠右
Ø text-decoration: 設定文字的裝飾
none:沒有任何裝飾
underline:下劃線
Ø margin: 0 auto; 設定容器自身水平居中。
Ø 加粗、傾斜、下劃線
|
1 font-weight:bold; 2 font-style:italic; 3 text-decoration:underline; |
3.屬性—背景
Ø background-color: 設定背景顏色
Ø background-image: 設定背景圖片
background-image:url(圖片的路徑);
預設情況下圖片如果比容器要小，它會平鋪滿盒子。並且padding區域有背景圖
Ø background-repeat: 設定背景是否平鋪：
no-repeat:不平鋪
repeat-x：在水平方向上平鋪
repeat-y:在垂直方向上平鋪
repeat:平鋪
Ø background-position: 設定背景圖片的位置
Ø background-attachment:fixed; 設定背景否固定
fixed：背景會被固定住，即不會被滾動條滾走
Ø background-postion: x y;
注意：x,y可以是具體的數值，也可以是一些英文單詞。
x軸（水平方向）: left 左 center 中 right 右
y軸（垂直方向）: top 上 center 中 bottom下
定位屬性可以是負數：
þ 背景的連寫方式：
background: background-color background-image background-repeatbackground-position;
比如：background:blue url(images/wuyifan.jpg) no-repeat 100px 100px;
4.元素與元素之間的巢狀
1.行內元素
代表標籤：a,span,b,u,i,s,strong,em,ins,del
特點：
² 一行裡面可以顯示多個
² 無法設定寬高
² 大小由內容來決定
缺點：
² 不能設定寬高
² 屬性：display: inline
2.塊級元素
代表標籤：p,h1-h6,div,ul,li,ol,li,dl,dt,dd
特點：
² 獨佔一行
² 可以設定寬高
² 預設寬度一整行
缺點：
² 獨佔一行。
² 屬性： display:block
3.行內塊級元素
代表標籤：img,input
特點：
² 可以設定寬高
² 一行內可顯示多個
² 屬性：display:inline-block
R 元素之間顯示方式切換：修改display屬性！
比如：想設定塊級元素在同一行顯示，可以設定display: inline。
² 行內塊元素與行內塊元素之間有間隙，為了讓他們之間緊挨著，可是給他們都新增浮動：float：left
4.元素之間的巢狀
標籤之間是不能夠隨意巢狀的。
如果一定要巢狀，要滿足下面幾條：
- 行內元素只能包含行內元素
- 塊級元素可以包含所有的行內元素和部分塊級元素。
- p標籤，h標籤都不能包含塊級元素
5.偽類
1.錨偽類：
Ø a:link 給a標籤設定沒有被訪問過的樣式
Ø a:visited 給a標籤設定被訪問過的樣式
Ø a:hover 給a標籤設定滑鼠懸停時的樣式
Ø a:active 給a標籤設定被點選的樣式
程式碼：
a: link {
color: red;
font-size: 30px;
}
注意：
- 在使用的時候一定遵守這樣的順序：a:link,a:visited,a:hover,a:active，否則會失效！
- 記憶方法：愛恨原則：love-hate
- 有些錨偽類除了可以作用在a標籤上還可以作用來其它標籤上：
:link 只能用於a標籤
:visited只能用於a標籤
:hover 其它標籤也可以使用這個偽類
:active 其它標籤也可以使用這個偽類
超連結的美化
a標籤在使用的時候，非常的難。因為不僅僅要控制a這個盒子，也要控制它的偽類。
我們一定要將a標籤寫在前面，:link、:visited、:hover、:active這些偽類寫在後面。
a標籤中，描述盒子；偽類中描述文字的樣式、背景
|
1 .nav ul li a{ 2 display: block;這裡必須設成塊級！ 3 width: 120px; 4 height: 40px; 5 } 6 .nav ul li a:link ,.nav ul li a:visited{ 7 text-decoration: none; 8 background-color: yellowgreen; 9 color:white; 10 } 11 .nav ul li a:hover{ 12 background-color: purple; 13 font-weight: bold; 14 color:yellow; 15 } |
記住，所有的a不繼承text、font這些東西。因為a自己有一個偽類的權重。
最標準的，就是把link、visited、hover都要寫。但是前端開發工程師在大量的實踐中，發現不寫link、visited瀏覽器也挺相容。所以這些“老油條”們，就把a標籤簡化了：
a:link、a:visited都是可以省略的，簡寫在a標籤裡面。也就是說，a標籤涵蓋了link、visited的狀態。
|
1 .nav ul li a{ 2 display: block; 3 width: 120px; 4 height: 50px; 5 text-decoration: none; 6 background-color: purple; 7 color:white; 8 } 9 .nav ul li a:hover{ 10 background-color: orange; 11 } |
6.行高：line-height
定義：兩行文字之間基線的距離就是做行高。
Ø 預設情況下一行文字的行高分為：上間距+文字的高度+下間距，並且上間距是等於下間距的。所以如果行高等於容器的高度那麼元素在父容器中垂直居中！
Ø 行高是可以繼承的。
Ø 行高的單位：
a.具體的畫素值
b.使用em：em指的是當前標籤設定的字型大小。如果當前標籤字型大小為16px，那麼2em=32px，如果當前標籤字型大小為20px，那麼3em=60px;
c.使用%百分號：與em一樣，如果當前字型大小為18px，那麼 line-height:200%=36px;
d.可以什麼單位都不帶：與em一樣，也是當前標籤的字型大小為基數。
注意：
在設定行高的時候，如果單位是em或%，將來行高會先計算出來結果再繼承給子元素。
在設定行高的時候，如果單位是沒有，將來行高會先繼承給子元素再計算出行高。
Ø 瀏覽器的預設字型大小是多小？谷歌預設大小是16px.
font屬性
font連寫：font: font-style font-weight font-size/line-heightfont-family
為了防止使用者電腦裡面，沒有微軟雅黑這個字型。就要用英語的逗號，隔開備選字型，就是說如果使用者電腦裡面，沒有安裝微軟雅黑字型，那麼就是宋體：
|
1 font-family: "微軟雅黑","宋體"; |
備選字型可以有無數個，用逗號隔開。
我們要將英語字型，放在最前面，這樣所有的中文，就不能匹配英語字型，就自動的變為後面的中文字型：
|
1 font-family: "Times New Roman","微軟雅黑","宋體"; |
所有的中文字型，都有英語別名，我們也要知道：
微軟雅黑的英語別名：
|
1 font-family: "Microsoft YaHei"; |
宋體的英語別名：
|
2 font-family: "SimSun"; |
font屬效能夠將font-size、line-height、font-family合三為一：
|
2 font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; |
7.盒子模型
在寫一個html頁面的時候，其實就相當於在這個頁面中疊盒子！
思想：萬物皆盒子。
具體內容：
盒子的擋板---------border
盒子的泡沫---------padding
盒子中的物品--------內容：width、height
盒子與盒子之間的距離---------margin
1.border
１.1 border-color:邊框的顏色
border-top-color
border-right-color
border-bottom-color
border-left-color
１.2 border-width:邊框的寬度
border-top-width
border-right-width
border-bottom-width
border-left-width
１.3 border-style:邊框的樣式
border-top-style
border-right-style
border-bottom-style
border-left-style
取值：solid：實線 dashed：虛線 dotted：點線
１.4 邊框的連寫方法：border:border-width border-style border-color;
１.5 去掉單元格之間的間隙border-collapse: collapse;
2.padding
作用：設定盒子的內容與邊框之間的距離。
取值：
padding: 40px;給上右下左所有的內邊距都設定了40畫素的距離
padding: 40px 80px;給上下內邊距設定了40畫素，下左右邊距設定了80畫素
padding: 40px 60px 80px;給上邊距設定了40畫素，左右設定60畫素，下設定80畫素
padding: 40px 60px 80px 100px;以順時針方向進行設定，依次為上右下左
padding-top padding-right padding-bottom padding-lef
注意：
小屬性層疊大屬性，不要把小屬性寫在大屬性上面，會被大屬性層疊
|
1 padding: 20px; 2 padding-left: 30px; |
這種寫法是錯誤的
|
3 padding-left: 30px; 4 padding: 20px; |
padding（盒子中的填充物）會改變盒子的大小（跟日常生活中有區別），特殊情況下padding不會改變盒子的大小：
當一個大盒子包含一個小盒子，並且大小盒子都是塊級元素，而且小盒子的寬是繼承自大盒子的話，那麼設定小盒子的padding-left和padding-right不會改變小盒子的大小。
小盒子的寬度會繼承自大盒子，但是小盒子的高度不會繼承自大盒子！
<style>
.father{
background:red;
width:500px;
height:300px;
}
.son{
background:blue;
height:150px;
padding-left:10px;
}
</style>
<div class="father">
<divclass="son">追命</div>
</div>
3.margin
作用：設定盒子與盒子之間的距離。
取值：
margin: 10px;給上右下左所有的外邊距都設定了10畫素的距離。
margin: 10px 20px;給上下外邊距設定了10畫素，左右外邊距設定了20畫素
margin: 10 px 20px 40px;上10px，左右20px，下40
margin:10px 20px 40px 80px;上10，右20，下40，左80
maring-top margin-right margin-bottom margin-left
þ 注意：很多標籤預設帶有margin和padding，所以將來進行頁面的佈局的時候一定要清除這些標籤的預設的margin和padding.
例如：
1)body標籤預設帶有margin: 8px的屬性
2)p標籤預設帶有margin: font-size 0;
3)h標籤也預設帶有margin-top和margin-bottom
4)ul預設帶有上下的margin以及左邊的padding
......
清除的方法：
* {
margin: 0;
padding: 0;
}
注：width和height指的是內容的寬和高，background指的是內容的填充padding的顏色！
& margin兩種特殊現象
外邊距的合併現象：
如果兩個div上下排序，給上面一個div設定margin-bottom，給下面一個div設定margin-top，那麼兩個margin會發生合併現象，合併以後的值較大的那個。
<style>
.one {
height: 100px;
background: red;
margin-bottom: 50px;
}
.two {
height: 200px;
background: blue;
margin-top: 100px;
}
</style>
<divclass="one">div1</div>
<divclass="two">div2</div>
margin塌陷現象：
如果一個大盒子中包含一個小盒子，給小盒子設定margin-top，大盒子會一起向下平移。
解決方案：
給大盒子加一個邊框
給大盒子設定一個overflow屬性 overflow:hidden
浮動也可以
<style>
.father {
width: 400px;
height: 300px;
background: red;
}
.son {
margin-top: 10px;
width: 200px;
height: 150px;
background: blue;
}
</style>
<divclass="father">
<div class="son"></div>
</div>
從上一個案例中，可以總結：
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離；最好不要用這個marign表達父子之間的距離。所以，我們要善於使用父親的padding，而不是兒子的margin。
& margin的使用補充
Ø margin: 0 auto; 讓容器水平居中。
Ø margin-right: auto; 如果不設定其它屬性只設置這個屬性，那麼瀏覽器在解析的時候會將一個盒子的所有的預設的margin全部給margin-right
Ø margin設定為負數：
如果margin-left設定為負數，那麼將盒子會向左移動。
如果margin-right設定為負數，那麼盒子會向右移動。
& 關於使用margin：0 auto的注意事項
1）使用margin:0 auto; 的盒子，必須有width，有明確的width
2）只有標準流的盒子，才能使用margin:0 auto; 居中。
也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0auto;
3） margin:0 auto;是在居中盒子，不是居中文字。
文字的居中，要使用：text-align:center;
關於text-align的補充
text-align:left; 沒啥用，因為預設居左
text-align:right; 文字居右
8.浮動
作用：解決一行中顯示多個盒子的問題（並且這些盒子的位置可控。）
浮動的性質：脫標、貼邊、字圍、收縮
浮動的特點：
Ø 浮動的元素會脫離標準流
Ø 浮動以後的元素會覆蓋在標準流的元素之上。
Ø 浮動規則：浮動找浮動，不浮動找不浮動
浮動找浮動：只有寫在同一個結構下面的浮動才會浮動找浮動
Ø 浮動顯示的位置與原本不浮動之前的位置是對應的
Ø 浮動的重點：同一等級，浮動的元素只會影響下面的元素，不會影響上面的元素！
<style>
div {
width: 200px;
height: 200px;
}
.one {
background: red;
}
.two{
height: 150px;
background: blue;
float: left;
}
.three {
background: pink;
}
</style>
<divclass="one"></div>
<div class="two"></div>
<divclass="three"></div>
Ø 浮動的元素會改變顯示方式：不管元素是行內元素還是塊級元素將來在顯示的時候都會在同一行中顯示。顯示方式與行內塊級元素一樣。
Ø 浮動以後的元素可以設定寬高。
Ø 兄弟關係的盒子，只要有一個加浮動，其餘都要加浮動！
案例1：製作導航條
<style>
.nav {
width: 760px;
height:32px;
background: red;
margin: 0 auto;
background: url(img/button1_bg.jpg);
}
li {
list-style: none; //去除無序列表前面的點等樣式
}
a {
float: left;
display: inline-block;
text-decoration: none;//去除a標籤的下劃線等樣式
color: deeppink;
line-height: 32px;
width: 80px;
height: 32px;
background: url(img/button1.jpg);
text-align: center;
font-size: 12px;
}
a:hover {
background: url(img/button2.jpg);
}
</style>
<divclass="nav">
<ul>
<li><a href="#">導航</a></li>
<li><a href="#">返回首頁</a></li>
<li><a href="#">網站介紹</a></li>
<li><a href="#">想起來了</a></li>
</ul>
</div>
案例2：文字環繞圖片
<style>
img {
width: 200px;
height: 200px;
padding-right: 20px;
padding-bottom: 20px;
float: left;
}
</style>
<imgsrc="img/1.jpg" alt="">這是一個很會寫程式碼的狗，日子過得還算不錯。這是一個很會寫程式碼的狗，日子過得還算不錯。這是一個很會寫程式碼的狗，日子過得還算不錯。這是一個很會寫程式碼的狗，日子過得還算不錯。
這是一個很會寫程式碼的狗，日子過得還算不錯。這是一個很會寫程式碼的狗，日子過得還算不錯。這是一個很會寫程式碼的狗，日子過得還算不錯。這是一個很會寫程式碼的狗，日子過得還算不錯。
清除浮動
浮動對頁面的影響：如果一個父盒子中有一個子盒子，並且父盒子沒有設定高，子盒子在父盒子中進行了浮動，那麼將來父盒子的高度為0.由於父盒子的高度為0，下面的元素會自動補位，所以這個時候要進行浮動的清除。
& 額外標籤法：
在浮動的盒子之下再放一個標籤，對這個標籤設定clear:both，來清除浮動對頁面的影響。
a.內部標籤：會將這個浮動盒子的父盒子高度重新撐開
b.外部標籤：會將這個浮動盒子的影響清除，但是不會撐開父盒子。
注意：一般不會使用這一種方式來清除浮動。這種清除浮動的方式會增加頁面的標籤。
& overflow屬性：
先找到浮動盒子的父元素，再在父元素中新增一個屬性：overflow:hidden
注意：一般也不會使用這種方式。overflow:hidden有一個特點，離開了這個元素所在的區域以後會被隱藏。
& 偽元素：
偽元素：在頁面上不存在的元素，但可以通過css新增上去。每個元素都有自己的偽元素
<style>
p:before {
content: "h";
font-size: 20px;
color: brown;
}
p:after {
content: "d你好，鴻飛";
display: block;
height: 100px;
width: 100px;
line-height: 100px;
background: cadetblue;
text-align: center;
}
</style>
<p>ello worl</p>
:after 在…之後
:before 在…之前
content:”” 新增內容
預設新增的偽元素是行內元素，所以前面的h和後面的ello，worl連在一起。後面的d由於設定了display:block，所以轉行顯示。
下面是利用偽元素來清楚浮動的方法：在頁面的clearfix元素後面添加了一個空的塊級元素（這個元素的高為0，行高也為0，並且這個元素清除了浮動）
<style>
.father {
width: 500px;
border: 10px solid #000;
}
.son {
width: 200px;
height: 200px;
background: red;
float: right;
}
.one {
width: 500px;
height: 300px;
border: 10px solid deeppink;
}
.clearfix:after{
content: "";//新增內容為空
height: 0;//內容高度為0
line-height: 0;//內容文字的高度為0
display: block;//將文字設定為塊級元素
clear: both;//清除浮動
visibility: hidden;//將元素隱藏
}
.clearfix {
zoom: 1;/*為了相容ie6*/
}
</style>
<divclass="father clearfix">
<divclass="son"></div>
</div>
<divclass="one"></div>
瀏覽器相容問題
第一，IE6，不支援小於12px的盒子，任何小於12px的盒子，在IE6中看都大
解決辦法很簡單，就是將盒子的字號，設定小（小於盒子的高），比如0px。
|
12 height: 4px; 13 _font-size: 0px; |
我們現在介紹一下瀏覽器hack。hack就是“黑客”，就是使用瀏覽器提供的後門，針對某一種瀏覽器做相容。
IE6留了一個後門，就是隻要給css屬性之前，加上下劃線，這個屬性就是IE6認識的專有屬性。
比如：
|
1 _background-color: green; |
解決微型盒子，正確寫法：
|
1 height: 10px; 2 _font-size:0; |
第二，IE6不支援用overflow:hidden;來清除浮動的
解決辦法，以毒攻毒。追加一條
|
1 _zoom:1; |
完整寫法：
|
1 overflow: hidden; 2 _zoom:1; |
9.定位
解決頁面上盒子與盒子之間頁面層疊的問題！使用position
1.static:靜態定位
Ø 所有的標準流中的元素都是靜態定位。
2.relative:相對定位
Ø 使用的時候還要配合：top,left,right,bottom來使用
Ø 是相對於自己原來的位置發生偏移，在頁面上仍然佔據位置，會覆蓋其他內容！
Ø 不脫標，老家留坑，形影分離！
<style>
div {
width: 100px;
height: 100px;
}
.one {
background: red;
}
.two {
background: blue;
position: relative;
top: 10px;
left: 10px;
}
.three {
background: green;
}
</style>
<divclass="one"></div>
<divclass="two"></div>
<divclass="three"></div>
用途：微調元素、做絕對定位的參考
相對定位的定位值：
可以用left、right來描述盒子右、左的移動；
可以用top、bottom來描述盒子的下、上的移動。
↘：
|
2 position: relative; 3 top: 10px; 4 left: 40px; |
↙：
|
3 position: relative; 4 right: 100px; →往左邊移動 5 top: 100px; |
↖：
|
3 position: relative; 4 right: 100px; 5 bottom: 100px; →移動方向是向上。 |
↗：
|
9 position: relative; 10 top: -200px; →負數就是相反的方向，如果是正，就是下邊，如果是負數就是上邊 11 right: -200px; |
↗：
|
4 position: relative; 5 right: -300px; 6 bottom: 300px; |
完全等價於：
|
7 position: relative; 8 left: 300px; 7 bottom: 300px; |
如圖，有幾種相對定位的移動方法？
方法1：
|
1 position:relative; 2 top:100px; 3 left:200px; |
方法2：
|
1 position:relative; 2 bottom:-100px; 3 right:-200px; |
方法3：
|
16 position:relative; 17 top:100px; 18 right:-200px; |
方法4：
|
14 position:relative; 15 bottom:-100px; 16 left:200px; |
3.absolute:絕對定位
絕對定位的參考點：
Ø 如果這個元素沒有父元素，相對於body來定位的
Ø 如果絕對定位的元素有父元素，但是父元素沒有定位，還是相對於body來定位的
如果用top描述，那麼定位參考點就是頁面的左上角，而不是瀏覽器的左上角：
如果用bottom描述，那麼就是瀏覽器首屏視窗尺寸，對應的頁面的左下角：
Ø 如果絕對定位的元素有“父”元素，而且父元素有非static定位，那麼這個絕對定位的元素偏移是以自己的“父”元素為基礎。要聽最近的已經定位的祖先元素的，不一定是父親，可能是爺爺！
Ø 絕對定位的兒子，無視參考的那個盒子的padding。
下圖中，綠色部分是div的padding，藍色部分是div的內容區域。那麼此時，div相對定位，p絕對定位。p將無視父親的padding，在border內側為參考點，進行定位：
Ø 絕對定位之後的元素在頁面不會佔據位置（絕對定位以後的元素會脫離標準流）
Ø 子絕父相：子元素使用絕對定位，父元素使用相對定位
案例：如果小盒子在大盒子中要定位並且水平居中
先left: 50%，將小盒子在大盒子平移大盒子的一半，再設定margin-left：-(小盒子寬度的一半),注意一定是負數，那麼將來小盒子在大盒子中就可以水平居中了。
<style>
.big {
position: relative;
width: 200px;
height: 100px;
background: red;
}
.small {
position: absolute;
width: 100px;
height: 30px;
background: blue;
bottom: 5px;
left: 50%;
margin-left: -50px;
}
</style>
<divclass="big">
<divclass="small"></div>
</div>
4.fixed：固定定位
Ø 不管頁面有多大，固定定位的元素永遠是相對於瀏覽器的邊框來的。
Ø 固定定位的元素也脫離了標準流（不在頁面上佔據位置）
z-index：設定盒子的層級
Ø z-index值表示誰壓著誰。數值大的壓蓋住數值小的。
Ø 只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值。而浮動的東西不能用。
Ø z-index值沒有單位，就是一個正整數。預設的z-index值是0。
Ø 如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。
Ø 從父現象：父親慫了，兒子再牛逼也沒用。
補充：
Ø 圖文對齊
如果文字與圖片在同一行中，那麼將來文字與圖片的預設對齊方式是文字的基線對齊圖片的底線。也就是底部對齊
vertical-align：middle 將中線對齊設定文字與圖片的對齊方式：
vertical-align與display:inline-block一起使用效果最好。
Ø overflow:溢位
取值：
hidden：會將超出容器的部分隱藏起來
scroll：給容器加上滾動條
auto：根據具體情況判斷容器是否要加上滾動條
Ø 元素的隱藏：
overflow:hidden//將超出的部分裁剪掉
visibility: hidden//可以將元素隱藏，但是在頁面上還保留著原來的位置！（停薪留職）
<style>
.one {
width:100px;
height:100px;
background:red;
visibility:hidden;
}
.two {
width:100px;
height:100px;
background:blue;
}
</style>
<divclass="one"></div>
<divclass="two"></div>
display: none;//可以將元素隱藏，不保留原來的位置！
Ø 如果定位的盒子沒有寬高，那麼預設寬高為0;
如果給子盒子設定寬度為100%,那麼這個子盒子的寬與父盒子一樣寬。
Ø 透明度：
opacity:不透明度 opacity:0.5; 取值在0-1之間的小數。
這個屬性ie6不支援，如果要在ie6中設定透明，要用：filter: Alpha(opacity=50);
10.emmet語法 快捷鍵
生成id名和類名
標籤名.類名#id名+tab
沒有標籤名.類名+tab ==>div
生成同級元素：標籤名+標籤名+標籤名“+”tab
生成子類標籤
標籤名>子標籤名>子標籤名>子標籤名+tab
生成與子類標籤的同級標籤：標籤名>子標籤名>子標籤名>子標籤名^^子標籤名+tab
帶固定數量的標籤:ul>li*5+tab
帶有序號名稱：ul>li.abc$*3+ tab
生成帶有內容的標籤：ul>li>a{item}*5
生成帶有屬性的標籤ul>li>a[href=”#”]
11.精靈圖/雪碧圖
精靈圖：將頁面上一些較小的圖片放在一張大圖上。
精靈圖的使用：一張大的圖片上有很多小的圖片，那麼如何將這個小的圖片拿出來呢？
Ø 如果我們需要的一張圖片在精靈圖，必須要了解這個圖片的大小和在精靈圖上的位置。比如：我們要淘寶上面的阿里旺旺的圖示，得到了寬高為60*60,得到圖示所在的位置：0 *133.
Ø 在頁面上將這個圖片顯示出來，在顯示的時候一定要注意我們容器的大小一定要和這個圖示的大小一樣：比如：我們要html頁面上放了一個div，寬高為60*60
Ø 將精靈圖設定為容器的背景圖片，並且根據圖片所在的位置將背景圖片進行平移：
製作精靈圖：
Ø 精靈圖必須是一些小的圖片
Ø 精靈圖的多個小圖之間一定要留有足夠的間隙
Ø 完成精靈圖後一定要在精靈圖的下方留足夠的空隙，方便將來再次新增其它的精靈圖
Ø 如果是頁面上一個畫素的背景圖片不要放在精靈圖上面
|
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 span { 8 float: left; 9 background: url(img/zimubiao.jpg) no-repeat; 10 } 11 12 .l { 13 width: 48px; 14 height: 78px; 15 background-position: -161px -104px; 16 } 17 18 .h { 19 width: 70px; 20 height: 80px; 21 background-position: -429px -9px; 22 } 23 24 .f { 25 width: 62px; 26 height: 82px; 27 background-position: -294px -0px; 28 } 29 30 .e { 31 width: 60px; 32 height: 82px; 33 background-position: -232px -0px; 34 } 35 36 .i { 37 width: 48px; 38 height: 78px; 39 background-position: -0px -104px; 40 } 41 42 </style> 43 </head> 44 <body> 45 <span class="l"></span> 46 <span class="h"></span> 47 <span class="f"></span> 48 <span class="e"></span> 49 <span class="i"></span> 50 </body> 51 </html> |