一、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é)果：
