屬性: colspan 橫向的合并單元格 rowspan 縱向的合并單元格
文檔流
所有的元素預設情況下都是在文檔流中存在的
文檔流是網頁的最底層
元素在文檔流中的特點:
塊元素 1. 預設寬度是父元素的全部 2. 預設高度被内容 (子元素) 撐開 3. 在頁面中自上而下垂直排列
内聯元素 1. 預設高度和寬度都被内容撐開 2. 在頁面中自左向右水準排列, 如果一行不足以容下所有的元素則換到下一行繼續從左向右
浮動
使用 float 來設定元素的浮動
可選值: none 預設值, 元素不浮動, 就在文檔流中 left 元素向頁面的左側浮動 right 元素向頁面的右側浮動
浮動特點: 1. 元素設定浮動以後, 會完全脫離文檔流, 并向頁面的左上或右上浮動. 直到遇到父元素的邊框或其他的父元素時則停止浮動. 2. 如果浮動元素上邊是一個沒有浮動的塊元素, 元素不會超過該塊元素. 3. 浮動元素的浮動位置不能超過他上邊浮動的兄弟元素, 最多一邊齊 4. 浮動元素不會覆寫文字, 文字會圍繞在浮動元素的周圍, 是以可以通過浮動來實作文字環繞圖檔的效果.
- 浮動以後元素會完全脫離文檔流, 脫離文檔流以後元素會具有如下特點:
1. 塊元素不獨占一行
2. 塊元素的寬度和高度都被内容撐開
3. 元素不在文檔流占用位置
4. 内聯元素會變成塊元素
- 高度塌陷
- 在文檔流中元素的高度預設被子元素撐開, 當子元素浮動時, 子元素會脫離文檔流,
此時将不能撐起父元素的高度, 會導緻父元素的高度塌陷. 父元素高度塌陷會導緻其他元素的位置上移, 導緻頁面的布局混亂.
- 可以通過開啟元素的 BFC 來處理高度塌陷的問題.
- BFC 叫做 Block Formatting Context
- 它是一個隐含屬性, 預設情況是關閉, 當開啟以後元素會具有如下的特性:
1. 父元素的垂直外邊距不會和子元素重疊
2. 開啟 BFC 的元素不會被浮動元素覆寫
3. 父元素可以包含浮動的子元素 ******
- 開啟 BFC 的方式很多:
1. 設定元素浮動
2. 設定元素絕對定位
3. 設定元素為 inline-block
4. 将元素的 overflow 設定為一個非預設值
- 一般我們采取副作用比較小的方式
overflow:hidden;
定位
通過定位可以将元素擺放到頁面的任意位置
使用 position 來設定元素的定位
可選值:
static 預設值 元素不開啟定位
relative 開啟元素的相對定位
absolute 開啟元素的絕對定位
fixed 開啟元素的固定定位
- 相對定位
1. 相對于元素自身在文檔流中的位置進行定位
2. 相對定位的元素不會脫離文檔流, 定位元素的性質不會改變, 塊還是塊, 内聯還是内聯
3. 如果不設定偏移量, 元素不會發生任何的變化
4. 會提升元素的層級
- 絕對定位
1. 相對于離它最近的開啟了定位的祖先元素進行定位, 如果祖先元素都沒有開啟定位則相對于浏覽器視窗進行定位.
2. 絕對定位會使元素完全脫離文檔流, 會改變元素的性質, 内聯變成塊元素, 塊元素的寬度被内容撐開
3. 絕對定位的元素如果不設定偏移量, 元素的位置不會發生變化
4. 會提升元素的層級
- 固定定位
- 固定定位也是一種絕對定位, 它的大部分特點都和絕對定位是相同的.
- 不同的是:
- 固定定位永遠相對于浏覽器視窗進行定位
- 固定定位會固定在浏覽器的指定的位置, 不會随頁面一起滾動
- 偏移量
- 當元素開啟了定位以後, 可以通過四個偏移量來設定元素的位置
top: 相對于定位位置的頂部的偏移量
bottom: 相對于定位位置的底部的偏移量
left: 相對于定位位置的左側的偏移量
right: 相對于定位位置的右側的偏移量
- 一般隻需要使用兩個值即可給元素進行定位top left
top right
bottom left
bottom right
- 偏移量也可以指定一個負值, 如果是負值則元素會向相反的方向移動
- 層級
- 當元素開啟定位以後, 可以通過 z-index 來設定層級,
它需要一個正整數作為參數, 值越大層級越高, 層級越高越優先顯示
如果層級一樣, 則後邊的會蓋住前邊的, 父元素永遠都不會蓋住子元素.
- 文檔流
- 元素的透明
使用 opacity 來設定元素的透明度
- 需要一個 0-1 之間的值
- 0 表示完全透明
- 1 表示完全不透明
IE8 及以下的浏覽器不支援該樣式, 需要使用如下方式來設定
filter:alpha(opacity = 透明度);
- 需要一個 0-100 之間的值
- 0 表示完全透明
- 100 表示完全不透明
表格
在網頁中可以通過表格來表示一些格式化的資料
表格相關的标簽
?
用來建立一個表格?
表示表格中的一行表示表頭中的單元格表示表格中的單元格type="text"文本框
type="password"密碼框
type="radio"單選按鈕
type="checkbox"多選框
type="submit"送出按鈕
type="reset"重置按鈕
type="button"普通按鈕
--
-按鈕的文字
按鈕的文字
按鈕的文字
// 編寫 JS 代碼
vara;
varb;
varc;a=1;
b=2;
c=3;vard=456;
vare=789;
來源: http://www.bubuko.com/infodetail-3615247.html