HTML 學習筆記 May 8，2017 盒子模型3練習、浮動、清楚浮動、css定位詳解、仿搜狐網站首頁面布局、js基本介紹
控制顯示區域的高度和寬度
div 控制顯示的位置
<div>
<ul>
<li>
</li>
</ul>
</div>
float: left; /左浮動/
定義邊框：
p {
border-style: solid; /* 實線 */
}
border-style: dotted solid double dashed;
/* 上邊框是點狀 /
/ 右邊框是實線 /
/ 下邊框是雙線 /
/ 左邊框是虛線 */
border-style: dotted solid double;
/* 上邊框是點狀 /
/ 左右邊框是實線 /
/ 下邊框是雙線 */
border-style: dotted solid;
/* 上下邊框是點狀 /
/ 左右邊框是實線 */
border-style: dotted;
/* 所有邊框都是點狀 */
body 搜狐一般都是 1000px
body {
margin: 0 auto;
width: 1000px; /* 搜狐里邊一般都是1000px /
height: 1000px;
border: 1px solid blue; / 1px 實線 藍色 */
}
/定義幾個常用的字體/
.font1 {
font-weight: bold;
font-size: 20px;
}
/定義集中超鏈接樣式/
a:link {
text-decoration: none;
}
.span1 {
background-color: pink;
display: block; /* 現在需要把span當成塊來使用 */
}
.span1 a {
float: right; /* 右浮動 */
}
右浮動時，當 div1 向右浮動時，它脫離標準流并且向右移動，直到它的右邊緣碰到包含框的右邊緣。不會超出。
float: right; /*右浮動:是指讓該元素,盡量向右邊移動,直到碰到父元素的右邊界 */
左浮動，三個浮動框的時候，是后邊的兩個碰到前邊的一個就會停下來。
float: left; /* 左浮動:是指讓該元素,盡量向左移動,讓出自己右邊的空間,給下一個元素顯示 */
左浮動 如下圖所示：
如果我們的div框很多，外面的框無法容納水平排列的浮動div元素，那么其他浮動塊向下移動，直到有足夠的空間。效果如下圖所示：
如果一行不夠排列，就會自動換行排列，如果某個 div 過大，則會卡住別的 div
如果是2號 div 高度過大，則會卡在下一格、如圖：
如果是3號 div 高度過大，則會卡在下一行，重新定義的高度，如圖：
text-align: center; /* text-align 表示放在該元素中的其他元素會左右居中 */
每個 html 元素都可以看作是一個盒子。
浮動：①它本身盡可能向右/左移動，直到碰到邊框或者別的浮動元素，特別強調浮動對塊元素和行內元素都生效！
②元素向右/左浮動，就相當于讓出自己的左/右邊，別的元素就會在它的左/右邊排列。
<img style="float: left; margin-right: 5px"/> 字包畫
css定位
css定位（Positioning）屬性允許你對元素進行定位，position屬性值：（默認是static）
static（默認值）：元素框正常生成。塊級元素生成一個矩形框，作為文檔流/標準流的一部分，行內元素則會創建一個或者多個行框，置于其父元素中。
relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留，從這一角度看，好像該元素仍然在文檔流/標準流中一樣。
absolute：元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed：元素框的表現類似于將 position 設置為 absolute ，不過其包含塊是視窗本身。
special {
position: relative; /* 這里我們使用了相對定位，參照物是原來的位置 /
left: 40px; / 在原來的位置,向右移動大小;如果向左移動,就是負數-40px /
top: 100px; / 在原來的位置,向下移動大小;如果向上移動,就是負數-100px */
}
相對定位如圖：
special {
position: absolute; /* 這里我們使用了絕對定位，參照物是離自己最近的非標準流盒子而言的 /
left: 40px; / 在原來的位置,向右移動大小;如果向左移動,就是負數-40px /
top: 100px; / 在原來的位置,向下移動大小;如果向上移動,就是負數-100px */
}
絕對定位如圖：
relative 的參照點是 它原來的位置；
absolute 相當于元素從原來的位置脫離，并讓出自己的空間，后面的元素就會占有讓出的空間。
是對離自己最近的那個非標準的盒子而言的。
對 static 而言，left 和 right 是不生效的。
Question:像搜狐這樣的，寬度縮小，然后頁面寬度不變只是覆蓋是哪一句代碼做到的？？？
如果你不知道高是多少，你就不要寫，最后它會自適應，有多高就顯示多高。
<table height="100%" align="center" valign="middle"></table>
這個就是高度居中，左右居中。O(∩_∩)O哈哈~，table的用法
javascript 是實現網頁動態效果的基石，在 web 開發中扮演重要的角色，被廣泛應用到各個領域：
①網頁游戲
②地圖搜索
③股市信息查詢
④web 聊天
???
在 web 開發中，js 是必不可少的技術！同事，js 也是 ajax/jquery/extjs 等框架的基礎。
ajax 是可以實時更新數據的一種技術
javascript 是廣泛用于客戶端的 web 開發的腳本語言，常用來給 HTML 網頁添加動態功能，比如響應用戶的各種操作。
腳本語言是什么：
①腳本語言往往不能獨立使用，往往和 html/jsp/php/asp/.net配合使用
②腳本語言也有自己的變量，函數，控制語句（順序、分支、循環）
③解釋性語言（調用一句，解釋一句）/編譯語言（先編譯成機器語言）
腳本語言實際上是解釋性語言（即在運行的時候，直接對源碼進行執行）
④java -> jvm js -> 瀏覽器（js引擎來解釋執行）
js是在客戶端（瀏覽器）執行的（少數是在服務器執行）
網景的內核是公開的免費源代碼
這個是用 input 寫出來的 button ，直接在第一個尖括號里邊就寫了 "/" 了，O(∩_∩)O哈哈~
<input type="button" value="點我有驚喜" onclick="interval()"/>
服務器與 js 之間的請求數據，如下圖所示：
因為瀏覽器的差異，我們會看到，在不同的瀏覽器中使用 js 編程會有差異，比如，在給某個控件綁定響應函數時， w3c dom 標準是 addEventListener() ，而 ie 是使用 attachEvent() ，還有就是有些方法在 IE 中可以使用. 而在 ff 中卻不能使用，這些都是我們在實際開發中要注意的問題。
