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