【前端】DIV & CSS
DIV相關的技術
div它是一個html標籤，一個塊級元素（單獨顯示一行）。它單獨使用沒有任何意義，必須結合CSS來使用。它主要用於頁面的佈局。
span它是一個html標籤，一個內聯元素（顯示一行）。它單獨使用沒有任何意義，必須結合CSS來使用。它主要用於對括起來的內容進行樣式的修飾。
CSS概述
CSS指層疊樣式表（Cascading Style Sheets）
樣式定義如何顯示HTML元素
樣式通常儲存在樣式表中
把樣式新增到HTML4.0中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常儲存在CSS檔案中
多個樣式定義可層疊為一
CSS的作用
HTML：它是整個網站的骨架。
CSS：它是對整個網站骨架的內容進行美化（修飾）。
CSS如何使用
語法和規範
選擇器{
屬性名1：屬性值1；
屬性名2：屬性值2；
屬性名3：屬性值3；
}
CSS的引入方式
css的引入方式分為三種
第一種：行內引入
<div style="color:red;font-size:100px;"> javaEE </div>
第二種：內部引入
<style type="text/css">
div{
color:red;
font-size:100px;
}
</style>
第三種方式：外部引入
div{
color:red;
font-size:100px;
}<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title rel="stylesheet" type="text/css" href="../../css/style.css"/> </head> </html>
CSS的浮動
浮動的框可以向左或向右踢動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框1向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框1向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它處於文件流中，所以它不佔據空間，實際上覆蓋住了框2,使框2從檢視中消失。
如果把所有三個框都向左移動，那麼框1向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其他浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼他們向下移動時可能被其他浮動元素“卡住”：
盒子模型
盒子取值計算
我們在修改頁面元素位置的時候，需要設定它相對於盒子的位置，那麼我們有必要清楚關於盒子模型裡面的取值相關問題。
在CSS中，width和height指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。而預設情況下，內邊距、邊框和外邊距的值均為0.
佔據頁面大小的區域是整個元素框的總尺寸！預設情況，padding、margin、border均為0，假如我們設定了區域內容的width和height，那麼此時整個元素框的總尺寸就是該區域內容的寬高了，此時，如果設定了margin值，那麼整個元素框的總尺寸會發生變化（變大了)，但是我們希望它的整體佈局不發生變化！所以我們可以修改區域內容的尺寸（原有大小減去設定的margin值）。
附：圖解說明盒子模型取值問題
