說明：僅作為學習輔助
那么Web頁面制作基礎，能讓你掌握什么呢？
第一節(jié)掌握Web基礎知識。
第二節(jié)掌握HTML基礎知識。
第三節(jié)掌握CSS基礎知識。
計算機語言的概念
解釋和編譯
Sublime的介紹
開發(fā)者工具介紹
命名規(guī)范
命名規(guī)范
英文命名
數(shù)字不能打頭
駝峰命名法
學習前端接觸的web基礎語言，HTML，CSS，JavaScript
每次15分鐘朗讀：
Internet，中文為因特網(wǎng)，國際互聯(lián)網(wǎng)。
它是由所有使用公用語言互相通信的計算機連接而組成的全球網(wǎng)絡。
WWW是World Wide Web的縮寫，中文名萬維網(wǎng)。
WWW是Internet的最核心部分。
它是Internet上那些支持WWW服務和HTTP協(xié)議的服務器集合。
WWW在使用上分為Web客戶端和Web服務端。
用戶可以使用Web客戶端訪問Web服務器上的頁面。
Website，中文名為網(wǎng)站，是指在Internet上根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容相關網(wǎng)頁的集合。
URL，是Uniform Resource Locator的縮寫，中文名為統(tǒng)一資源定位符，俗稱網(wǎng)址，它是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標準資源的地址。
URL的一般格式：
協(xié)議://主機地址（ip地址)+目錄路徑+參數(shù)
復制代碼常見的協(xié)議有：
a. ftp：File Transfer Protocol，文件傳輸協(xié)議，可以通過FTP訪問服務器上的文件。通常使用時在主機地址前面加上“用戶名：密碼@”。
示例：
url: ftp://admin:12345@113.129.xxx/html.pdf
復制代碼b. file：主要訪問本地計算機中的文件。
c. telent：允許用戶通過一個協(xié)商過程與一個遠程設備進行通信。
d. http：Hyper Text Transfer Protocol，超文本傳輸協(xié)議，是用于從萬維網(wǎng)服務器傳輸超文本到本地瀏覽器的傳輸協(xié)議。
Web Standard（Web標準)是Web應用開發(fā)需要遵守的標準。
網(wǎng)頁主要由三部分組成：結構標準，表現(xiàn)標準，行為標準。
網(wǎng)站訪問過程
url統(tǒng)一資源定位符
互聯(lián)網(wǎng)上標準資源的地址，可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法。
組成部分：協(xié)議，服務器地址，資源路徑。
Web Browser，中文名為網(wǎng)頁瀏覽器，是一個顯示網(wǎng)頁服務器或者檔案系統(tǒng)內(nèi)的HTML文件，并讓用戶與這些文件互動的軟件。
Web Server，中文名為網(wǎng)頁服務器，WEB服務器，主要是提供網(wǎng)上信息瀏覽服務。
Web服務器可以解析HTTP協(xié)議，當Web服務器接收到一個HTTP請求時，會返回一個HTTP響應，客戶端就可以從服務器上獲取網(wǎng)頁html，包括css，js,視頻，音頻等。
web開發(fā)主要分前端和后端兩部分。
前端是指直接與用戶接觸的網(wǎng)頁，網(wǎng)頁上通常有html,js,css等。
后端是指程序，數(shù)據(jù)庫和服務器層面的
web系統(tǒng)開發(fā)過程
項目提出，需求分析，（設計，ui設計，系統(tǒng)設計），（開發(fā)，前端開發(fā)，后臺開發(fā)），系統(tǒng)測試，開發(fā)與維護。
HTML的歷史：HTML，XHTML
HTML的全局屬性：全局標準屬性，全局事件屬性
HTML的元素：
標記語言，是一種將文本以及與文本相關的其他信息結合起來，展現(xiàn)出關于文檔結構和數(shù)據(jù)處理細節(jié)的電腦文字編碼。
HTML，為超文本標記語言。
XHTML是可擴展超文本標記語言，是一種更純潔，更嚴格，更規(guī)范的html代碼。
html文件由文件頭和文件體兩部分組成。
標簽的分類：雙標簽，單標簽。
雙標簽：由“開始標簽”和“結束標簽”兩部分構成，必須成對使用，且必須合理嵌套。
單標簽：在開始標簽中進行關閉（以開始標簽的結束而結束）。
在HTML中，規(guī)定了8個全局標準屬性。
class用于定義元素的類名。
id用于指定元素的唯一id。
style用于指定元素的行內(nèi)樣式。
title用于指定元素的額外信息。
accesskey用于指定激活某個元素的快捷鍵。
支持
accesskey屬性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。
tabindex用于指定元素在tab鍵下的次序。
支持
tabindex屬性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>
dir用于指定元素中內(nèi)容的文本方向。
dir的屬性值只有ltr和rtl兩種，分別是left to right和right to left。
lang用于指定元素內(nèi)容的語言。
Window窗口事件onload，在頁面加載結束后觸發(fā)。
onunload，在用戶從頁面離開時觸發(fā)，如單擊跳轉(zhuǎn)，頁面重載，關閉瀏覽器窗口等。
Form表單事件onblur，當元素失去焦點時觸發(fā)。
onchange，在元素的元素值被改變時觸發(fā)。
onfocus，在元素獲得焦點時觸發(fā)。
onreset，當表單中的重載按鈕被點擊時觸發(fā)。
onselect，在元素中文本被選中后觸發(fā)。
onsubmit，在提交表單時觸發(fā)。
Keyboard鍵盤事件onkeydown，在用戶按下按鍵時觸發(fā)。
onkeypress，在用戶按下按鍵后，按著按鍵時觸發(fā)。
該屬性不會對所有按鍵生效，不生效按鍵如：
alt，ctrl，shift，esc。
onkeyup，當用戶釋放按鍵時觸發(fā)。
Mouse鼠標事件onclick，當在元素上單擊鼠標時觸發(fā)。
ondblclick，當在元素上雙擊鼠標時觸發(fā)。
onmousedown，當在元素上按下鼠標按鈕時觸發(fā)。
onmousemove，事件會在鼠標指針移動時發(fā)生。
onmouseout，當鼠標指針移出元素時觸發(fā)。
onmouseover，事件會在鼠標指針移動到指定的元素上時發(fā)生。
onmouseup，當在元素上釋放鼠標按鈕時觸發(fā)。
onabort，當退出媒體播放器時觸發(fā)。
onwaiting，當媒體已停止播放但打算繼續(xù)播放時觸發(fā)。
一個HTML文檔包含的標簽
<!DOCTYPE>，聲明文檔類型。
<html>，HTML元素真正的根元素。
<head>，定義html文檔的文檔頭。
head中包含的元素
title，定義HTML文檔的標題
base，為頁面上的所有鏈接規(guī)定默認地址或者默認目標
link，用于定義文檔與外部資源之間的關系
meta，提供關于HTML的元數(shù)據(jù)
style，用于為HTML文檔定義樣式信息
script，用于定義客戶端腳本
復制代碼body，定義html文檔的文檔體。
content-Type，用于設定網(wǎng)頁的字符集，便于瀏覽器解析與渲染頁面。
代碼：
<meta http-equiv="content-Type` content="text/html"; charset=utf-8">
復制代碼cache-control，用于告訴瀏覽器如何緩存某個響應及緩存多長時間。
參數(shù)：
no-cache，發(fā)送請求，與服務器確認該資源是否被更改，如果沒有，則使用緩存
no-store，允許緩存，每次都要去服務器上下載完整的響應
public，緩存所有響應
private，只為單個用戶緩存
max-age，表示當前請求開始，相應響應在多久內(nèi)能被緩存和重用，不去服務器重新請求，max-age=60表示響應可以再緩存和重用60秒
<meta http-equiv=cache-control" content="no-cache">
復制代碼expires，用于設定網(wǎng)頁的到期時間，過期后重新到服務器上重新傳輸。
refresh，網(wǎng)頁將在設定的時間內(nèi)，自動刷新并轉(zhuǎn)向設定的網(wǎng)址
Set-Cookie，用于設置網(wǎng)頁過期。
無語義元素：<span>,<div>，<span>是內(nèi)聯(lián)標簽，用在一行文本中，<div>是塊級標簽。
DIV+CSS
div用于存放需要顯示的數(shù)據(jù)，css用于指定如何顯示數(shù)據(jù)樣式，做到結構與樣式相互分離。
查看div+css樣式HTML:點擊下方鏈接跳轉(zhuǎn)，可查看源碼：
普通文本
<b>，定義粗體文本
<big>，定義大號字
<em>，定義著重文字
<i>，定義斜體字
<small>，定義小號字
<strong>，定義加重語氣
<sub>，定義下標字
<sup>，定義上標字
<ins>，定義插入字
<del>，定義刪除字
計算機輸出
<code>，定義計算機代碼
<kbd>，定義鍵盤輸出樣式
<samp>，定義計算機代碼樣本
<tt>，定義打字機輸入樣式
<pre>，定義預格式文本
術語
<abbr>，定義縮寫
<acronym>，定義首字母縮寫
<address>，定義地址
<bdo>，定義文字方向
<blockquote>定義長的引用
<q>，定義短的引用語
<cite>，定義引用，引證
<dfn>，定義一個概念，項目
<img src="圖片的url" alt = "圖像的替代文本">
復制代碼<a>標簽的target屬性，默認值為_self。
| 值 | 說明 |
|---|---|
_self | 在超鏈接所在框架或窗口中打開目標頁面 |
_blank | 在新瀏覽器窗口中打開目標頁面 |
_parent | 將目標頁面載入含有該鏈接框架的父框架集或父窗口中 |
_top | 在當前的整個瀏覽器窗口中打開目標頁面，因此會刪除所有框架 |
文本鏈接是<a></a>標簽之間的元素內(nèi)容為文本內(nèi)容。
錨點鏈接是用#+對應的錨點，錨點通常用唯一屬性值id設定。
圖像熱區(qū)鏈接，是什么呢？當你在看一些購物網(wǎng)頁的時候，一張圖片上，可以在不同的地方鏈接到不同的目標位置，點擊不同的地方可以跳轉(zhuǎn)到不同的網(wǎng)頁，這也是做商城項目一般要用到的技術。
這個時候不是<a>標簽元素了，而是<area>元素。
<area>元素的屬性有兩個shape，cords屬性。
shape 屬性 | 說明 | cords 屬性 | 說明 |
|---|---|---|---|
circle | 圓形 | x,y,r | (x,y)為圓心坐標，r為半徑 |
rect | 矩形 | x1,y1; x2,y2 | (x1,y1)為左上角坐標，(x2,y2)為右下角坐標 |
poly | 多邊形 | x1,y1;x2,y2;x3,y3;... | 分別是各個點的點坐標 |
<area>的坐標系，原點為圖片的左上角,x軸正方向向右，y軸正方向向下
我畫個圖哈，反映<area>的坐標系：
圖像熱區(qū)鏈接的使用，<map>標簽定義一個image-map，可以含一個以上的熱區(qū)<area>，每個熱區(qū)都有獨立的鏈接。
要為<map>標簽賦予name屬性。
將<img>標簽的usemap屬性與<map>標簽的name屬性相關聯(lián)。
為了證明我學會了，我寫一個html頁面。
map -> name="image_link"
img -> usemap="#image_link"
復制代碼點擊跳轉(zhuǎn)：imgmap.html
e-mail鏈接主要是看到有很多官方網(wǎng)頁需要做的一個打開一封新的電子郵件。
點擊下方鏈接即可看到效果：
代碼：
<a href="mailto:xxxxxx@qq.com">聯(lián)系我們</a>
復制代碼點擊JavaScript鏈接：
點擊彈窗
代碼：
<a href="javascript:alert('哈哈，你點擊了！');">點擊彈窗</a>
復制代碼空鏈接是指未指派目標地址的超鏈接。
空鏈接的代碼：
javascript: void(0)
<a href=""></a>
<a href="#"></a>
<a href="javascript:void(0)"></a>
復制代碼整合列表html網(wǎng)頁，點擊跳轉(zhuǎn)：ul-ol.html
無序列表，<ul>定義無序列表，<li>定義列表項。
<ul>的type屬性值：disc點，square方塊，circle圓，none無.
有序列表，<ol>定義有序列表，<li>定義列表項。
<ol>的type屬性值：數(shù)字，大寫字母，大寫羅馬數(shù)字，小寫字母，小寫羅馬數(shù)字。
start屬性定義序號的開始位置。
定義列表<dl>，定義列表內(nèi)部可以有多個列表項標題，每個列表項標題用<dt>標簽定義，列表項標題內(nèi)部又可以有多個列表項描述，用<dd>標簽定義。
整合表格html網(wǎng)頁，點擊跳轉(zhuǎn)：table.html
<table>定義表格
<caption>定義表格標題
<tr>定義若干行
<td>定義若干單元格
<th>定義表頭
表格分頭部，主體，底部：<thead>,<tbody>,<tfoot>三個標簽。
| 屬性 | 說明 |
|---|---|
border | 設置表格的邊框?qū)挾?/td> |
width | 設置表格的寬 |
height | 設置表格的高 |
cellpadding | 設置內(nèi)邊距 |
cellspacing | 設置外邊距 |
<td>的兩個屬性：colspan用于定義單元格跨行，rowspan用于定義單元格跨列
<tbody>,<thead>,<tfoot>標簽通常用于對表格內(nèi)容進行分組。
表單由<form>標簽定義，action屬性定義了表單提交的地址，method屬性定義表單提交的方式。
代碼：
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
<input type="image">
<input type="file">
<input type="hidden">
復制代碼<select>
<option>
size屬性用來設置選擇欄的高度，multiple屬性用來決定是多選列表，還是單選
selected="selected"
復制代碼表單控件，用于輸入更多的文本
<textarea>元素
<textarea>標簽具有name,cols,rows3個屬性。
name用于提交參數(shù)
value用于輸入文本內(nèi)容
cols和rows分別用于文本框的列數(shù)和行數(shù)，寬度和高度。
效果：
自我評價：代碼：
<form action="web" method="post">
自我評價：<br/>
<textarea rows="10" cols="50" name="introduce">
</textarea>
<br/>
<input type="submit" id="" name="">
</form>
復制代碼<frameset>定義一個框架集，用于組織多個窗口，每個框架存有獨立的html文檔
<frameset>不能與<body>共同使用，除非有<noframe>元素
<frame>用于定義<frameset>中一個特定的窗口?？赵?code><frame/>
frame屬性
| 屬性 | 說明 |
|---|---|
src | 需要顯示的html文檔 |
frameborder | 定義框架的外邊框，屬性值為0或者1 |
scrolling | 定義是否顯示滾動條,有3個值：yes,no,auto |
noresize="noresize" | 定義該框架無法調(diào)整大小，默認是可以調(diào)整的 |
marginheight和marginwidth屬性 | 定義上下左右的邊距 |
<noframe>，用于為那些不支持框架集的瀏覽器顯示文本
<iframe>，與<frame>元素相同，iframe有frame的屬性，還加了height和width
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>frameset</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
<frame src="https://juejin.im/user/5e477d7ce51d4526c550a27d" ></frame>
<frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
</frameset>
<noframes>
<body>您的瀏覽器無法處理框架，請更換瀏覽器打開</body>
</noframes>
</html>
復制代碼HTML 中的預留字符必須被替換為字符實體。
| 顯示結果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | | | |
| < | 小于號 | < | < |
| > | 大于號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| ￡ | 鎊（pound） | £ | £ |
| ￥ | 元（yen） | ¥ | ¥ |
| € | 歐元（euro） | € | € |
| § | 小節(jié) | § | § |
| ? | 版權（copyright） | © | © |
| ? | 注冊商標 | ® | ® |
| ? | 商標 | ™ | ™ |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
css，英文Cascading Style Sheets，中文名：級聯(lián)樣式表。層疊樣式表。
css是一種表現(xiàn)語言，是對網(wǎng)頁語言的補充。
css用于網(wǎng)頁的風格設計，包括字體，顏色，位置等。
css使用的4中方式：引入外部樣式文件，導入外部樣式文件，使用內(nèi)部樣式定義，使用內(nèi)聯(lián)樣式定義。
引入外部樣式文件：
<link type="text/css" rel="stylesheet" href="css樣式文件的url"/>
復制代碼導入外部樣式文件:
<style type="text/css">
@import "css樣式文件的url";
</style>
復制代碼使用內(nèi)部樣式定義：
<style type="text/css">
div {
background-color: #ffffff;
width: 300px;
height: 300px;
}
</style>
復制代碼使用內(nèi)聯(lián)樣式定義：
<div style="background-color: #ffffff; width: 100px; height: 100px;">
</div>
復制代碼層疊：層疊樣式生效的優(yōu)先級：
內(nèi)聯(lián)樣式->內(nèi)部樣式->外部樣式->瀏覽器默認效果。
繼承，就是css屬性可以從父元素向下傳遞到子元素。
css的選擇器元素選擇器，是最簡單的選擇器。
通配符選擇器，用"*"表示，表示對任意元素都有效。
屬性選擇器
格式：
E[attribute]{property1:value1; property2:value2;...}
復制代碼| 語法 | 說明 |
|---|---|
E[attribute] | 用于選取帶有指定屬性的元素 |
E[attribute=value] | 用于選取帶有指定屬性和指定值的元素 |
E[attribute~=value] | 用于選取屬性值包含指定值的元素，該值必須是整個單詞，可以前后有空格 |
E[attribute\|=value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞或者后面跟著連字符“-” |
派生選擇器根據(jù)元素在其位置的上下文關系定義樣式
派生選擇器分3種：后代選擇器，子元素選擇器，相鄰兄弟選擇器
后代選擇器是某元素后代的所有元素。
子元素選擇器是相對于父元素的第一級子元素符合條件。
相鄰兄弟選擇器，針對的元素是同級元素，擁有相同的父元素，且兩個元素是相鄰的。
id選擇器，以特定id值的HTML元素指定樣式。
類選擇器，以指定class的HTML元素指定樣式。
偽類選擇器
偽類選擇器：偽類選擇器和偽元素選擇器
偽類以冒號(:)開頭，元素選擇符和冒號之間不能有空格，偽類名中間也不能有空格。
css中常用的偽類如下表所示：
| 偽類名 | 說明 |
|---|---|
:active | 向被激活的元素添加樣式 |
:focus | 向擁有輸入焦點的元素添加樣式 |
:hover | 向鼠標懸停在上方的元素添加樣式 |
:link | 向未被訪問的鏈接添加樣式 |
:visited | 向已被訪問的鏈接添加樣式 |
:first-child | 向元素添加樣式，且該元素是它的父元素的第一個子元素 |
:lang | 向帶有指定lang屬性的元素添加樣式 |
偽元素選擇器
css中常用的偽元素如下表所示：
| 偽元素名 | 說明 |
|---|---|
:first-letter | 向文本的第一個字母添加樣式 |
:first-line | 向文本的第一行添加樣式 |
:after | 在元素之后添加內(nèi)容 |
:before | 在元素之前添加內(nèi)容 |
css背景屬性如下：
| 屬性 | 說明 |
|---|---|
background-color | 定義背景顏色 |
background-image | 定義背景圖片 |
background-repeat | 定義背景圖片是否重復以及其重復方式 |
background-attachment | 定義背景圖片是否跟隨內(nèi)容滾動 |
background-position | 定義背景圖片的水平位置和垂直位置 |
background | 可以用一條樣式定義各種背景屬性 |
background-color用于設置背景顏色，初始值為transparent透明色。
顏色取值3種如：顏色名，十六進制顏色，rgb函數(shù)。
background-image用于設置元素的背景圖片，默認值為none。
background-repeat控制圖像的平鋪。
background-repeat默認值為repeat，即圖像沿著x軸和y軸平鋪，還可以指定沿著x軸平鋪rpeat-x，沿著y軸平鋪repeat-y，或者不平鋪no-repeat，繼承父元素該屬性設置inherit。
background-attachment用于設置背景圖像是否固定或者隨著頁面的其余部分滾動。默認值為：scroll，表示可以隨著頁面其余部分的滾動而滾動。設置fixed，表示當頁面其余部分滾動時，背景圖片不會滾動，設置inherit，繼承父元素。
background-position用于設置背景圖像圓點的位置。
background可以將background-color，background-position，background-attachment，background-repeat，background-image全部設置。
css常用字體屬性表：
| 屬性 | 說明 |
|---|---|
font-family | 定義文本的字體系列 |
font-size | 定義文本的字體尺寸 |
font-variant | 定義是否以小型大寫字母的字體顯示文本 |
font-style | 定義文本的字體是否是斜體 |
font-weight | 定義字體的粗細 |
font | 可以一條樣式定義各種字體屬性 |
font-family用于設置元素的字體，該元素屬性值一般可以設置多個字體。
font-size用于設置字體的尺寸。
font-style用于設置字體是否是斜體，默認值為normal，當設置為italic，顯示為一個斜體的樣式，當設置為oblique，顯示為一個傾斜的樣式。
font-variant用于設置字體使用小寫字體，默認為normal，一旦設置為small-caps，將所有小寫字母變?yōu)榇髮憽?/p>
font-weight用于設置字體的粗細，normal值等于400，bold的值等于700。
font，可以設置font-family,font-size,font-style,font-variant,font-weight。
css文本屬性表：
| 屬性 | 說明 |
|---|---|
color | 文本顏色 |
direction | 文本方向或者書寫方向 |
letter-spacing | 字符的間距 |
line-height | 文本的行高 |
text-align | 文本的水平對齊方式屬性,設置元素中文本的水平方式，值有left，right，center，inherit。 |
text-decoration | 給文本添加修飾效果，值有underline為添加下畫線，overline添加上畫線，line-through添加刪除線，blink添加閃爍的效果,none無如何修飾,inherit。 |
text-indent | 定義文本的首行縮進方式，默認值為0 |
text-shadow | 為文本添加陰影效果 |
text-transform | 切換文本的大小寫 |
white-space | 設置如何處理元素內(nèi)的空白 |
word-spacing | 定義單詞之間的距離 |
css尺寸屬性表：
| 屬性 | 說明 |
|---|---|
width | 設置元素的寬度 |
min-width | 設置元素的最小寬度 |
max-width | 設置元素的最大寬度 |
height | 設置元素的高度 |
min-height | 設置元素的最小高度 |
max-height | 設置元素的最大高度 |
css列表屬性表：
| 屬性 | 說明 |
|---|---|
list-style-image | 設置列表項標記樣式為圖像，none/inherit/url |
list-style-position | 設置列表項標記的位置，inside/outside/inherit |
list-style-type | 設置列表項標記的類型 |
list-style | 可以用一條樣式定義各種列表屬性 |
list-style-type
| 值 | 說明 |
|---|---|
disc | 實心圓 |
circle | 空心圓 |
square | 方塊 |
decimal | 數(shù)字 |
low-roman | 小寫羅馬數(shù)字 |
upper-roman | 大寫羅馬數(shù)字 |
low-alpha | 小寫字母 |
upper-alpha | 大寫字母 |
none | 無標記 |
inherit | 繼承父元素的該設置 |
css表格屬性表：
| 屬性 | 說明 |
|---|---|
border-collapse | 設置是否合并表格邊框 |
border-spacing | 設置相鄰單元格邊框之間的距離 |
caption-side | 設置表格標題的位置 |
empty-cells | 設置是否顯示表格中空單元格上的邊框和背景 |
table-layout | 設置用于表格單元格列寬的設置方式 |
css盒模型，包含元素內(nèi)容content，內(nèi)邊距padding，邊框border，外部距margin。
css內(nèi)邊距屬性，元素的內(nèi)邊距在邊框和內(nèi)容之間。
css內(nèi)邊距的屬性：
| 屬性 | 說明 |
|---|---|
padding-top | 元素的上內(nèi)邊距 |
padding-right | 元素的右內(nèi)邊距 |
padding-bottom | 元素的下內(nèi)邊距 |
padding-left | 元素的左內(nèi)邊距 |
padding | 用一個聲明定義所有內(nèi)邊距屬性 |
設置順序為上右下左依次進行。
padding: 10px 10px 10px 10px;
復制代碼css外邊距的屬性：
| 屬性 | 說明 |
|---|---|
margin-top | 定義元素的上外邊距 |
margin-right | 定義元素的右外邊距 |
margin-bottom | 定義元素的下外邊距 |
margin-left | 定義元素的左外邊距 |
margin | 用一個聲明定義所有外邊距屬性 |
css邊框的屬性：
| 屬性 | 說明 |
|---|---|
border-top-style | 上邊框的樣式屬性 |
border-right-style | 右邊框的樣式屬性 |
border-bottom-style | 下邊框的樣式屬性 |
border-left-style | 左邊框的樣式屬性 |
border-style | 設置4條邊框的樣式屬性 |
border-top-width | 設置上邊框的寬度屬性 |
border-right-width | 設置右邊框的寬度屬性 |
border-bottom-width | 設置下邊框的寬度屬性 |
border-left-width | 設置下邊框的寬度屬性 |
border-width | 設置4條邊框的寬度屬性 |
border-top-color | 設置上邊框的顏色屬性 |
border-right-color | 設置右邊框的顏色屬性 |
border-bottom-color | 設置下邊框的顏色屬性 |
border-left-color | 設置左邊框的顏色屬性 |
border-color | 設置4條邊框的顏色屬性 |
border-top | 用一條聲明定義所有上邊框的屬性 |
border-right | 用一條聲明定義所有右邊框的屬性 |
border-bottom | 用一條聲明定義所有下邊框的屬性 |
border-left | 用一條聲明定義所有左邊框的屬性 |
border | 用一條聲明定義所有邊框的屬性 |
border-width | 一次定義4條邊框的寬度 |
border-color | 一次定義4條邊框的顏色 |
邊框的樣式
none，無邊框效果
hidden，與none相同
dotted，點線邊框效果
dashed，虛線邊框效果
double，雙線邊框效果
solid，實線邊框效果
groove，3D凹槽邊框效果
ridge，3D凸槽邊框效果
css輪廓是繪制在元素周圍的一條線，位于邊框邊緣的外圍，起到突出元素的作用。
| 屬性 | 說明 |
|---|---|
outline-style | 定義輪廓的樣式屬性 |
outline-color | 定義輪廓的顏色屬性 |
outline-width | 定義輪廓的寬度屬性 |
outline | 同一個聲明中定義所有的輪廓屬性 |
布局屬性是文檔中元素排列顯示的規(guī)則
布局方式3種：普通文檔流，浮動，定位
css浮動涉及到的屬性
| 屬性 | 說明 |
|---|---|
float | 設置框是否需要浮動以及浮動方向 |
clear | 設置元素的哪一側不允許出現(xiàn)其他浮動元素 |
clip | 裁剪絕對定位元素，該元素必須是絕對定位，上右下左原則 |
overflow | 設置內(nèi)容溢出元素框時的處理方式，值：visible,auto,hidden,scroll |
display | 設置元素如何顯示，值none,block,inline,inline-block,inherit |
visibility | 定義元素是否可見，visibility設置為隱藏，元素占用的空間依然會保留，但display:none不保留占用空間，值：visible,hidden |
css定位的屬性
| 屬性 | 說明 |
|---|---|
position | 元素的定位類型，值static,absolute絕對，relative相對 |
top | 元素上外邊距 |
right | 元素右外邊距 |
bottom | 元素下外邊距 |
left | 元素的左外邊距 |
z-index | 元素的堆疊順序 |
z-index用于設置目標對象的定位層序，數(shù)值越大，所在層級越高。該屬性只在position:absolute時有效。
??，?? coding? Love wife ??，love kids ??，love life ??，love code ?? .
聯(lián)系客服
