06_CSS入門和高級技巧(4)

複習

• CSS ： 負責樣式層，層疊式樣式表cascading style sheet。CSS2.1，最新版本CSS3。

• CSS選擇器： 選擇哪些元素加樣式。基本選擇3種：標籤p、id選擇器#id、class選擇器.；高級選擇器4種：後代選擇器div p 、交集選擇器div.haha 、並集選擇器div,p 、通配符*

id選擇器：全頁面id惟一；

class選擇器：同一個標籤能夠帶多個class： <p class="」para1" spec」></p>

class選擇器不要求頁面惟一 <p class="」para1" spec」></p> <h3 class="」spec」"></h3>

• 繼承性： 哪些屬性能繼承：color、font-、text-、line-開頭的。 不能繼承的：background-color、盒模型的屬性、浮動、定位

body{
   font-size:12px;
}

• 層疊性： 碰見衝突，聽誰的。有一個很是嚴密的圖。!important提高權重，要知道!important能提高什麼，不能提高什麼？好比不能影響就近原則：離得近的就是近的，遠的寫!important沒用；不能把繼承來的提高權重：選中了的就是選中了的，繼承來的!important也沒法幹掉選中了的。

• 文本屬性：

font-weight:bold;
font-weight:700;
font-style:italic;
text-decoration:underline;
font-size:12px;
line-height:24px;
font-family:」Consolas」,」Microsoft Yahei」,」SimSun」;
font:12px/24px 」Consolas」,」Microsoft Yahei」,」SimSun」;

• 盒模型

width:200px;   /*盒子內容的寬度*/
height:200px;  /*盒子內容的高度*/
padding:10px;  /*內邊距*/
border:1px solid red; 
margin:40px;

咱們在這裏補充強調一下：padding區域有背景顏色；而且如今的知識水平，你不能給padding 區域單獨設置顏色； padding: 10px 20px 30px 40px; 上、右、下、左

padding:10px 20px 30px; 上、左右、下

邊框的三要素：

border-width:1px;
border-style:solid;
border-color:red;

還能繼續拆： border-top-style:dashed;

三要素的寫法能夠上右下左： border-width:1px 2px 3px 4px;

• 浮動：咱們尚未科學的介紹，一些性質還不知道，不要緊做業已經能作了。由於浮動是幹嗎的咱們已經知道了：製做並排的。

標準文檔流中元素分爲兩種： block-level ： 可以設置寬高、不能並排，好比div、h、p、li、dt、dd inline-level： 不能設置寬高、能並排，好比span、a、b、u、i 浮動，就能讓元素又能並排，又能設置寬高。

深刻了解浮動的性質

1.浮動的元素脫離標準流，沒有標準流的行塊之分了

脫離標準流一共就3個方法： 浮動： float:left; 絕對定位： position:absolute; 固定定位： position:fixed;

浮動的元素已經脫離了標準流，因此沒有inline、block之分了。

span在標準流中一個經典的行內元素，可是浮動了，就能夠不轉塊直接設置寬度、高度。

<span class="no1">1</span>

	.no1{
		float: left;
		width: 300px;
		height: 50px;
		background-color: orange;
	}

div在標準流中是一個經典的塊級元素，不設置寬度在標準流中是自動撐滿父親的width。可是浮動了，就不自動撐滿了，而是自動收縮了，收縮爲內部文字的大小了：

2.依次貼邊

左浮動： 父盒子的左邊框內部 ← 老1 ← 老2 ← 老3 ← 老4

若是以前的兄弟已經不足以容納本身，好比老4沒有足夠的空間並排了，那麼將依次尋找老三、老二、老一、父親的邊框去貼：

2.2 依次貼邊 左浮動：

父盒子的左邊框內部 ← 老1 ← 老2 ← 老3 ← 老4

若是以前的兄弟已經不足以容納本身，好比老4沒有足夠的空間並排了，那麼將依次尋找老三、老二、老一、父親的邊框去貼：

可是不鑽：

3.豎直方向上的margin塌陷現象消失

