一：前端開發簡介
一、概述：前端開發是創建Web頁面或app等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框
架、解決方案，來實現互聯網產品的用戶界面交互。
二、發展過程：它從網頁制作演變而來，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是Web1.0時代的產物，早期網站
主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨着互聯網技術的發展和HTML5、CSS3的應
用，現代網頁更加美觀，交互效果顯著，功能更加強大。
二：HTML5
一、HTML簡介
HTML是超文本標記語言，是網頁的核心，是一種制作萬維網頁面的標准語言
二、HTML基本骨架
<!-- 文檔聲明，聲明當前文檔遵循HTML5規范 --> <!DOCTYPE html> <!-- 超文本標記語言文件的標記符 --> <html> <!-- 定義文檔的信息 --> <head> <!-- 定義文檔編碼格式 --> <meta charset="utf-8"> <!-- 定義文檔標題，顯示在網頁窗口的標題欄中 --> <title>MyHtml.html</title> </head> <!-- 實體標記，網頁中顯示的內容 --> <body></body> </html>
三、HTML常用標簽
1. 文檔信息標簽
<!-- 1、文檔信息標簽 --> <!DOCTYPE html> <html> <head> <!-- 1. 定義文檔標題 --> <title>文檔信息標簽</title> <!-- 2. 定義文檔編碼格式 --> <meta charset="utf-8"> <!-- 3. 定義文檔描述 --> <meta name="description" content="文檔信息標簽學習" /> <!-- 4. 定義文檔關鍵詞 --> <meta name="keywords" content="title標簽，meta標簽，link標簽，style標簽，script標簽" /> <!-- 5. 聲明CSS代碼域 --> <style type="text/css"></style> <!-- 6. 引入本地CSS樣式文件 --> <link rel="stylesheet" type="text/css" href="../css/百度百科.css"> <!-- 7. 聲明js代碼域 --> <script type="text/javascript"></script> <!-- 8. 引入本地js腳本文件 --> <script type="text/javascript" scr=""></script> <!-- 9. 引入網絡上的js文件 --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> <!-- 10. 為所有鏈接設置默認地址和打開方式 --> <base href="https://www.cnblogs.com/mh2013118" /> <base target="_blank" /> </head> <body></body> </html>
2. 文本標簽
<!-- 文本標簽 --> <!DOCTYPE html> <html> <head> <title>排版標簽</title> <meta charset="utf-8"> <style type="text/css"> #div{ width: 100px; height: 100px; background-color: red; } #span{ width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <!-- 1. 標題標簽 1. 作用：搜索引擎通過標題為網頁的結構和內容編制索引，h1最重要，應該作為主標題 2. 特點：加黑加粗，獨占一行，從1-6字體逐漸減小 --> <h1>博客園簡介 - 代碼改變世界 Coding Changes the World</h1> <!-- 2. 段落標簽 1. 作用：將文檔分段落 2. 特點：自動換行 --> <p> 博客園創立於2004年1月，是一個面向開發者的知識分享社區。自創建以來，博客園一直致力並專注於為開發者 <br /> 打造一個純凈的技術交流社區，推動並幫助開發者通過互聯網分享知識，從而讓更多開發者從中受益。博客園的 <br /> 使命是幫助開發者用代碼改變世界。 </p> <p> Cnblogs.com was founded in 2004. It is a knowledge-sharing community for developers. Our mission is to help <br /> developers change the world by coding. </p> <!-- 3. 文本格式化標簽 1. 水平線：<hr /> 2. 換行：<br /> 3. 空格： 4. 字體加粗：<b></b> 5. 字體傾斜：<i></i> 6. 下划線：<u></u> 7. 刪除線：<del></del> --> <hr /> <p> <b>Email</b> ：ad@cnblogs.com 或 bd@cnblogs.com <br /> <b>電話</b> ：0571-88079867（杭州） <br /> QQ：206423184 <br /> <u>廣告位示例</u> </p> <!-- 4. 容器標簽 --> <div id="div">我是一個div</div><br /> <span id="span">我是一個span</span> </body> </html>
3. 圖像和超鏈接標簽
<!-- 圖像和超鏈接標簽 --> <!DOCTYPE html> <html> <head> <title>圖像和超鏈接標簽</title> <meta charset="utf-8"> </head> <body> <!-- 1. 圖像標簽 alt：圖片加載不成功時的文字提示 title：圖片的標題，當鼠標懸停時會顯示 scr：圖片的資源路徑 --> <img alt="本地資源" src="../images/a.jpg" title="真帥"> <br /> <img alt="網絡資源" src="https://img2018.cnblogs.com/blog/1610676/201907/1610676-20190715125809080-934042040.png"> <br /> <!-- 2. 超鏈接標簽 href：要跳轉的資源路徑 name：指定錨點名稱 target：指明要跳轉的網頁資源的顯示位置 _selt：在當前頁面刷新顯示 _blank：在新的頁面顯示 _top：在頂層頁面顯示 _parent：在父級頁面顯示 --> <a href="https://www.cnblogs.com/mh20131118" target="_blank">網絡資源</a> <br /> <a href="簡歷.html" target="_blank">本地資源</a> <br /> <!-- 3. 錨點 1. 作用：在一張網頁中進行資源跳轉 2. 使用 1. 在需要的位置添加錨點 <a name="錨點名"></a> 2. 使用a標簽跳轉到指定的錨點 <a href="#錨點名">訪問方式</a>： href的值為#時，表示刷新當前頁，用來跳轉到頂部 --> <!-- 2. 跳轉到指定錨點 --> <a href="#button">底部</a> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!-- 1. 設置錨點 --> <a name="button"></a> <p>這是一個錨點</p> </body> </html>
4. 列表標簽
<!-- 列表標簽 --> <!DOCTYPE html> <html> <head> <title>列表標簽</title> <meta charset="utf-8"> </head> <body> <!-- 1. 無序列表： type值： 1. desc：小黑圓點，默認 2. cricle：空心圓點 3. square：小黑方塊 --> <h4>中國四大電商</h4> <ul type="circle"> <li><a href="https://www.taobao.com" target="_blank">淘寶</a></li> <li><a href="https://www.jd.com" target="_blank">京東</a></li> <li><a href="https://www.suning.com" target="_blank">蘇寧</a></li> <li><a href="https://www.pinduoduo.com" target="_blank">拼多多</a></li> </ul> <!-- 2. 有序列表 type值：A,a,I,i --> <h4>中國四大電商</h4> <ol type="A"> <li><a href="https://www.taobao.com" target="_blank">淘寶</a></li> <li><a href="https://www.jd.com" target="_blank">京東</a></li> <li><a href="https://www.suning.com" target="_blank">蘇寧</a></li> <li><a href="https://www.pinduoduo.com" target="_blank">拼多多</a></li> </ol> <!-- 3. 自定義列表 <dl> <dt>數據的標題</dt> <dd>數據的具體內容</dd> </dl> --> <h4>自定義列表</h4> <dl> <dt>淘寶</dt> <dd>馬雲</dd> </dl> </body> </html>
5. 表格標簽
<!-- 表格標簽 --> <!DOCTYPE html> <html> <head> <title>表格標簽</title> <meta charset="utf-8"> </head> <body> <!-- 1. <table>標簽：表格的標識 border：邊框 width：設置表格的寬度 height：設置表格的寬度 cellpadding：內容到單元格邊框的距離 cellspacing：每個單元格之間的距離 2. <tr>標簽：表示一行 height：設置此行表格的高度 3. <th>標簽：表頭單元格，加粗居中顯示 width：設置此列表格的寬度 4. <td>標簽：普通單元格，居左顯示 5. 單元格合並： 1. 首先確保表格是一個規整的 2. 找到要合並單元格的源碼位置 3. 合並 1. 列合並：在其中一個單元格中使用colspan="數量"屬性，刪除另一個要合並單元格 2. 行合並：在其中一個單元格中使用rowspan="數量"屬性，刪除另一個要合並單元格 6. <caption>標簽：表格的標題 --> <h4>創建一個4行4列的表格</h4> <table border="1px" cellspacing="0px" cellpadding="10px"> <caption>學生基本信息</caption> <tr> <th>學號</th> <th>班級</th> <th>姓名</th> <th>專業</th> </tr> <tr> <td>201901</td> <td rowspan="3">110191</td> <td>張三</td> <td rowspan="3">軟件工程</td> </tr> <tr> <td>201902</td> <td>李四</td> </tr> <tr> <td>201903</td> <td>王五</td> </tr> </table> </body> </html>
四、HTML5表單
<!-- 表單 --> <!DOCTYPE html> <html> <head> <title>表單</title> <meta charset="utf-8" /> </head> <body> <!-- 1. form表單標簽：按照method屬性指定的提交方式，將表單域數據提交給action屬性指定的地址 <form action="" method=""></form> action：表單域數據提交的地址 method：表單域數據提交的方式 2. form表單域標簽：按照鍵值對的方式提交表單域數據 1. 輸入文本：<input type="text" name="鍵名" id="" value="值" /> 2. 輸入密碼：<input type="password" name="鍵名" id="" value="值" /> 3. 單選按鈕：<input type="radio" name="鍵名" value="值" checked="checked(默認選擇)" /> 4. 復選框：<input type="checkbox" name="" value="" checked="checked(默認選擇)" /> 5. 選擇文件：<input type="file" name="" value="" /> 6. 輸入數字：<input type="number" name="" min="" max="" /> 7. 輸入日期：<input type="date" name="" min="" /> 8. 輸入顏色：<input type="color" name="" value=""> 9. 輸入電子郵件： <input type="email" name=""> 10. 搜索字段：<input type="search" name=""> 11. 輸入URL： <input type="url" name=""> 12. 單選下拉框： <select name="鍵名"> <option value="">內容</option> </select> 13. 文本域： <textarea name="鍵名" rows="行" cols="列"></textarea> 14. 預選列表：list屬性必須引用 <datalist> 元素的 id 屬性。 <input list="browsers" /> <datalist id="browsers"> <option value="Internet Explorer"> </datalist> 15. 提交按鈕：提交表單域數據 <input type="submit" value="按鈕值" /> 3. input屬性 1. value 默認值 2. readonly 規定輸入字段為只讀 3. disabled 規定輸入字段應該被禁用 4. max 規定輸入字段的最大值 5. min 規定輸入字段的最小值 6. maxlength 規定輸入字段的最大字符數 7. pattern 規定通過其檢查輸入值的正則表達式 8. required 規定輸入字段是必填 9. size 規定輸入字段的字符數 10. step 規定輸入字段的合法數字間隔 --> 用戶名： <input type="text" name="username" maxlength="10" /> <br /> 密碼： <input type="password" name="password" /> <br /> 性別： <input type="radio" name="sex" value="0" checked="checked" /> 男 <input type="radio" name="sex" value="1" /> 女 <br /> 愛好： <input type="checkbox" name="hobby" /> 打籃球 <input type="checkbox" name="hobby" /> 看電影 <input type="checkbox" name="hobby" /> 蹦迪 <br /> 籍貫： <select name="city"> <option value="上海">上海</option> <option value="北京">北京</option> <option value="廣東">廣東</option> <option value="深圳">深圳</option> </select> <br /> QQ： <input type="number" name="qq" required /> <br /> 郵箱： <input type="email" name="email" required /> <br /> 出身日期： <input type="date" name="birthday" required /> <br /> 期望工資： <input list="salary" /> <datalist id="salary"> <option value="5000"> <option value="6000"> <option value="7000"> </datalist> <br /> 個人說明： <textarea rows="10" cols="10"></textarea> </body> </html>
五、HTM5L新增標簽
<!DOCTYPE html> <html> <head> <title>HTML5新增標簽.html</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="新增標簽布局.css"> </head> <body> <!-- 傳統div布局：每個部分都使用div --> <!-- 頁頭 --> <div class="header">頁頭</div> <!-- 導航 --> <div class="nav">導航</div> <!-- 主體內容 --> <div class="main">主要內容 <!-- 文章 --> <div class="article">文章 <!-- 節 --> <div class="section">節</div> </div> <!-- 邊欄 --> <div class="sidebar"></div> </div> <!-- 頁腳 --> <div class="footer">頁腳</div> <!-- 新增布局標簽：每個標簽相當於一個div header：導航或者頁頭重要內容的容器 nav：導航 article：頁面的主體內容 section：頁面的重要內容 aside：表示一個相關鏈接 footer：版權信息 --> <!-- 頁頭 --> <header>頁頭</header> <!-- 導航 --> <nav>導航</nav> <!-- 主體內容 --> <main>主體內容 <article>文章 <section>節</section> </article> </main> <!-- 頁腳 --> <footer>頁腳</footer> <!-- 音頻標簽屬性 controls：標准插件 autoplay：是否自動播放，默認 false。 loop：是否循環播放，默認 false。 preload：預先加載的方式 none：表示不預加載 metadata：只加載音頻的元數據 auto：表示預加載整個音頻 volum：音量，值在 0 - 1 之間 var audio = document.getElementById('audio') // 播放 audio.play() // 暫停 audio.pause() --> <audio controls="controls"> <source src="../images/YSA - Baby Don't Go.mp3"> </audio> <!-- 視頻標簽屬性 controls：標准插件 currentTime：控制播放時間 width：視頻播放器的寬度 height：視頻播放器的高度 --> <video width="200px" height="200px" controls="controls" currentTime="5"> <source src="../images/YSA - Baby Don't Go.mp3"> </video> </body> </html>
@charset "UTF-8"; *{ margin-top: 20px; width: 400px; height: 100px; } /*傳統div布局*/ .header,header{ background-color: gray; } .nav,nav{ background-color: blue; } .main,main{ height: 200px; background-color: red; } .article,article{ height: 150px; width: 300px; background-color: aqua; position: absolute; letf: 50px; } .section,section{ width: 250px; background-color: orange; } .footer,footer{ background-color: fuchsia; }
三：CSS3
一、CSS3 簡介
CSS 指層疊樣式表 (Cascading Style Sheets)，在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。
二、CSS3 選擇器
<!DOCTYPE html> <html> <head> <title>選擇器</title> <meta charset="utf-8" /> <link rel="stylesheet" href="選擇器.css"> </head> <body> <!-- 選擇器 1. 標簽選擇器 1. 語法格式：標簽名{樣式1;樣式2...} 2. 作用：為一類標簽設置相同的樣式 3. 特點： 1. 所有的標簽都可以是選擇器 2. 為所有該標簽設置樣式，而不是一個 2. id選擇器 1. 語法格式：#id屬性值{樣式1;樣式2...} 2. 作用：為某個特定的標簽設置樣式 3. 特點： 1. 只能由字母、數字、下划線組成，且必須由字母開頭 2. 嚴格區分大小寫，且不能和標簽同名 3. id選擇器一般配合js使用 3. 類選擇器 1. 語法格式：.class屬性值{樣式1;樣式2...} 2. 作用：多個不同的標簽使用同一個樣式 3. 特點： 1. 類可以同時被多種標簽使用 2. 同一個標簽可以使用多個類 3. 不要用一個類去完成一個標簽的所有樣式，一個標簽的樣式應該由多個類共同完成 4. 類要盡可能的小，讓更多的標簽使用 5. class選擇器一般配合CSS使用 4. 屬性選擇器 1. 語法格式：標簽名[屬性名=...] 2. 作用：為標簽上指定的屬性設置樣式 3. 特點： 1. 可以設置匹配屬性名的樣式 2. 也可以設置匹配屬性值對應的屬性 5. 后代選擇器 1. 語法格式：選擇器A 選擇器B{樣式1;樣式2...} 2. 作用：設置某一部分(后代)樣式 3. 特點： 1. A和B之間用空格隔開，表示B是A的后代 2. 選擇的是后代，不一定是兒子 6. 子元素選擇器 1. 語法格式：選擇器A>選擇器B{樣式1;樣式2...} 2. 作用：為指定的兒子設置樣式 3. 特點：只在兒子層找 7. 並集選擇器 1. 語法格式：選擇器A,選擇器B,...{樣式1;樣式2...} 2. 作用：為所有選擇器設置相同樣式 --> <div> <h3>標簽選擇器</h3> <div id="div_01">屬性選擇器</div> <div class="div_02">類選擇器</div> <div class="div_02"> <p>這是一個<b>后代選擇器</b></p> </div> <div class="div_02"> <p>子元素選擇器1</p> <p>子元素<i>選擇器2</i></p> <p>子元素選擇器3</p> </div> <input type="button" value="按鈕"/> </div> </body> </html>
/*通用選擇器*/ *{ margin: 0; padding: 0; } /*標簽選擇器*/ h3{ color: red; } /*屬性選擇器*/ #div_01{ background-color: lime; } /*類選擇器*/ .div_02{ background-color: maroon; } /*后代選擇器*/ .div_02 b{ color: silver; } /*子元素選擇器*/ .div_02>p{ color: orange; } /*並集選擇器*/ #div_01,.div_02{ height: 100px; } /*屬性選擇器*/ input[value="按鈕"]{ color: red; }
三、CSS3 樣式
<!DOCTYPE html> <html> <head> <title>樣式.</title> <meta charset="utf-8" /> <link rel="stylesheet" href="樣式.css" /> </head> <body> <!-- 1. 背景 1. 設置背景顏色 background-color：顏色值或者顏色名 2. 設置背景圖片 background-image：url("圖片相對路徑") 3. 設置背景重復 background-repeat： no-repeat：不允許圖像重復 repeat-x：只在水平方向重復 repeat-y：只在垂直方向重復 4. 設置背景圖像的位置 background-position： 1. 屬性值：center、left、right、top 2. 百分比：左上角是0% 0% 右下角是100% 100% 3. 像素： 左上角是0 0, 右下角是100% 100% 5. 設置背景圖像的顯示 background-attachment： scroll：圖像會隨着鼠標滾動 fixed：圖像固定，設置背景圖像位置是必須開啟 2. 文本 1. 設置文本顏色 color：顏色名 2. 設置文本首行縮進 text-indent：字符數 3. 設置文本對齊方式 text-algin：center、left、right 4. 設置行高 line-height： 1. 數值：默認值是1 2. 像素：默認值是20px 3. 百分比：默認值是110%-120% 5. 向文本添加修飾 text-decoration： none：定義標准的文本，可去除超鏈接下划線 underline：定義下划線 overline：定義上划線 line-through：定義穿過文本下的一條線。 blink：定義閃爍的文本 3. 字體 1. 設置字體系列 font-family：那種字體，.....; 2. 設置字體大小 font-size：多少em(1em=16px)； 3. 字體加粗 font-weight：bold； 4. 鏈接 1. 未訪問的鏈接 a:link{樣式1；樣式2；....} 2. 已訪問的鏈接 a:visited{樣式1；樣式2；....} 3. 鼠標移動到鏈接上 a:hover{樣式1；樣式2；....} 4. 按下鏈接時 a:active{樣式1；樣式2；....} 5. 列表 1. 設置列表項標志類型 list-style-type：屬性值 2. 設置列表項的位置 list-style-position： inside： 列表項目標記放置在文本以內 outside：列表項目標記放置在文本以外 3. 將圖片設置為列表項標志 list-style-image：url("") 4. 簡寫 list-style: 列表項類型 位置 圖片 6. 表格 1. 設置邊框為單實線 border-collapse：collapse 2. 設置單元格的間隔 border-spacing：10px 3. 設置表格標題位置 caption-side： top：表格之上，默認值 bottom：表格之下 --> <!-- 背景 --> <div> <div class="div_01"></div> </div> <!-- 文本及字體 --> <div> <h3>基尼太美</h3> <p>傳說華佗在給關羽刮骨療傷的時候，關羽不配合，一直在下棋，華佗很生氣，想刺激一下關羽，華佗就用一種葯來刺激關羽，關羽一嚇，嚇得眉毛都抬起來了。后人就把這個故事成為<b>“激你抬眉”</b>。</p> </div> <!-- 超連接 --> <a href="http://www.cnblogs.com/mh20131118" target="_black">萌萌哥的春天</a> <!-- 列表 --> <ul> <li>雞</li> <li>你</li> <li>太</li> <li>美</li> </ul> <br /> <!-- 表格 --> <table id="ikun"> <caption>基尼太美</caption> <thead> <tr> <th>ikun</th> <th>黑粉</th> </tr> </thead> <tbody> <tr class="kunkun"> <td>我們的坤坤</td> <td>大家的坤坤</td> </tr> </tbody> </table> </body> </html>
@charset "UTF-8"; /*背景*/ .div_01 { width: 100%; height: 600px; /*設置背景圖片*/ background-image: url("../images/a.jpg"); /*取消背景圖片重復*/ background-repeat: no-repeat; /*開啟圖像固定*/ background-attachment: fiexd; /*設置背景圖像位置*/ background-position: 50% 15%; background-image: url("../images/a.jpg") } /*文本及字體*/ p { /*設置首行縮進*/ text-indent: 2em; /*設置行高*/ line-height: 20px; /*設置對齊方法*/ text-align: left; /*設置字體系列*/ font-family: serif, cursive, fantasy; /*設置字體大小*/ font-size: 20px; } p>b { color: orange; /*設置字體閃爍*/ text-decoration: blink; /*設置字體加粗*/ font-weight: bold; } /*超連接*/ a:link, a:visited { /*點擊之前*/ display: block; font-weight: bold; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; background-color: #98bf21; width: 120px; text-align: center; padding: 4px; text-decoration: none; } a:hover, a:active { /*點擊時*/ background-color: #7A991A; } /*列表*/ ul li { /*取消樣式*/ list-style-type: none; /*浮動*/ float: left; margin-left: 20px; color: red; } /*表格*/ #ikun { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; width: 200px; border-collapse: collapse; } #ikun td, #ikun th { font-size: 1em; border: 1px solid #98bf21; padding: 3px 7px 2px 7px; } #ikun th { font-size: 1.1em; text-align: left; padding-top: 5px; padding-bottom: 4px; background-color: #A7C942; color: #ffffff; } #ikun tr.kunkun td { color: #000000; background-color: #EAF2D3; }
四、CSS 盒模型
一： 外邊距：margin
1. 作用：設置元素和元素之間的間隔
2. 使用：margin：上 右 下 左
二：邊框：border
1. 作用：設置邊框的大小
2. 使用：border：大小 線條 顏色；
3. 圓角：border-radius：20px
三：內邊距：padding
1. 作用：設置內容區和邊框之間的距離
2. 使用：padding：10px；
五、CSS3 定位
<!DOCTYPE html> <html> <head> <title>定位</title> <meta charset="UTF-8"> <link rel="stylesheet" href="盒子模型.css" /> </head> <body> <!-- 1. 塊級元素(block) 1. 總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示; 2. 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制; 3. 塊級元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li 2. 內聯元素(inline) 1. 和相鄰的內聯元素在同一行; 2. 寬度(width)、高度(height)、內邊距的top/bottom和外邊距的top/bottom都不可改變，就是里面文字或圖片的大小; 3. 內聯元素主要有： a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var 3. 修改元素顯示 1. 顯示為塊級元素：display:block 2. 顯示為內聯元素：display:inline 3. 顯示為內聯塊元素：display:inline-block 1. 表現為同行顯示並可修改寬高內外邊距等屬性 2. <ul>元素使用時，可以水平顯示 4. 定位 1. 相對定位：relative 1. 使用： 1. 開啟定位：position：relative 2. 移動：left：-20px; 2. 特點： 1. 相對元素原有的位置移動 2. 原本所占的空間不會改變 2. 絕對定位：absolute 1. 使用： 1. 開啟定位：position：absolute 2. 移動：left：20px; 2. 特點： 1. 相對於父級元素(開啟相對定位)或者頁面(所有父級元素都未開啟相對定位)進行移動 2. 不會占用原本空間，完全脫離文檔流，會和其他元素重疊 3. 固定定位：fixed 1. 使用： 1. 開啟定位：position：fixed 2. 移動：top：20px; 2. 特點： 1. 將元素固定在指定位置，不會隨着滾動條移動 2. 完全脫離文檔流，不會占用原本空間 5. 浮動 1. 開啟浮動：使元素可以左右移動 1. 使用：float: left or right； 2. 特點： 1. 元素只能左右移動而不能上下移動 2. 浮動元素完全脫離文檔流，不會占用原有空間，元素會重新排列 3. 當水平空間足夠大的時候，所有浮動的元素都會水平排列 4. 如果元素的尺寸不同時，有可能出現元素卡住的現象 2. 清理浮動：指定元素兩側不能出現浮動元素 clear：both or left or right 6. 溢流 1. 控制內容溢出 overflow： visible：默認值，溢出的內容呈現在框外 hidden：溢出的部分會被隱藏 scroll：通過滾動條可以查看隱藏的部分 auto：自動根據是否溢出添加滾動條 --> <!-- 定位 --> <div class="div_01"> <div class="one">我是老大</div> <div class="two">我是老二</div> <div class="three">我是老三</div> </div> <!-- 浮動 --> <div class="div_02"> <img alt="我是老大" src="../images/a.jpg"> <img alt="我是老二" src="../images/a.jpg"> <img alt="我是老三" src="../images/a.jpg"> </div> <!-- 溢流 --> <div class="div_03"> <p>你是我的小蘋果 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 小呀小蘋果 </p> </div> </body> </html>
@charset "UTF-8"; /*定位*/ .div_01{ width: 500px; height:500px; background-color: silver; position: relative; } .one,.two,.three{ width: 100px; height: 100px; } /*相對定位*/ .one{ background-color: lime; position: relative; left: 50px; } /*絕對定位*/ .two{ background-color: navy; position: absolute; left: 300px; } /*固定定位*/ .three{ background-color: orange; position: fiexd; right: 50px; } /*浮動*/ .div_02{ width: 500px; height: 500px; background-color: orange; } img{ width: 160px; float: left; } /*溢流*/ .div_03{ width: 500px; height: 500px; background-color: silver; } p{ /*設置溢出內容*/ overflow: auto; }