前端——HTML
HTML
HTML叫做超文本標記語言，是一種制作萬維網頁面標準語言。相當于定義一套規則，大家都來遵守它，這樣瀏覽器就可以去解釋它。
瀏覽器負責將標簽翻譯成用戶看得懂的格式，呈現給用戶。
作為開發者需要學習的：
1.學習HTML規則
2.從數據庫獲取數據，然后替換到HTML文件的指定位置（web框架）
HTML文檔
如果新建一個HTML文檔，編譯器會幫你自動寫好基本格式：
我們一一來看，他們是怎么回事
head? 標簽
1.Doctype
Doctype告訴瀏覽器使用什么樣的規范來解析文檔。這個屬性會被瀏覽器識別并使用，如果你的頁面沒有這個聲明，那么默認是標準兼容模式未開啟，瀏覽器會按照自己的方式去解析渲染頁面。這將是惡魔的開始。
2.Meta
meta標簽提供有關頁面的信息，例如頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞。
1.頁面編碼
charest=“utf-8”
2.刷新和跳轉
<meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次網頁
<meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 過5秒跳轉到某網頁。（關于跳轉，可以在應急的時候用，一般可以用js實現）
3.關鍵詞
<meta name="keywords" content="星際2，飛船，UFO，皮卡">? 關鍵字
4.描述
<meta name="description" content="為您提供最新的信息">? 網站描述
3.title
title標簽寫網站頭部信息，即網頁標簽的名稱
4.Link
link標簽有兩個作用：
1.設置標簽頁圖標：
<link rel="shortcut icon" href="image/favicon.ico">? # rel指的是類型，href是文件路徑，(image是存放圖片的文件夾)
2.外聯CSS文件
<link rel="stylesheet" type="text/css" href="css/common.css"> ?? # rel指的是類型，href是存放css文件的文件夾
5.style
在頁面中寫樣式
6.script
1.引進文件
<script type="text/javasvript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
2.寫js代碼
<script type="text/javascript">...</script>
以上都是head標簽，head標簽內的內容是不會顯示在界面上的(除了title)。接下來講body標簽
body標簽
標簽一般分為兩種：
1.塊級標簽
霸占一整行的標簽。比如：<h>,<p>,<div>,<form>,<table>,<ul>,<ol>等
2.行內標簽
可以多個標簽共同占用一行的標簽。比如：<span>,<a>,<input>,<img>,<label>,<select>,<textarea>,<img>,<br>等
1.各種符號
使用字符編碼來代替某種符號，詳細對照表參照 http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
2.<p>標簽
段落標簽：<p>文字</p>，在里面的文字自成一個段落。段落之間會有間距，但換行沒有
3.<br>標簽
用于換行
4.<h>標簽
標題（自動加大加粗），分為1~6等級，h1最大，h6最小。書寫：<h1>標題</h>
5.<span>標簽
白板，本身沒有特性，行內標簽。
6.<div>標簽（最最常用）
白板，本身沒有特性，塊級標簽。
7.<a>標簽
1.做鏈接。<a href="http://www.baidu.com"? target="_blank"? title="點一下看看啊">你好</a>? # 頁面中點擊“你好”，跳轉頁面，參數target=_blank表示跳轉到新的標簽頁，title屬性作用：當鼠標懸浮時的提示信息。
2.錨點。用來記錄頁面瀏覽的位置。
<a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><a href="#i4">第四章</a><a href="#i5">第五章</a><div id="i1" style="height:600px;">第一章的內容 <p>緒論</p></div><div id="i2" style="height:600px;">第二章的內容 <p>公元500年</p></div><div id="i3" style="height:600px;">第三章的內容 <p>公園1000年</p></div><div id="i4" style="height:600px;">第四章的內容 <p>公元1900年</p></div><div id="i5" style="height:600px;">第五章的內容 <p>公元2010年</p></div><a>標簽默認的顯示樣式會有下劃線，如果看著不爽想要去掉，在a標簽樣式中設置：text-decoration:none;
8.<input>標簽
用來做用戶輸入、按鈕框，取決于type屬性
| type參數值 | 代表的類型 | 其他說明 |
| text | 單行文本輸入框 | 參數name便于后臺識別，value屬性是用戶輸入的文本值 |
| password | 密碼輸入 | name同上 |
| button | 按鈕 | value在按鈕上顯示的名稱 |
| submit | 提交按鈕 | value同上 |
| radio | 單選框 | name相同則互斥，value用來后臺識別，check=“checked”默認選中 |
| checkbox | 多選框 | name相同表明是同一類，value用來后臺識別，checked=“checked”默認選中 |
| file | 上傳文件 | name后臺識別，依賴form表單屬性enctype=“multipart/form-data” |
| reset | 重置按鈕 | value按鈕名稱 |
另外，input標簽還有placeholder屬性，該屬性可在輸入框內顯示提示信息，需要注意的是：placeholder 屬性適用于下面的 input 類型：text、password、search、url、tel 和 email。當然這個屬性的功能可以用DOM和jQuery來實現。
示例：
<form action="" method="get"> <input type="text" name="user" plcaeholder="提示信息"> <!-- name是標簽名，便于后臺識別 --><input type="text" name="emil"><input type="password" name="password"><input type="button" value="登錄"><input type="submit" value="登錄吧"> </form> <form enctype="multipart/form-data"><p>請選擇性別</p>男：<input type="radio" name="gender" value="1"> <!--name相同則互斥，value用來后臺識別-->女：<input type="radio" name="gender" value="2">alex：<input type="radio" name="gender" value="3"><p>愛好</p>籃球<input type="checkbox" name="favor" value="1"> <!--name相同表示同一類，value用于后臺識別-->足球<input type="checkbox" name="favor" value="2">臺球<input type="checkbox" name="favor" value="3">羽毛球<input type="checkbox" name="favor" value="4"><p>技能</p>寫代碼<input type="checkbox" name="skill" value="1">唱歌<input type="checkbox" name="skill" value="2"><p>上傳文件</p><input type="file" name="fname"><p>說說你的優勢</p><textarea name="meno">可以設置默認值的多行文本框</textarea><p>選擇你的地址</p> </from>9.<form>標簽
表單，可以將用戶操作的內容提交到服務器。參數：action指向提交地址，method指明使用哪種方式提交。
method有兩種方式：get和post。提交后臺時會發送兩部分數據：請求頭和請求體。get方式是將內容放在了請求頭，所以會顯示在url上，post將內容放在了請求體。此外，get方式對提交內容的長度有限制，必須在1K之內，而post沒有。
entype="multipar/form-data"設置該屬性可以上傳文件。
10.<textarea>標簽
是一個多行輸入框，與上面不同的是，它可以設置默認值。value 為文本內容
<textarea name="">默認值在這里</textarea>
11.<select>標簽
選擇框。如果屬性設置multiple="multiple" size="3"，表示選擇框只能同時顯示三項。<option>內的 value 為后臺識別，innerText為文本內容
<p>選擇你的地址</p><select name="city"><option value="1" selected="selected">北京</option> <!-- selected 默認選項 --><option value="2">深圳</option><option value="3">上海</option><option value="4">杭州</option><option value="5">成都</option></select> <p>請選擇籍貫</p><select name="jiguan"><optgroup label="河北省"><option value="1">石家莊</option><option value="2">保定</option><option value="3">邯鄲</option></optgroup><optgroup label="湖南"><option>長沙</option><option>株洲</option><option>湘潭</option></optgroup><optgroup label="廣東"><option>廣州</option><option>深圳</option><option>佛山</option><option>珠海</option><option>中山</option></optgroup></select>12.<img>標簽
用來顯示圖片，屬性style中可以設置圖片大小，alt可以在圖片無法加載的時候進行提示。<image>也有title屬性，和a標簽一樣也是顯示提示信息。
13.<label>標簽
通常與input輸入框一起用。它本身是個普通的白板，與<span>沒什么區別，但它為鼠標用戶提供了可用性：如果點擊<label>標簽，就會自動將焦點轉到和標簽相關的表單控件上，這需要for屬性。例如：點擊輸入框前面的文字，也可以啟用輸入框編輯。
有兩種方法聯系起來兩個標簽：顯式和隱式。
1.顯示的聯系<label for="username">用戶名：</label><input id="username" type="text" name="user"> 2.隱式的聯系<label>用戶名2: <input type="text" name="user2" /></label>14.列表
ul? ol? dl三種。ul中沒有編號，ol有編號，dl中<dt>可以作為大標號，<dd>作為小標號
<ul><li>asdf</li><li>asdf</li><li>asdf</li></ul><ol><li>asdfe</li><li>asdfe</li><li>asdfe</li></ol><dl><dt>asfas</dt><dt>sdfas</dt><dd>safsd</dd><dd>safsd</dd><dd>safsd</dd></dl>15.<table>標簽
制作表格，<table>標簽內可以分成兩部分，<thead>表頭和<tbody>表格內容區。表頭會自動加粗居中，在表格內容區，<tr>表示行，<td>表示列。
屬性：border 表格邊框，cellpadding 內邊距，cellspacing 外邊距，rules規定內部邊框哪些是可見的：rows只顯示行間邊框、cols只顯示列間邊框、all顯示所有行列邊框。
如果想要對每一行統一管理，可以為<tr>寫css樣式，如果需要對列進行統一管理，需要用到<colgroup>標簽
<table>內的<colgroup>標簽，方便為表格中的列進行管理。可以包含<col>標簽。屬性：
align? ?定義在列組合中內容的水平對齊方式：right，left，center，justify，char。
valign 定義列中內容的垂直對齊方式：top，middle，bottom，baseline。
span? ?規定橫跨的列數
width? 設置列寬
char? ? ?規定由那個字符來對齊列中的內容
<colgroup><col width="4%"><col width="5%"><col width="10%"><col width="10%"><col width="8%"><col width="8%"><col width="8%"><col width="4.5%"><col width="4.5%"><col width="4.5%"> </colgroup> // 一個有10列的表格，分別為每一列設置寬度合并單元格：
colspan橫向合并，要注意去除多余的列
rowspan縱向合并，要注意去除多余的行
<table border="1"><thead><tr><th>地址</th><th>性別</th><th>姓名</th><th>其它</th></tr></thead><tbody><tr><td>石家莊</td><td>男</td><td colspan="2">歐沃</td></tr><tr><td>保定</td><td>女</td><td>alex</td><td rowspan="2">1</td></tr><tr><td>株洲</td><td>男</td><td>alxe</td></tr><tr><td>長沙</td><td>男</td><td>森馬</td><td>1</td></tr></tbody></table>16.<fieldset>標簽
這個用的很少，看看效果圖就懂了
<fieldset><legend>登錄</legend><p>用戶名</p><p>密碼</p> </fieldset>17.<hr>標簽
分割線
CSS
CSS是英文Cascading Style Sheets的縮寫,稱為層疊樣式表，用于對頁面進行美化。
存在方式有三種：元素內聯、頁面嵌入和外部導入，比較三種方式的優缺點。
語法：style = "key1:value1;key2:value2;"
- 在標簽中使用 style="xx:xxx;"（任何一個標簽都可以使用style屬性來編寫樣式）
- 在頁面中嵌入 < style type="text/css" href="css文件路徑" rel="stylesheet"> </style > 塊(rel可省略)
- 導入外部css文件<style> @important"yangshi.css"? </style> 引號內路徑是url的格式
- 導入式會在網頁裝載完后再裝載CSS文件，嵌入式在網頁主體裝載前裝載CSS文件，因此顯示出來的網頁一開始就是帶樣式效果的，不會像導入式先顯示無樣式網頁再顯示有樣式網頁。這是頁面嵌入方式的優點。
必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員則必須知道是如何實現的。
CSS選擇器（編寫CSS樣式）
選擇器指的是，在<head>標簽中的<style>標簽中編寫樣式（或在CSS文件中編寫），在<body>內的標簽來選擇已經寫好的樣式，提高了重用率，減輕了body中的代碼臃腫。
一、基本選擇器
?1.id選擇器(不建議用)
樣式編寫以#開頭，標簽選擇用id屬性，每個標簽使用的id都不能相同（唯一配對）
#名稱{? ?........? ?}
<標簽 id="名稱">
2.標簽選擇器
如下所示，將所有div標簽設置成此樣式。
div{? ……??}
3.class樣式選擇器(最常用)
樣式編寫以 . 開頭，可以使用相同的設置
.名稱{? ?........? ?}
<標簽 class="名稱">
4.通用選擇器
使用*選擇所有元素
*{color:black}
二、組合選擇器
1.并集選擇器
并列關系，用逗號隔開
.c1,.c2,div{? ?………? ?} ?
<!-- class="c1" 或 class="c2" 或 所有div標簽都能應用此設置-->
2.層級選擇器（后代選擇器，常用）
樣式的選擇具有層級關系，類似于目錄(用空格隔開)
span div{??………??}? ?<!--所有span標簽內的div標簽應用此設置-->
.c1 div{? ?………? ?}? ??<!--應用c1的標簽內的div標簽應用此設置-->
.c1 .c2{? ?………? ?}? ? <!--應用c1的標簽內的標簽才能應用此設置-->
div>p{ …… } 兒子選擇器：從div的子標簽中找到p標簽，設置樣式 div + p{ ....... } 毗鄰選擇器：匹配所有緊鄰div元素之后的同級p元素三、屬性選擇器
先做一遍篩選，對篩選出來的標簽根據屬性再做篩選，并設置該樣式
格式：標簽名 [ 屬性 = "值" ]{ …編寫的樣式… }
如：input[name="alex"]{width:10px;height:20px;} ? ? ? ? ?? <!-- 先篩選出來所有input標簽，再篩選出來屬性name為alex的標簽，設置樣式 -->
.c1[type="password"]{height:40px;width:30px;} ? ? ?? <!-- 先篩選出來所有應用c1樣式的標簽，再篩選屬性type為password的標簽，設置樣式 -->
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; } E[att=val] 匹配所有att屬性等于“val”的E元素 input[type=”text”] { background-color:#f00; } E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素 td[class~=”name”] { color:#f00; } E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}四、偽類選擇器
?CSS偽類是用來給選擇器添加一些特殊效果。
a:link{ ... }? ? ? ? ?沒有訪問的超鏈接的樣式
a:visited{ ... } 訪問過的額超鏈接的樣式
a:hover{ ... }? ? ? 鼠標懸浮在標簽上方的樣式
a:active{ ... }? ? ? 鼠標點擊瞬間的樣式
input:focus{ ... } input輸入框獲取焦點時的樣式
:before{ ... }? ? ? ?在元素內容前面插入新內容
:after{ ... } 在元素內容后面插入新內容
:first-letter{ ... }? 為文本首字母設置特殊樣式
在定義a標簽樣式時，因為瀏覽器按照就近原則來解釋css，定義的順序不同，顯示的效果就不同。正確的順序是：a:link 、a:visited 、a:hover 、a:active
<style type="text/css">a:link{color: red;}a:visited {color: blue;}a:hover {color: green;}a:active {color: yellow;}p:before{content:"hello";color:red}p:after{ content:"hello"；color:red} </style><body><a href="01-hello-world.html">hello-world</a><p>你好</p> </body>偽類標簽還可以這樣用：
<head>/*當鼠標移動到應用menu樣式的標簽上時，它下面應用b的標簽應用一下樣式*/.pg-head .menu:hover .b{color: red;} </head> <body><a class="menu"><span class="b">1024</span></a> </body>注意：必須是<a>標簽內的子標簽才可以應用，如果改成<a class="menu b">，企圖將以上樣式應用于自己本身是無法實現的
五、CSS優先級和繼承
CSS優先級：
應用的優先級，按照選擇器的權重規則來決定。當權重相同時，按照就近原則：style內聯?> 書寫距離近 > 書寫距離遠。
內聯樣式權重為 1000 ID選擇器權重為 100 class選擇器權重為 10 元素選擇器權重為 1 權重計算永不進位例如：
<head><style>.c1{background:red;color:white;}.c2{background:black;font-size:58px;color:black;}.h1 .h_logo{display:inline-block;font-size:2.7rem;line-height:50px;color:red;}#i1{color:black;}</style> </head> <body><div class="c1 c2" style="color:green">wooohoo</div><div class="h1"><div id="i1" class="h_logo">nihao</div></div> </body><!-- c1和c2權重相同 color屬性根據就近原則被應用綠色，background屬性被應用黑色 --> <!-- h_logo權重為20，i1權重為100，color應用黑色 -->CSS的繼承
繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。例如body中定義了字體顏色，它也會應用到字標簽的文本中。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。因此任何顯示申明的規則都可以覆蓋其繼承樣式?！?/span>
此外，CSS繼承也是有限制的，有一些屬性不能被繼承，如：border，margin，padding，background等。
另外：!important 聲明方式強制樣式生效，不推薦使用，因為大量使用 !inportant 的代碼是無法維護的。如果!important聲明沖突，則比較優先權。
基本樣式
標簽大小
高度： ? ? ? ?? height
寬度： ? ? ? ?? width
最小寬度： ? min-width ? <!--當瀏覽器窗口縮小到一定程度時，可能會導致頁面混亂，設置最小寬度可以避免這個問題-->
字體文本
字體：? ? ? ? ?font-famliy:?"Microsoft Yahei", "微軟雅黑", "Arial";? ? ?如果系統不支持第一個字體，會嘗試下一個。
文本大小：? ?font-size：20px / 50% / 1rem；
字體粗細： ? font-weight? ? ? ? ?取值：normal(默認值)，bold粗體(700)，bolder(更粗)，lighter(更細)，設置具體值(100-900)
字體顏色：? ?color? ? ? ? ? ? ? ? ? ? 取值：①十六進制值：＃FF0000；②顏色名稱：red；③RGB值：rgb(255,0,0)；④RGBA值：rgba(255,0,0,0.5)
水平對齊： text-align? ? ? ? ? ? 取值：left(默認)，right，center，justify(兩端對齊)
行高： ? ? ? ?line-height? ? ? ? ?可以調整水平居中：標簽多高，這里就要設置多高
垂直對齊：? ?vertical-align? 設置元素的垂直對齊方式，只對行內元素有效。常用值：top，text-top，bottom，text-bottom，middle，像素值，百分比。
文字裝飾： text-decoration? ? 取值：none(默認)，underline(文本下劃線)，overline(文本上劃線)，line-through(穿過文本的一條線)
字體的風格：font-sytle? ? ? ? ? ? ? 取值：normal，italic(斜體)，oblique(傾斜)
首行縮進： text-ident ? ?取值：像素值，百分比。
字符間距：? ?letter-spacing 取值：normal，像素值。
字間距： word-spacing 取值：normal，像素值。
控制文本大小寫：text-transform? 取值：none(默認)，capitalize(單詞首字母大寫)，uppercase(全部大寫)，lowercase(全部小寫)
文本陰影效果：text-shadow???? 取值：h(必需)水平陰影的位置，v(必需)垂直陰影的位置，blur模糊的距離，color陰影的顏色。例：text-shadow: 1px 3px 5px #FF0000;
換行： word-break? ? ? ? ? 取值：normal(瀏覽器默認的換行規則)，break-all(允許在單詞內換行)，keep-all(只能在半角空格或字符處換行)
word-wrap 取值：normal(瀏覽器默認的換行規則)，break-word(允許長單詞或url地址內部換行)
瀏覽器默認換行規則：中文自動換行，英文數字以單詞為最小單位(空格間隔)自動換行，如果一連串字符沒有空格，瀏覽器認為它是一個單詞不予換行。
關于RGB(A)色彩模式：rgba(red,green,blue,alpha) ，其中alpha取值0~1，表示透明度。red，green，blue三個參數取值0~255，也可用百分比。色彩模式與RGB相同（通過對紅綠藍三個顏色通道的變化和他們相互之間的疊加來得到各式各樣的顏色。（0，0，0）表示黑色，（255，255，255）表示白色）
背景? background
background 分為以下幾類：
background-color? ? ??? ? ? ? 背景顏色設置為紅色 如：background-color:red;
background-image ?????????? 設置背景圖片 如：background-image::url("image/4.jpg");
background-size 設置背景圖片的尺寸，有三類可選的值：寬高（px值或百分比，1或2個值）、cover、contain。如：background-size:10px 10px;
background-repeat? ? ? ? ? ? 如果設置了背景圖片，這個屬性則可以設置重復平鋪。默認是no-repeat不平鋪。還可以設置repeat表示背景圖片橫向縱向都平鋪。 repeat-x表示只在橫向平鋪，repeat-y表示只在縱向平鋪。
background-position???????? 設置背景圖片的起始位置。如：background-position：center | right bottom | top center | left bottom | 10% 20% | 50px 60px 。
background-origin???????????? 規定background-position屬性相對什么來定位。值：padding-box | border-box | content-box ，分別表示相對于內邊距框定位、相對邊框定位、相對內容框定位。
background-clip 規定背景的繪制區域，值：border-box | padding-box | content-box ，分別表示背景被剪裁到邊框、內邊距框，內容框。
background-scroll 規定背景圖像是否固定或隨頁面滾動。 值：scroll(默認)隨著滾動，fixed圖像不會移動。
注意：如果將背景圖片加在body上，要設置body的高度，否則無法撐起背景圖片。
邊框? border
樣式：border: 寬度 樣式 顏色? 。樣式中：dotted表示點線，dashed表示虛線，solid表示實線
如：border：2px dotted red;? <!-- 2像素寬度，虛線，紅色 -->
可以拆分成：border-width :2px；border-style :dotted；border-color :red；
border-radius:50% <!--可將圖片變成圓形(如果長寬一致)，數值可以是百分比或像素值，兩者效果不完全一樣-->
列表屬性
針對ul，ol的設置，list-style 是一個簡寫屬性，包括了list-style-type，list-style-position，list-style-image
list-style-type：設置列表項標記的類型。none(無標記)，disc(默認，實心圓)，circle(空心圓)，square(方塊)，decimal(數字)......等等。
list-style-position：設置在何處放置列表項標記。inside(放在文本內)，outside(默認值，放在文本的左側)
list-style-image：使用圖像來替換列表項的標記。（請始終規定一個list-style-type屬性以防圖像不可用）URL(圖像的路徑)，none(默認，無圖像)
display
可以將標簽設為行內或塊級屬性。設置 inline 為行內，設置 block 為塊級。
如果設置 inline-block 則同時具有：
inline的屬性：默認自己有多少空間占多少空間
block的屬性：可以設置高度，寬度，邊距 ? ? ?（ 行內標簽不能設置高度和寬度，而塊級標簽可以）
值為none，則隱藏標簽，不顯示也不占據頁面空間。
※ inline-block的間隙
<style>a{display: inline-block;background-color: #2459a2;width: 100px;height: 100px;}</style><a>111</a> <a>222</a> <a>333</a>(1) 我們可以通過margin:-3px來解決，但是
1.我們布局肯定很多元素，不可能每個都添加margin負這樣維護成本太大了
2.我們線上代碼如果壓縮，那么我們就不存在哪個4px的問題了，那么我們的margin負就回造成布局混亂！
(2)我們可以給幾個標簽加一個父級div，然后：
div{word-spacing: -5px;} 設置字間距visibility?
該屬性可設置元素是否可見，與display：none不同的是，visibility：hidden會不可見，但占據頁面空間。
值：visible 默認值，可見的。
hidden 隱藏
內邊距和外邊距（margin padding）
外邊距 margin? ? 用于控制元素與元素之間的距離。當margin值增加時，與父標簽上左右距離增加，標簽本身的大小被強制變化。但如果單獨設置某一邊距時，標簽大小不會變化（margin-top 上邊距，margin-left 左邊距，margin-right 右邊距，margin-bottom 下邊距。）
內邊距 padding??用于控制內容與邊框的距離。當padding值增加時，將會改變本身的大小（padding-top，padding-left，padding-right，padding-bottom是常用的方法）。
※ 重要：當指定一個標簽的寬高度時，設置的只是內容區的大小。實際標簽的大小，還要加上邊距和邊框。
margin:10px 5px 15px 20px;-----------上 右 下 左 margin:10px 5px 15px;----------------上 右左 下 margin:10px 5px;---------------------上下 右左 margin:10px; ---------------------上右下左 常用： margin: 0 auto; 表示與父標簽上邊距為0，左右居中。下面的例子中的元素的總寬度為300px：
width:250px; padding:10px; border:5px solid gray; margin:10px; ※ 思考：邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下，body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，解決方法：body{ margin:0; }
※ 思考：邊界重疊（margin collapse）
外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段 ? ? 落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。又比如停車場。
兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值。
父子div：如果父標簽沒有設置內邊距padding、邊框border、文本內容inline content。子標簽與父標簽之間將不會體現外邊距(即使設置)，字標簽的margin將會一直向上找，直到找到某個標簽有padding、border、inline content中的任何一個，將外邊距體現在這里。
例子：
<!DOCTYPE html> <html lang="en" style="padding: 0px"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0px;}.div1{background-color: aqua;width: 300px;height: 300px;}.div2{background-color: blueviolet;width: 100px;height: 100px;margin: 20px;}</style> </head> <body><div style="background-color: cadetblue;width: 300px;height: 300px"></div><div class="div1"><div class="div2"></div><div class="div2"></div></div></body> </html>解決方法：
父子div： 1.父標簽設置透明邊框 border:1px solid transparent;2.父標簽設置內邊距 padding:1px;3.在父標簽內加文本內容4.給父標簽設置overflow:hidden 兄弟div：1.float浮動 2.display:inline-block浮動 float
首先了解塊級元素和行內元素在文檔流中的排列方式
block塊級元素：
block元素獨占一行，每個塊級元素會各自新起一行，默認塊級元素寬度會填滿父標簽寬度。
block元素可以設置寬高、內外邊距。
inline行內元素：
行內元素不會獨占一行，多個行內元素會共同存在一行。
不能設置寬高，可以設置水平方向padding、margin，不能設置垂直方向padding、margin。
文檔流，指的是元素排版布局過程中，元素會自動從左向右，從上到下的流式排列。
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位
只有絕對定位position：absolute/fixed和浮動float才會脫離文檔流。
部分無視和完全無視的區別？
需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對于使用absolute?position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)
浮動的表現
? ? ? 定義：浮動的框可以向左或向右浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的標準流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（float只對塊級元素起作用）
注意 當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。
清除浮動 clear
? 語法：
?????? clear : none | left | right | both
?????? 取值：
?????? none? :? 默認值。允許兩邊都可以有浮動對象
?????? left?? :? 不允許左邊有浮動對象
?????? right? :? 不允許右邊有浮動對象
?????? both? :? 不允許有浮動對象
上面的定義非常容易理解，但是讀者實際使用時可能會發現不是這么回事。 定義沒有錯，只不過它描述的太模糊，讓我們不知所措。
案例：先寫一個<div>大方塊背景灰色，里面有三個小方塊<div>從左到右背景分別是紅、綠、藍。如果不浮動，三個方塊分別占三行。現在給三個小方塊都加上樣式 float:left; 它們會依次從左到右排列，并且共占一行。
如果我現在想要使紅色方塊右邊的方塊清除掉，按照我們的想法就是給紅色設置 clear:right; 然而卻并沒有任何效果。正確的用法是給綠色設置 clear:left;
所以一定要牢記：對于CSS的清除浮動規則，只能影響使用清除元素的本身，不能影響其它元素。
我們明白了如何用，那它的獨特之處在哪里？如果現在有需求：要求綠色不浮動，它的上下都有標簽要浮動，怎么實現呢？
如果直接刪除綠色的float:left;代碼，會發現，綠色被藍色覆蓋了。是因為塊級標簽一旦浮動，會脫離標準流，位于標準流的上層。解決辦法是，在刪除綠色的float代碼后加上clear:left;即可?？瓷先ト齻€方塊一次縱向排列，好像沒有設置什么屬性，實際上紅色和藍色可以和其他標簽浮動堆疊，綠色不可以。
還有一個場景非常實用：在剛才的示例基礎上，把灰色塊的高度設置刪掉，界面上灰色會消失，此時的需求是：使父標簽包裹住所有子標簽。怎么做呢？ ? 只需要在父標簽內最底部再寫一個<div>標簽，樣式設置 clear:both; 即可。
父標簽緊緊包裹住字標簽且不需要設置父標簽高度（清除浮動）
<div style="width:500px;background:#b0b0b0;"><div style="width:80px;height:80px;float:left;background:red;"></div><div style="width:80px;height:80px;float:left;background:green;clear:left"></div><div style="width:80px;height:80px;float:left;background:#2b2ba8;"></div><div style="clear:both"></div></div>清除浮動方式2（推薦）：
.clearfix:after { <----在類名為“clearfix”的元素內最后面加入內容； content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。 display: block; <----加入的這個元素轉換為塊級元素。 clear: both; <----清除左右兩邊浮動。 visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已； line-height: 0; <----行高為0； height: 0; <----高度為0； font-size:0; <----字體大小為0； }整段代碼就相當于在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。之所以用它，是因為我們不必在html文件中寫入大量無意義的空標簽，又能清除浮動。?話說回來，第一種方式的代碼不利于維護。?只要在需要清浮動的元素中添加 clearfix 類名就好了。?
如：
<div class="head clearfix"></div>清除浮動方式3：
overflow:hidden;overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
位置 position
可以設置標簽的位置，經常與top、right、left、bottom聯用。一旦設置position屬性，此標簽將變成上一層覆蓋下一層。position的值分兩類：
- fixed ? ? ? ? ? ? ? ? ? ? ? ? ?? 固定在屏幕的某個位置（滑動滾輪，相對屏幕的位置不會動）
- relative + absolute ? ?? 固定在相對于父標簽的某個位置（單獨設置relative沒有任何效果，一般與absolute嵌套使用）
思考：當position為 relative + absolute時，它與margin系列的區別是什么？
1. margin是基于父標簽調整位置，依賴于父標簽；position是基于整個頁面調整位置（單獨absolute），當然也可以基于父標簽調整。
2. 用margin，如果兩個同級標簽位置不夠占，其中一個會將另一個擠到下一行，永遠屬于同一個圖層。而如果設置position，它會分層，覆蓋下一層。
在設置position時需要注意：
1. 一旦設置position后，必須設置位置（top,left,right,bottom）,否則根本無法顯示標簽。
2. 如果出現分多層，可以使用 z-index 來設置層級順序，數值越大層級越高。設置該 z-index 的標簽會覆蓋沒設置的。
3. 若要將position:fixed的標簽居中，則應top:50%;left:50%;且上邊距為 -(標簽高度)÷2 ; 左邊距為 -(標簽寬度)÷2;
透明度?opacity
opacity的值在[0,1]區間內，0為完全透明，1為完全不透明。
在使用過程中，我們的需求可能是想要將背景做透明處理，但設置opacity后此標簽內的所有內容也一并被設置了透明度。
在這里提供兩種解決辦法：
1. 為標簽添加一個絕對定位的子標簽，設置大小和該元素一樣，把opacity設置加在絕對定位標簽上作為遮罩，z-index設置到最底部，達到效果。
2. 使用CSS屬性rgba。
測試代碼，效果如下：
<div style="width:150px;height:100px;float:left;background-color:#ff0000;"><div>沒有設置透明度</div></div> <div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;opacity:0.5;"><div>用opacity設置透明度</div></div> <div style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5);"><div>用rgba設置透明度</div></div>overflow 限制顯示區域
規定當內容溢出元素框時發生的事情。值：
visible：默認值，內容會溢出。
hidden：超出范圍的內容不可見。
auto：如果超出范圍，會有滾動條。
scroll：無論是否有需要，都會有滾動條。
當父標簽內的<img>圖片大于父標簽，若想將其限制，不能超過父標簽的范圍。有兩種解決思路：
transition 漸變（過渡效果）
transition屬性可以產生過渡效果，通常在用戶將鼠標懸浮到元素上時發生。transition是一個簡寫屬性，可以拆分為四個：
transition-property：選定哪些CSS屬性獲得過度效果。值：none，all，名稱（多個屬性用逗號隔開）
transition-duration：完成過渡效果花費的時間（s或ms），默認值是0。注意：請始終設置此屬性，否則默認為0，不會產生效果。
trainsition-timing-funciton：規定過渡效果的速度曲線（隨著時間來改變其速度）。取值：linear（勻速），ease（始末慢，中間快），ease-in（逐漸變快），ease-out（逐漸變慢），ease-in-out（始末慢，中間快，不清楚和ease的區別）。cubic-bezier(n,n,n,n)。每個值都位于0~1之間。
trainsition-delay：規定過渡效果開始之前需要等待的時間（s或ms）。
簡寫為：transition：屬性，花費時間，速度曲線函數，開始時間。
※ 注意1：如果屬性沒有定義值，卻在:hover中定義，是不會產生過度效果的，即使在transition-property中特別指定。
※ 注意2：如果在簡寫模式中對第一個值寫入多個屬性，只對最后一個產生過渡效果。解決方法：在其下面單獨寫transition-property即可。如果想要對不同的屬性設定不同的過度時間，寫法與上相同。
例： transition：all 0.4s linear 0s；本博客文章標題
h1{width: 500px;height:50px;color:black;cursor:pointer;transition: all 0.4s linear 0s;/*transition: color 0.4s linear 0s;*//*transition-property: width,color;*/background-color: #9d9d9d; } h1:hover{color:#F60;margin-left: 20px;width: 1000px;/*height: 300px;*/ }<h1>這是標題</h1> 通過單獨解除注釋來了解【注意1】和【注意2】cursor 光標形狀
cursor屬性定義了鼠標放在標簽范圍內時所用的光標形狀。
常用值：pointer (一只手)，wait (表示程序正忙)，text (文本)，auto (默認)，no-drop、not-allowed（禁止樣式）。
box-shadow 陰影效果
該屬性可以給框添加一個或多個陰影，類似于text-shadow。主要值：
h-shadow：必需。水平陰影的位置。
v-shadow：必需。垂直陰影的位置。
blur：可選。模糊距離。
spread：可選。陰影的尺寸。
color：可選。陰影顏色。
如果添加多個陰影，用逗號分隔。如：box-shadow：2px 2px 3px black，5px 2px 1px red;
transform 2D/3D轉換
該屬性允許我們向元素應用2D/3D轉換，可進行旋轉、縮放或傾斜。該屬性的用法非常之多，這里只介紹兩個2D方法
scale(x,y) 2D縮放轉換：值：數字?？梢允且粋€數字，也可以是兩個。例：transform：scale(1.5);
rotate() ? 2D旋轉：值：旋轉角度。正值順時針旋轉，負值逆時針旋轉。例：transform：rotate(6deg);
初學者可能會遇到的問題：
1.CSS重用
css樣式可以放在<head>標簽中，也可以放在css文件中，link標簽引入即可。在編寫樣式時，如果樣式c1和c2中有相同的部分，或者有在其他地方被大量使用的部分，可以將這部分提取出來再寫個c樣式。
2.改變瀏覽器窗口大小，原本的頁面混亂
要注意：除個個別情況，必需設定固定寬度，一般都將寬度設置成百分比
3.在IE瀏覽器中可能會出現：用<a>標簽包裹的<img>圖片顯示出來會有藍色邊框。
解決辦法：樣式設置：border:0;
4.<input>標簽用戶輸入的內容若想提交到后臺，必須用<form>標簽包裹
5.圖標
- Font Awesome
http://www.fontawesome.com.cn/
- 阿里巴巴矢量圖庫
http://www.iconfont.cn/
- Gbtags
https://www.elegantthemes.com/blog/resources/elegant-icon-font
- ICONFINDER
https://www.iconfinder.com/
- LOGO園
http://www.logoyuan.com/
?6.如何使子元素相對于父元素居中？
這里有兩個使用的方法：①父元素position:relative，子元素position:absoulte;margin:auto;四邊的距離都為0。
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><style>.parent-center {/* 將position設置為absolute，使元素有可能相對于瀏覽器窗口定位 */position: absolute;/* 將margin設置為auto，使瀏覽器自動推算元素外邊距 */margin: auto;/* 將上下左右邊距（相對于父元素邊緣）全設為0，使瀏覽器推算出的外邊距上下、左右對應相等可以設置任何其他相等的值，但如果父元素小到不能容下任意一個方向的兩側邊距，元素也將不居中，所以推薦設為0 */left: 0;right: 0;top: 0;bottom: 0;}div.parent {position: relative;/* 父元素可以有絕對或相對大小，也可以僅由其內容決定其大小 */width: 50%;height: 200px;background-color: aquamarine;}div.child {/* 使用這種方法的元素必須有絕對或相對大小，否則瀏覽器推算出的margin將為0，元素將被拉伸，以適應父元素大小和四個邊距值 */width: 30%;height: 100px;background-color: antiquewhite;}</style> </head> <body><div class="parent"><div class="parent-center child"></div></div> </body> </html>②彈性盒布局
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><style>div.parent {/* 啟用彈性盒布局 */display: flex;/* 使子元素水平居中 */justify-content: center;/* 使子元素垂直居中 */align-items: center;width: 50%;height: 200px;background-color: aquamarine;}div.child {width: 30%;height: 100px;background-color: antiquewhite;}</style> </head> <body><div class="parent"><div class="child"></div></div> </body> </html>?
轉載于:https://www.cnblogs.com/V587Chinese/p/9379967.html
總結
- 上一篇： vue 使用sass 和less
- 下一篇： 涉猎