05_CSS入門和高級技巧(3)

上節課複習

!important不能影響就近原則，遠的標籤若是加上!important也幹不過近的標籤！

!important不能影響繼承權重是0，經過繼承的標籤加上!important也幹不過直接選中的標籤！

盒模型

網頁中的全部標籤都是盒子，都是矩形，都有width、height、padding、border、margin屬性的。 最重要的一個知識點，就是width和真實寬度的關係。

1.會看懂盒模型圖

div{
	width: 200px;
	background-color: greenyellow;
	padding: 20px;
	border:30px solid red;
}

也就說，padding、border都是外擴的。

2.padding內邊距

padding就是內邊距，指的是邊框內側到內容的距離。 padding的設置有不少方法 padding:50px;設置四個方向的padding都是50px;

四個值： padding:10px 20px 30px 40px;等價於單獨設置了上、右、下、左的padding分別分十、20、30、40等價於

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

三個值： padding:10px 20px 30px; 等價於

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;   /*左邊的值沒有指定，因此和右邊相同*/

兩個值： padding:10px 20px; 等價於

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;

注意，一些元素默認帶有padding：好比ul等等， 爲了防止這些默認的padding、margin影響咱們製做頁面，咱們要在頁面開頭書寫：

<style type="text/css">
*{
    padding:0;
    margin:0;
}
</style>

就能把全部標籤的默認的padding、margin都去掉。 固然這麼寫有效率問題，別擔憂，項目課將告訴你最正確的清除默認padding、margin的方法。

3.border邊框

邊框有三要素：粗細、線型、顏色。 border:1px solid red; px就是邊框的寬度， solid就是邊框的線型 ， red就是邊框的顏色。

線型：

工做中只許使用solid(實線)和dashed(虛線)，其餘的全部的線型都有兼容性問題，若是想製做其餘類型的邊框，必須切圖！

兼容性問題，IE瀏覽器中和Chrome瀏覽器中的邊框，明顯長得不同。

注意，三要素分別對應了三個小屬性： border:10px solid red; 等價於

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

咱們稱呼border爲「複合屬性」。

特別的，若是咱們想爲某一個邊，單獨設置三要素，那麼能夠拆分爲12個小屬性：

border:10px solid red; 等價於：

border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

更特別的，boder-color是能夠按照上右下左的順序書寫： border-color:red yellow green; 上邊是紅色， 左邊、右邊是黃色， 下邊是綠色。

小練習1：

border:10px solid black;
border-left-color:red;

小練習2：

border:10px solid black; 
border-color:black red;

小練習3：

border:10px solid red;
border-width:20px 10px;
border-color:black red blue green;

若是某一個邊框咱們不想要，那麼就寫none border-bottom:none; 下邊框就沒有了。

4.margin外邊距

本身這個盒子的邊框外側， 到其餘盒子邊框外側的距離

margin有四個方向，分別是 margin-top、margin-right、margin-bottom、margin-left。

塌陷現象：

去掉ul的小圓點，要給ul加

ul{
     list-style:none;
}

居中策略

1.文字水平居中

若是想讓盒子中的文字水平居中，那麼要給盒子設置 text-align:center; 這個屬性繼承。 它還有兩個可能的值：

text-align:left;
text-align:right;

這個方法，只能居中文本流的東西(文字、圖片、表單元素)。必定要記住，這個屬性要設置給盒子，不能設置給這些文字、圖片、表單元素。

2.盒子水平居中

讓盒子設置：margin:0 auto;

margin: 0 auto;是給盒子用的，要加給盒子本身。它將在本身的父元素內部居中。

3.單行文本的垂直居中

line-height:盒子的高度; 行高=盒子高， 此時單行文本就將在盒子中居中。注意，這個方法只能適用於單行文本，多行不適用。

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			width: 400px; 
			background-color: yellow;
			border: 1px solid #ABCDEF;
		 	line-height: 60px;
		 	text-align: center;
		 	height: 60px;
		}
	</style>


	<p class="tip">點擊查看更多</p>

標準文檔流

1.什麼是標準文檔流

咱們發現，Fireworks做圖，能夠在任何一個地方落筆；word這個軟件則不同，有一個「光標」位置，你必須在當前光標位置去書寫文字。

第二行文字的位置，仰賴於第一行文字，好比第一行文字多，第二行文字就下移了；好比第一行文字大，第二行文字又下移了。

網頁也是這樣，從左至右、從上到下，有一個「光標」的概念。 標準文檔流中，內置了不少性質。

2.標準文檔流有什麼性質

1.空白摺疊現象

標籤內的文字，無論有多少個空格、換行、tab，都會縮減爲同一個空格。

2.高矮不齊，底邊對齊

最最重要的性質來了，就是標準文檔流中，把元素分爲「塊級元素」和「行內級元素」兩種。

3.塊級元素和行內級元素

塊級元素是能單獨在一行的，行內元素是不能單獨在一行的。 咱們把HTML標籤分爲兩大類：

• 塊級元素(block level)：div、h系列、p、ul、li、dl、dt、dd
• 行內級元素(inline level)：span、a、b、u、i、em、strong

塊級元素：

• 可以設置寬度、高度；
• 不能並排；
• 不設置寬度，那麼寬度將默認變爲父親的width

行內級元素：

• 不能設置寬度、高度；(可是能夠設置行高)
• 能夠並排；

4.行內元素和塊級元素能夠自由轉換

給任何一個元素，設置 display:block; 它將轉爲塊級元素，擁有塊級元素的全部性質；

相仿的，給任何一個元素，設置 display:inline; 它將轉爲行內元素，擁有行內元素的全部性質；

有什麼用？ 把一個塊 → 行內 絲毫無用，工做10年都遇不見。 可是行內 → 塊 很是有用！

咱們發現標準文檔流是作不出網頁的，由於它太迂腐：能設置寬高的不能並排，能並排的不能設置寬高。

因此脫離標準流！ 脫離標準流一共有三種方法：浮動、絕對定位、相對定位。

浮動

浮動的理論知識挺多的，頭頭是道。可是咱們爲了考慮吸取，咱們今天忽視科學性，就看一些皮毛的「浮動」。下次課咱們深刻研究浮動。

今天只用，不研究。

1.浮動 —— 作並排用的

float就是英語「浮」的意思，left就是左浮動。要浮動就是兩個都要浮動的。 float:left; right右浮動。 float:right;

浮動的元素會去貼父盒子的邊，貼邊的過程當中，若是被它的哥哥們擋住了，就會貼在哥哥的邊上。

若是要保證兒子的並排，父親要有足夠的width。

咱們下節課將詳細研究浮動，記住一個結論：浮動的元素不能撐高父親了。