margin塌陷是標準流的性質，由於浮動脫標了，就沒有這個事兒了。

4.讓出了標準流

<div class="box1"></div>  → 浮動
<div class="box2"></div> → 沒有浮動

注意，這個性質沒啥用，工做中製做「壓蓋」使用定位，而不是用這個浮動的小技巧。

橙色盒子浮動了，讓出了標準流的位置，標準流的光標還在頁面左上角，因此藍色盒子就渲染在左上角，被橙色盒子壓住了。

5.字圍

清除浮動

1.父親不能被浮動的兒子撐出高

下面的代碼，no一、no2都浮動了，box就不能被兒子撐出高度：

<div class="box">
	<p class="no1"></p>
	<p class="no2"></p>
</div>

由於父親只能被標準流的元素撐高。

2.治這個病的一個偏方

有一個屬性叫作 overflow:hidden; 可以解決事情。 如今先來學習overflow:hidden;的本意是什麼

overflow是英語「溢出」的意思；hidden就是隱藏的意思。

這個屬性的意思，就是讓溢出邊框的內容隱藏。

就如同橘子皮就是橘子皮，可是咱們發現能夠治感冒，就是世界上存在不少這樣的事情，八竿子打不着的事兒，竟然有聯繫。 overflow:hidden;是用來隱藏掉溢出邊框的內容的，是用來變魔術的。可是咱們發現，overflow:hidden;有神奇的別的用處，就是可以讓父親認識本身脫標的兒子，可以讓父親被本身脫標的兒子撐出高度。

<div class="box">  →不能被撐出高了，解決辦法：  overflow:hidden;
	<p class="no1"></p>  → 脫標了
	<p class="no2"></p> → 脫標了
</div>

3.有高度的盒子可以管住本身內部的浮動元素

有高度的盒子，可以管住本身的內部的浮動元素，不會影響別人內部的浮動元素，也不會受別人影響。

<div class="box1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>
<div class="box2">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

4.清除浮動方法1：clear:both;

咱們發現，有高度的盒子能夠管住本身的兒子，可是若是父盒子沒有高度，那麼序列就亂套了，第二個序列就去追隨第一個序列了：

解決辦法挺簡單，就是給後面的盒子加上 clear:both;

clear就是清除意思，它的值能夠是： clear:left; 表示清除左浮動帶來的影響 clear:right;表示清除右浮動帶來的影響 clear:both；表示清除全部浮動帶來的影響

這個東西很差用，緣由是：

• box仍是沒有高
• margin失效

5.清除浮動方法2：隔牆

隔牆法是很是經常使用的，在網頁中兩個很是大的部分，咱們總但願之間隔一堵牆，把兩部份內部的浮動都關在裏面，不要相互影響，小技巧就是margin依舊失效，能夠用牆的高度來模擬間隔。

<div class="box1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>
<div class="cl h20"></div>
<div class="box2">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

margin雖然失效，可是能夠用小技巧來彌補，能夠用牆的高來當作間隔。 可是盒子依然沒有高。

6.清除浮動方法3：內牆法

cl就是clear:both;

<div class="box1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<div class="cl"></div>
</div>

<div class="box2">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<div class="cl"></div>
</div>

如今margin好用了，而且盒子也有高了，全部的事情都解決了！可是仍是有問題：

HTML標籤有點放置的太多了。這些標籤頁沒有語義，看起來不爽。

7.清除浮動方法4：overflow:hidden;

<div class="box1">  → 這個盒子沒高，就寫上overflow:hidden;
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>

<div class="box2">  → 這個盒子沒高，就寫上overflow:hidden;
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

總結：記住，清除浮動的方法有不少，可是不少都是在面試中有意義。工做中：

• 咱們總喜歡給內部有浮動的父盒子加上overflow:hidden;
• 咱們總喜歡在兩個大部分之間隔外牆

<div class="header">
	
</div>
<div class="cl h18"></div>
<div class="content">
	
</div>
<div class="cl h18"></div>
<div class="footer">
	
</div>