一、div和span區(qū)別
- 塊元素與內(nèi)聯(lián)元素區(qū)別
- 塊元素又稱塊級元素（block element）和其對應(yīng)的是內(nèi)聯(lián)元素（inline element），都是HTML規(guī)范中的概念。
- block元素的特點：
- 總是在新行上開始；
- 高度，行高以及外邊距和內(nèi)邊距都可以控制；
- 寬度缺省是它的容器的100%，除非設(shè)定一個寬度；
- 它可以容納內(nèi)聯(lián)元素和其他塊元素。
- inline內(nèi)聯(lián)元素的特點：
- 和其他元素都在一行上；
- 高，行高以及外邊距和內(nèi)邊距不可改變；
- 寬度就是它的文字或圖片的寬度，不可改變；
- 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素。
- 塊元素（block element）
- address：地址
- blockquote：塊引用
- center：居中對齊塊
- dir：目錄列表
- div：常用塊級容器，也是css layout的主要標(biāo)簽
- dl：定義列表
- fieldset - form：控制組
- form：交互表單
- h1：大標(biāo)題
- h2：副標(biāo)題
- h3：3級標(biāo)題
- h4：4級標(biāo)題
- h5：5級標(biāo)題
- h6：6級標(biāo)題
- hr：水平分割線
二、盒子模型介紹
- CSS的盒子模型
- 盒子模型是CSS的基石之一，它指定元素如何顯示以及（在某種程度上）如何相互交互。
- 頁面上的每一個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內(nèi)容、填充、邊框和邊界組成。
- 網(wǎng)頁就是由許多個盒子通過不同的排列方式（上下排列，并列排列，嵌套排列）堆積而成。
- 盒子模型示意圖
- 每個HTML元素都可以看做是一個裝了東西的盒子。
- 盒子里面的內(nèi)容到盒子的邊框之間的舉例即填充（padding），盒子本身有邊框（border），而盒子邊框和其他盒子之間，還有邊界（margin），如圖所示。
- 默認(rèn)情況下盒子的邊框是無，背景顏色是透明，所以我們在默認(rèn)情況下看不到盒子。
- 現(xiàn)實生活中的盒子
三、盒子模型邊距填充邊框介紹
- 元素盒子大小的計算
一個元素的實際寬度=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界
- 盒子模型的特征
- 邊界值margin可為負(fù)，填充padding不可為負(fù)。
- 邊框border默認(rèn)值是0，即不顯示。
- 行內(nèi)元素，如a，定義上下界不影響行高。
- 邊框是實的，我們可以看見實實在在的邊框，而邊界和填充都是虛的，我們只能看到他們對元素的影響。
- 盒子模型中只能設(shè)置兩類顏色，即邊框顏色和背景顏色。
- 盒子模型可以設(shè)置三類距離，即邊界距離margin，填充距離padding和邊框值border。
- 行內(nèi)元素的盒子永遠(yuǎn)只能在瀏覽器中得到一行高度的空間（行高由line-height屬性決定，如果沒設(shè)置該屬性，則是內(nèi)容的默認(rèn)高度），如果給它設(shè)置上下border，margin，padding等值，導(dǎo)致其盒子的高度超過行高，那么它的盒子上下部分將和其他元素的盒子重疊。
- 因此，不推薦對行內(nèi)元素直接設(shè)置屬性，一般先設(shè)置行內(nèi)元素以塊級顯示，再設(shè)置它的盒子屬性。
四、盒子模型屬性和默認(rèn)值編寫
- 屬性值的簡寫形式
- 方法是按照規(guī)定的順序，給出2個、3個或者4個屬性值，他們的含義有所區(qū)別，具體含義如下：
- 如果給出2個屬性值，前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性
- 如果給出3個屬性值，前者表示上下邊框的屬性，后者表示左右邊框的屬性
- 如果給出4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針的排序。
例如：h1{margin:10px 0px 15px 5px;}
- 邊框border屬性
- 盒子模型的margin和padding舒心比較簡單，只能設(shè)置寬度值，最多分別對上、右、下、左設(shè)置寬度值。而邊框border則可以設(shè)置寬度、顏色和樣式。
- 分別是border-width（寬度）、border-color（顏色）和border-style（樣式）其中border-style屬性可以將邊框設(shè)置為實線（solid）、虛線（dashed）、雙線（double）等效果。
- 各種元素盒子屬性的默認(rèn)值
- 大部分HTML元素的盒子屬性（margin，padding）的默認(rèn)值都是0。
- 有少數(shù)HTML元素的（margin，padding）瀏覽器默認(rèn)值不為0，例如body，p，ul，li，form標(biāo)記等，因此我們有時有必要先設(shè)置他們的這些屬性為0。
- input元素的邊框?qū)傩阅J(rèn)值不為0，我們可以設(shè)置為0達(dá)到美化表單中輸入框和按鈕的目的。
五、display屬性和實例
- display屬性
- 通過display屬性可控制元素是以行內(nèi)元素顯示還是以塊級元素顯示，或不顯示。
- display：block|inline|none|list-item
- inline-block行內(nèi)塊元素。（CSS2.1新增的值）
- block元素
- block元素的特點：
- 總是在新行上顯示
- 高度、行高以及頂和底邊距都可控制
- 寬度缺省是它的容器的100%，除非用width設(shè)定一個寬度
- div、p、h1、form、ul、和li是塊級元素的例子
- inline元素
- inline內(nèi)聯(lián)元素的特點：
- 和其他元素都在一行上
- 高，行高以及外邊距和內(nèi)邊距不可改變
- 寬度就是它的文字或圖片的寬度，不可改變
- span、a、label、input、img、strong和em是inline元素的例子。
- 需要使用display屬性切換的情況
- 讓一個inline元素從新行開始
- 讓塊級元素和其他元素保持在同一行上
- 控制inline元素的寬度
- 控制inline元素的高度（對導(dǎo)航條特別有用）
- 無法設(shè)定寬度即可為一個塊級元素設(shè)定與文字同寬度的背景顏色
- inline-block行內(nèi)塊元素
- inline-block屬性值，即是行內(nèi)元素，但又有塊元素的屬性
- 隱藏元素display：none
- 當(dāng)某個元素被設(shè)置成了隱藏元素之后，瀏覽器會完全忽略掉這個元素，該元素不會被顯示，也不會占用文檔中的位置。像title元素默認(rèn)就是此類型。
- 比較visibility：hidden
- 制作下拉菜單、tab面板等有時就需要用display：none把菜單或面板隱藏起來。
六、浮動與清除浮動
- 盒子的浮動
- 在標(biāo)準(zhǔn)流中，塊級元素的盒子都是上下排列，行內(nèi)元素的盒子都是左右排列的，如果僅僅按照標(biāo)準(zhǔn)流的方式進(jìn)行排列，就只有這幾種可能，限制太大。CSS的定制者也想到了這樣排列的限制問題，因此又給出了浮動和定位方式進(jìn)行盒子的排列，從而使排版的靈活性大大提高。
- 例如：有時希望相鄰塊級元素的盒子左右排列（所有盒子浮動）或者希望一個盒子被另一個盒子的內(nèi)容環(huán)繞（一個盒子浮動）做出圖文混排的效果，這時最簡單的方法就是運用浮動（float）屬性使盒子在浮動方式下定位。
- 代碼：未添加浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試</title> <style> .div1{ background-color: red; width: 50px; height: 50px; } .div2{ background-color: green; width: 50px; height: 50px; } .div3{ background-color: gold; width: 50px; height: 50px; } .div4{ background-color: black; width: 50px; height: 50px; } </style> </head> <body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> <div class="div4"> </div> </body> </html>
結(jié)果：
- 代碼：添加浮動
.div1{ background-color: red; width: 50px; height: 50px; float: left; } .div2{ background-color: green; width: 50px; height: 50px; float: left; } .div3{ background-color: gold; width: 50px; height: 50px; float: left; } .div4{ background-color: black; width: 50px; height: 50px; float: left; }
結(jié)果：
- 浮動的清除
- clear是清除浮動的屬性，它的取值有l(wèi)eft、right、both、和none（默認(rèn)值），如果設(shè)置盒子的清除浮動屬性clear值為left或right，表示盒子左邊或者右邊不允許有浮動的對象。設(shè)置值為both則表示兩邊都不允許有浮動現(xiàn)象，因此該盒子將會在瀏覽器中另起一行。
- 代碼：清除div2的浮動
.div1{ background-color: red; width: 50px; height: 50px; float: left; } .div2{ background-color: green; width: 50px; height: 50px; float: left; clear: left; } .div3{ background-color: gold; width: 50px; height: 50px; float: left; } .div4{ background-color: black; width: 50px; height: 50px; float: left; }
結(jié)果：
- 盒子模型布局
- 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試</title> <style> .header{ width: 1000px; height: 100px; background-color: #b3d4fc; margin: auto; } .con{ width: 1000px; height: 50px; background-color: #c0c0c0; margin: auto; } .main{ width: 1000px; background-color: #c0c0c0; margin: auto; } .nav{ width: 200px; background-color: red; height: 500px; float: left; margin: 0px 10px; } .content{ width: 500px; background-color: green; height: 500px; float: left; margin: 0px 30px; } .side{ width: 200px; background-color: blue; height: 500px; float: left; margin: 0px 10px; } .footer{ width: 1000px; background-color: #ff00ff; height: 100px; margin: auto; float: left; } </style> </head> <body> <div class="header">頂部</div> <div class="con">菜單</div> <div class="main"> <div class="nav">內(nèi)容1</div> <div class="content">內(nèi)容2</div> <div class="side">內(nèi)容3</div> <div class="footer"> 地址：XXXXXXXXX 電話：XXXXXXXXX </div> </div> </body> </html>
結(jié)果：
七、用CSS posistion屬性來定位
- CSS定位
- CSS定位（posistion）屬性允許你對元素進(jìn)行定位。
- CSS定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。
- CSSposistion屬性
- 通過使用該屬性，我們可以選擇4種不同類型的定位，這會影響元素框生成的方式。
- position屬性值的含義：
- static元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。
- relative元素框偏移某個距離。元素仍然保持其未定位前的形狀，他原本所占用的空間仍保留。
- absolute元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者初始包含塊。元素原先在正常文檔流中所占用的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
- fixed元素框的表現(xiàn)類似于position設(shè)置absolute，不過其包含塊是視窗本身。
- 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試</title> <style> body{ border:1px red solid; } div{ width:140px; height:100px; } #ha{ border:1px red solid; background-color:red; position:absolute; top:40px; left:40px; z-index:5; } #hi{ border:2px green solid; background-color:green; position:absolute; top:80px; left:80px; z-index:7; } #xi{ border:3px orange solid; background-color:orange; position:absolute; top:140px; left:140px; z-index:3; } #img1{ width:400px; height:300px; } #img2{ position:absolute; top:100px; left:200px; } </style> </head> <body> <div id="ha">哈哈哈哈</div> <div id="hi">嘿嘿嘿嘿</div> <div id="xi">嘻嘻嘻嘻</div> <img src="img/大師兄1.png" id="img1"/> <img src="img/大師兄.jpg" id="img2"/> </body> </html>
結(jié)果：
