CSS === > - Cascading Style She~~Cascading Style She~~ets > - 選擇器 {屬性:值;} = E {attr: val;} > - `<style> h1{color:red;} </style>` > - 註釋: `/* 內容 */` ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>課堂練習-新聞頁面</title> <style> h1 { color:red; font-size:20px; } </style> </head> <body> <h1>GodJJ</h1> </body> </html> ``` ## 字體 ### font-size: 字號大小 > - 相對長度: px, em > - 絕對長度: in, cm, mm, pt > - 普遍使用14+px > - 儘量使用偶數, 舊瀏覽器對奇數可能有BUG ### font-family: 字體 > - 兩種以上的字體要用,隔開`"Microsoft JhengHei","MingLiU";` > - 中文字體通常要加"" > - 英文字體在中文字體前 > - 字體含有空格或符號, 用引號包起來`"Microsoft JhengHei";` > - Unicode字體 > - `font-family:"宋體";`, 為了避免亂碼, 可以使用 > - 英文 `font-family:"SimSun";` > - Unicode編碼 `font-family:"\5B8B\4F53";` ### font-weight: 字體粗細 > - \<b>,\<strong> > - fonr-weight屬性值: > - normal, bold, bolder, lighter, 100~900(100的整數倍) > - normal=400, bold=700 ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <style> span{ font-weight: 900; } strong{ font-weight: normal; /* 讓粗體不粗 */ } </style> </head> <body> <h1>Godjj</h1> <span>玩玩積木</span> 換換座位<br /> <strong>聽聽唱片</strong>又輪迴了幾遍<br /> </body> </html> ``` ### font-style: 字體風格 > - 斜體 > - html: \<i>, \<em> > - font-style:`italic`或`oblique` > - 讓斜體不傾斜 `normal` ```htmlmixed= <head> <style> span{ font-style: italic; } strong{ font-style: oblique; } em{ font-style: normal; /* 斜體不斜 */ } </style> </head> <body> <h1>Godjj</h1> <span>玩玩積木</span> 換換座位<br /> <strong>聽聽唱片</strong>又輪迴了幾遍<br /> <em>騎騎單車</em> 盪盪鞦韆<br /> </body> ``` ### Font綜合寫法 > - `{font: font-style font-weight font-size/line-height font-family};` > - 必須按順序寫 > - size跟family為必填項, 其餘可省略(取默認) ```htmlmixed= <head> <style> h1 { color:red; /*font-size:20px; font-family:Tahoma;*/ font: italic 900 20px "Tahoma"; } </style> </head> <body> <h1>Godjj</h1> </body> ``` ## 選擇器 ### 標籤選擇器 `元素或標籤名{k1:v1; k2:v2;}` ### 類選擇器 > - 定義類 `.類名{k1:v1; k2:v2;}` > - 調用類 `class="類名"` > - 建議使用`-`而非`_`來命長名稱 > - 兼容問題 > - 與JS區分 > - 盡量參考命名規範 > - 多類名用空格隔開即可 ```htmlmixed= <head> <meta charset="utf-8"> <style> /* 標籤選擇 */ span{ font-size: 200px; } /* 類選擇 */ .blue{ color:blue; } .red{ color:red; } .orange{ color:orange; } .green{ color:green; } .font30 { font-size: 30px; } </style> </head> <body> <span class="blue">G</span> <!--多類名--> <span class="red font30">o</span> <span class="orange">o</span> <span class="blue">g</span> <span class="green font30">l</span> <span class="red">e</span> </body> ``` ### id選擇器 > - 定義ID`#ID名{k1:v1; k2:v2;}` > - 使用ID`id="ID名"` > - 與Class不同: > - W3C規定ID只能調一次, class可以調多次 ### 通配符*選擇器 `*{k1:v1; k2:v2;}` ```htmlembedded= <head> <meta charset="utf-8"> <style> * { color: red; } </style> </head> <body> <span>G</span> <span>o</span> <span>o</span> </body> ``` ### 偽類選擇器 > - 給某些選擇器添加特殊效果 > - `選擇器:效果類 {k1:v1; k2:v2;}` #### 鏈接偽類選擇器 > - lvha 順序不要亂改 ```htmlmixed= <head> <meta charset="utf-8"> <style> /* 未訪問的鏈接 */ a:link { font-size: 30px; color: green; } /* 已訪問過的鏈接 */ a:visited { font-size: 30px; color: red; } /* 滑鼠移動到鏈接上 */ /* 常用 */ a:hover { font-size: 30px; color: yellow; } /* 點擊 */ a:active { font-size: 30px; color: gray; } </style> </head> <body> <span><a href="#">HAHA</a></span> <span><a href="#">GodJJ</a></span> </body> ``` #### 結構偽類選擇器 ```htmlmixed= <head> <meta charset="utf-8"> <style> /* 第一個跟最後一個 */ /* li:first-child { color: red; } li:last-child { color: blue; }*/ /* n什麼都不寫就是全部 li:nth-child(n){ color: gray; }*/ /* 填3就是第三個 li:nth-child(3){ color: gray; }*/ /* odd 奇數 li:nth-child(odd){ color: gray; }*/ /* even 偶數 li:nth-child(even){ color: gray; }*/ /* 2n 偶數 li:nth-child(2n){ color: gray; }*/ /* 2n-1 奇數 */ /*li:nth-child(2n-1){ color: gray; }*/ /* ... 可以自己寫公式 */ /* 從下往上數 */ li:nth-last-child(even){ color: gray; </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body> ``` ### 目標選擇器 > - `target {k1:v1; k2:v2;}` > - 選擇目標時, 該目標會依據k,v產生變化 ```htmlmixed= <head> <meta charset="utf-8"> <style> :target { color:red } </style> </head> <body> <a href="#test1">HAHA</a> <a href="#test2">HEHE</a> <a href="#test3">HOHO</a> <h2 id="test1">HAHA</h2> <h2 id="test2">HEHE</h2> <h2 id="test3">HOHO</h2> </body> ``` ## 複合選擇器 ### 交集選擇器 `標籤選擇器.class {k1:v1;k2:v2;}` ```htmlmixed= <head> <style> .test { color: red; } div.test { /* 類名為test的div標籤 */ font-weight: 900; } </style> </head> <body> <div class="test">div 1</div> <div class="test">div 2</div> <span class="test">span</span> <span class="test">span</span> </body> ``` ### 並集選擇器 `選擇器,選擇器 {k1:v1;}` > - 定義的樣式完全相同或部份相同, 即可使用並集 > - 使用 , 隔開選擇器 ```htmlmixed= <head> <meta charset="utf-8"> <style> /*p { color: red; } div { color: red; }*/ p,div,.change { color: red; } </style> </head> <body> <p>p</p> <div>div</div> <span class="change"> 變色 </span> <span> 不變色 </span> </body> ``` ### 後代選擇器 `選擇器 選擇器 {k1:v1;}` > - 嵌套時使用 > - 用空格隔開 > - 標籤裡的所有標籤都包含 ```htmlmixed= <head> <meta charset="utf-8"> <style> .temp p { color: red; } </style> </head> <body> <div class="temp"> <p>p1</p> <div> <p>p2</p> <!--這個也包含--> </div> </div> <p>p3</p> </body> ``` ### 子元素選擇器 `選擇器>選擇器 {k1:v1;}` > - 嵌套時使用 > - 用>指定 > - 指定的子元素而已, 不包含全部 ```htmlmixed= <head> <meta charset="utf-8"> <style> .temp>p { color: red; } </style> </head> <body> <div class="temp"> <p>p1</p> <div> <p>p2</p> </div> </div> <p>p3</p> </body> ``` ### 屬性選擇器 > - `[attr]` 存在該屬性都選 > - `[attr=val]` 屬性值完全等於val > - `[attr*=val]` 屬性值"任意"位置有val > - `[attr^=val]` 屬性值"開頭"等於val > - `[attr$=val]` 屬性值"結尾"等於val > - `[attr~=val]` 多屬性中某個屬性值等於val > - `E[attr]` 選擇器中的屬性 ```htmlmixed= <head> <meta charset="utf-8"> <style> div[type] { /* div的type */ color: red; } div[class=test1] { color: green; } p[class^=temp] { color:blue; } p[class$=temp] { color: gray; } span[class~=te] { color: orange; } </style> </head> <body> <div class="test1">test1</div> <div class="2test">2test</div> <div type="text">test</div> <p class="temp1">temp1</p> <p class="temp2">temp2</p> <p class="2temp">2temp</p> <span class="te-mp3">te-mp3</span> <span class="te mp 4">te mp 4</span> </body> ``` ### 偽元素選擇器 (CSS3) > - `E::first-letter {k1:v1;}` 第一個字 > - `E::first-line {k1:v1;}` 第一行 > - `E::selection {k1:v1;}` 選取時 > - `E::before {k1:v1;}` 在盒子內的最前面插入content > - `E::after {k1:v1;}` 在盒子內的最後面插入content ```htmlmixed= <head> <meta charset="utf-8"> <style> p::first-letter { color: red; } p::first-line { color: orange; } p::selection { color: skyblue; } p::before { content: "Raccon "; } p::after { content: " Cute"; } </style> </head> <body> <p>The original habitats of the raccoon are deciduous and mixed forests, but due to their adaptability they have extended their range to mountainous areas, coastal marshes, and urban areas, where some homeowners consider them to be pests. As a result of escapes and deliberate introductions in the mid-20th century, raccoons are now also distributed across much of mainland Europe, Caucasus, and Japan.</p> </body> ``` ```htmlmixed= ``` ## CSS外觀屬性 ### color > - 預定義顏色 `color: red` > - 十六進位 `color: #00ff00` > - 常用 > - 兩兩相同時可簡寫 `#00ff00`>`#0f0` > - 但有一不相同時就不行 `#00ff0e` > - RGB > - RGBA (CSS3) > - a = alpha通道, 設定透明度, val為0~1 > - `opacity: [0-1];` : 直接設定透明度 > - `color: transparent;` 直接設為透明 > #### Amos開關燈: > - `#fff`: 想像成三個燈泡 > - 0 為開到最大, f為關燈 > - `#fff` 把三個燈都關起來 > 黑色 > - [RGB、HSL、Hex 網頁色彩碼，看完這篇全懂了](http://csscoke.com/2015/01/01/rgb-hsl-hex/) ```htmlmixed= <head> <meta charset="utf-8"> <style> /* 預定義顏色 */ .red { color: red; } /* 十六進位(常用) */ h2:nth-child(2) { color: #1d6415; } /* RGB */ #rgb { color:rgb(22,79,122) } /* RGBA (CSS3)*/ #rgba { color: rgba(174,128,39,0.67); } </style> </head> <body> <h2 class="red">HAHA</h2> <h2>HEHE</h2> <h2 id="rgb">HOHO</h2> <h2 id="rgba">HOHO</h2> </body> ``` ### text-shadow 設定陰影(CSS3) `text-shadow: *h-shadow *v-shadow blur color` > - h: 水平, 必須值, 允許負值 > - v: 垂直, 必須值, 允許負值 > - b: 模糊, 選配 > - c: 選配 ```htmlmixed= <head> <style> #t-shadow { text-shadow: 7px 2px 3px rgba(163, 174, 27, 0.6); } </style> </head> <body> <h2 id="t-shadow">HOHO</h2> </body> ``` ### 凹凸文字 > - 凹凸可以用陰影來完成, > - 凹凸有光亮面及陰暗面 > - 故可利用陰影顏色及控制陰影方向來製作 ```htmlmixed= <head> <meta charset="utf-8"> <style> body { background: gray; } div { color: gray; /*font: font-style font-weight *font-size/line-height *font-family*/ font: 900 100px "微軟正黑"; } div:nth-child(1) { /*text-shadow: *h-shadow *v-shadow blur color*/ /*與多背景圖相同, 多陰影可用逗號隔開來完成*/ text-shadow: 1px 1px 1px black, -1px -1px 1px white; } div:nth-child(2) { text-shadow: 1px 1px 1px white, -1px -1px 1px black; } </style> </head> <body> <div>凸</div> <div>凹</div> </body> ``` ### line-height: 行距 > - px(常用), em, % > - 垂直居中小技巧: 在一行盒子內的前提下，行高=盒高 `line-height=height` ### text-align: 水平對齊 > - left, right, center ### text-indent: 首行縮進 > - em(常用), %, ... > - 1em相當於一個漢字 > - 小技巧: 經常使用在 h1 必須寫網站名, 但又不想顯示文字時, 通常會縮排到看不到為止 -9999rem ### letter-spacing: 字間距 ### word-spacing: 單詞間距 > - 對純中文的段落無效, 中英夾雜有效 > - 主要用於英文 ### text-decoration: > - val > - none > - 預設 > - underline > - \<a>預設 > - overline > - line-through ### writing-mode `writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr` > - 定義文本書寫方向 > - 有支援度的問題 > - `horizontal-tb` : 預設 > ![](https://i.imgur.com/A51TaaJ.png) > - `vertical-rl` : 垂直, 右至左, 英文會連字一起轉 > ![](https://i.imgur.com/NQcyv3H.png) > ![](https://i.imgur.com/pTjiTxl.png) > - `vertical-lr` : 垂直, 左至右 > ![](https://i.imgur.com/UI2RK4r.png) > ![](https://i.imgur.com/JIhGVuL.png) > - `sideways-rl | sideways-lr` > - 連字體一起轉, 只有FF43以上支援 > ### text-orientation > - 搭配 `writing-mode` 使用, 旋轉英文字符的方向 > - 英文使用 `vertical` 時, 會連字一起轉, > `text-text-orientation: upright` 可以把他轉回來 > ```css > p { > writing-mode: vertical-lr; > text-orientation: mixed; > } > ``` > ![](https://i.imgur.com/Nt1BGfO.png) ## 引入樣式 ### 行內式 `<標籤 style="k1:v1; k2:v2;">內容</標籤>` > - 直接寫在標籤裡 ```htmlmixed= <head> <meta charset="utf-8"> </head> <body> <h3 style="color: red; font-size: 16px;">GOdJJ</h3> </body> ``` ### 內部樣式(內嵌) ```htmlmixed= <head> <style type="text/css"> 選擇器 {k1:v1; k2:v2;} </style> </head> ``` > - style可以放於任何位置, 一般都放在head裡 > - HTML5 的type參數可以省略 ```htmlmixed= <head> <meta charset="utf-8"> <style type="text/css"> h3 { color:red; font-size: 16px; } </style> </head> <body> <h3>GOdJJ</h3> </body> ``` ### 外部樣式 ```htmlmixed= <head> <link type="text/css" rel="stylesheet" href="CSS路徑"/> </head> ``` > - 常用 > - link: 單標籤 > - type: 外部鏈接的類型 > - rel: 當前文件與鏈接文檔的關係 > - href: 路徑, 絕對或相對都可以 > - 常見的css檔名: > - `normalize.css`: 初始化用的檔名 > - `base.css`: 網站相同樣式用的檔名 ```htmlmixed <head> <link type="text/css" rel="stylesheet" href="03_temp.css"> </head> <body> <div>HAHA</div> <div>HAHA</div> <div>HAHA</div> </body> ``` ```css div:nth-child(2) { color: red; } ``` ### 標籤顯示模式轉換 display `<style>標籤 {display: 標籤顯示;}</style>` > - `display: block;` 轉快級 > - `display: inline;` 轉行內 > - `display: inline-block;` 轉行內塊 ## CSS 書寫規範 ### 空格規範 > - E 與 {} 之間 `E {}` > - attr與: 之間不要空, : 後空 `attr: value;` ### 選擇器規範 > - 多個選擇器時, 每個選擇器獨佔一行 ```htmlmixed= <style> .listen, .mother, .speak {attr: value;} </style> ``` > - 選擇器嵌套盡量不大於三級 `div ul ui ul ui a {}` > `div ui a` ### 屬性規範 > - 定義屬性獨佔一行 > - 定義屬性分號結尾 > - 可以縮寫儘量縮寫`font:` `background` .. ```htmlmixed= p { color: red; font-size: 14px; } ``` ### 其他 > - text 使用 "" 包起來 > - 數值為0-1的小數，省略0 `0.3` > `.3` > - 長度為0, 省略單位 > - url() 不加"" > - RGB 使用十六進制 > - 顏色可縮寫就縮寫 ## Background ### background-color > - 就顏色 > - 透明(CSS3): `background-color: rgba();` ### background-image > - `background: url(url)` > - 多背景(CSS3) > `url(url), url(url);` > - 以逗號隔開 > - 如果背景間重疊, 第一張會覆蓋後面的 > - 簡寫且多背景時, 背景色要放在最後一組上 ```htmlmixed= div { width: 400px; height: 400px; background: url(raccoon.jpeg) no-repeat, url(raccoon.jpeg) no-repeat right bottom rgb(30, 10, 12); } ``` > - background-color 跟 background-image 是兩回事，可以並存 ```css html, body { margin: 0; padding: 0; } body { background-color: red; background-image: url(./1.png); background-repeat: no-repeat; } ``` ![](https://i.imgur.com/KWBQiRc.png) ### background-repeat > - 參數 > - repeat: 縱向與橫向重複(默認) > - no-repeat > - repeat-x: 橫向重複 > - repeat-y: 縱向重複 ### background-position > - 參數: > - 方位單位: > - top, center, bottom, left, center, right > - `background-position: top left` (默認) > - `background-position: left top` > 方位名沒有順序, 誰在前面都一樣 > - `background-position: top` > 中上 > > 如果只寫一個方位, 另一個默認為center > - 精確單位(x,y): > - x軸由左到右為正 > - y軸由上到下為正 > - 左上角為(0,0) > - `background-position: 10px 40px;` > 向右10px, 向下40px > - 混搭: > - `background-position: 10px center;` > 向右10px, 上下center ### background-attachment > - scoll: 圖像隨內容滾動(預設) > - fixed: 圖像固定 ```htmlembedded= <body> <style> body { display: flex; } div { height: 3000px; flex: 1; background: url(./1.png) no-repeat; } .left { background-attachment: fixed; } </style> <div class="left"></div> <div class="right"></div> </body> ``` ### 簡寫 `background: value1 value2..` > - 沒有強制規定順序 ```htmlmixed= <style> body { /*background-color: gray; background-image: url(raccoon.jpeg); background-repeat: no-repeat; background-position: 10px 30px; background-attachment: fixed;*/ /* 完全等價 */ background: gray url(raccoon.jpeg) no-repeat fixed 10px 30px; } </style> ``` ### background-size(CSS3) > - 背景縮放 > - 參數: > - x y > - 盡量改一個值就好, 避免失真 > - 可以用px 或 % `background-size: 50%;` > - 不改的值寫 `auto` > - cover > - 自動等比例縮放到填滿整個區域, 圖片超出的部分會隱藏 > `background-size: cover;` > - contain > - 自動等比例縮放至寬或高有一與盒子同, 保證圖片完整 > `background-size: contain;` ## 王者榮耀導航欄 ![](https://i.imgur.com/KRKiOxe.png) ```htmlmixed= <head> <meta charset="utf-8"> <style> div { background: black; } a { color: white; font: 500 20px "微軟正黑"; /* 刪掉a的底線 */ text-decoration: none; /* 為了調整a的背景, 並需要讓他們不獨佔一排, * 故將a屬性轉換成inline-block*/ height: 50px; width: 200px; display: inline-block; /* 一行內, 行高=盒子高 字體會居中 */ line-height: 50px; text-align: center; } a:hover { background: url(h.png) no-repeat; } </style> </head> <body> <div> <a href="#">專區說明</a> <a href="#">申請資格</a> <a href="#">獎勵兌換</a> <a href="#">下載遊戲</a> </div> </body> ``` ## CSS 三大特性 ### 層疊性 > - 相同選擇器相同屬性, 後疊前 ```htmlmixed= <style> div { color: red; } div { color: blue; } /* div的顏色會是 blue */ </style> ``` ### 繼承性 > - 子標籤會繼承『部分』父標籤 > - 與文字相關的通常都會繼承, 如text-, font-, line-, color > - 而塊別相關的很多就不繼承, 如邊框,邊距,背景,位置等 > - 寬度會繼承，高度不繼承 ### 特殊性(Specificity) > - CSS有一套權重公式計算孰先孰後, 如果權重相同, 則依照層疊性 > - Specificity 使用四位的數字串來表示(CSS3為三位) > - `(0,0,0,0)` 左邊最大 > - 數值間沒有進制 > - 0,0,0,9 + 0,0,0,1 = 0,0,0,10 > - 繼承或*`* {}`: 0,0,0,0 ```htmlmixed= <head> <meta charset="utf-8"> <style> #haha { /* 0,1,0,0 */ color: red; } li { /* 0,0,0,1 */ color: blue; } /* 結果是藍色! * 因為0,1,0,0是ul的權重 * 對li來說是0,0,0,0 * 故0,0,0,1 > 0,0,0,0*/ </style> </head> <body> <ul id="haha"> <li>haha</li> <li>haha</li> </ul> </body> ``` > - 標籤`div {}`: 0,0,0,1 > - 類`.haha {}`與偽類`:first-child {}`與屬性`[attr]`: 0,0,1,0 > - ID`#haha {}`: 0,1,0,0 > - 行內樣式`<div color="blue"></div>`: 1,0,0,0 > - !important: 無限大 > ``` > div { > color: red!important; /* 無敵 */ > } > ``` > - 權重疊加 > - `div ul li` > 0,0,0,3 > - `div li` > 0,0,0,2 > - `.nav ul li` > 0,0,1,2 > - `a:hovor` > 0,0,1,1 > - `#nav li`> 0,1,0,1 > - Q1 ```htmlmixed= <head> <meta charset="utf-8"> <style> div #test2 { /* 0,1,0,1 */ color: red; } #test1 div { /* 0,1,0,1 */ color: green; } /* 權重相同 > 層疊性 故為綠色*/ </style> </head> <body> <div id="test1"> <div id="test2"> 什麼顏色 </div> </div> </body> ``` ## 盒子 > - 盒子三元素: > - 邊框(border) > - 內邊距(padding) > - 外邊距(margin) ### Border > - 參數 > - border-color > - border-width > - border-style > - none(默認) > - solid(實線) > - dashed(虛線) > - dotted(點線) > - double(雙線) > - 各邊邊框 > - top, bottom, left, right > - `border-bottom-style: dashed` > - 綜合寫法 > - `border: width style color` > - 方向: width style color > - `border-bottom: 1px dotted blue` > - 參數: top, right, bottom, left > - `border-color: red` > - `border-color: red gray black blue` > - `border: 0` 去除邊框 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 400px; height: 400px; border-top-color: skyblue; border-top-style: double; border-top-width: 3px; border-bottom-color: gray; border-bottom-style: dashed; border-bottom-width: 3px; border-left: 2px dotted blue; border-right: 2px blue solid; } input { /*border-color: red; border-width: 4px; border-style: dotted;*/ border: 4px dotted red; } </style> </head> <body> <div class="test1">div</div> Test: <input type="text" /> </body> ``` ### 表格的細線邊框 > - `cellpadding="0"`只能改變單元格間的距離, > - 但邊線沒辦法合併, 導致邊線會有兩個邊框和的寬度 > - 此時可用`table {border-collapse: collapse;}`合併邊框 ```htmlmixed= <head> <meta charset="utf-8"> <style> table { width: 300px; height: 300px; border: 1px solid red; /*border-collapse: collapse;*/ } td { border: 1px solid red; } /* 沒有合併邊框前, border=1px+1px=2px*/ </style> </head> <body> <table cellspacing="0"> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> </table> </body> ``` ### 圓角邊框(CSS3) `border-radius: 左上 右上 右下 左下` > - 一個值: all > - 兩個值: 左上右下 右上左下 > - 三個值: 左上 右上左下 右下 > - 四個值: 左上 右上 右下 左下 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 200px; height: 200px; border: 1px solid red; } div:first-child { border-radius: 20px } div:nth-child(2) { /*border-radius: 100px;*/ border-radius: 50%; } div:nth-child(3) { /* 左上右下20px 右上左下40px*/ border-radius: 20px 40px; } div:nth-child(4) { /* 左上20px 右上左下40px 右下60px*/ border-radius: 20px 40px 60px; } div:nth-child(5) { /* 左上20px 右上40px 右下60px 左下80px*/ border-radius: 20px 40px 60px 80px; } div:nth-child(6) { border-radius: 100px; height: 100px; } div:nth-child(7) { border-radius: 100px 0; } </style> </head> <body> <div>20px</div> <div>100px or 50%</div> <div>20px 40px</div> <div>20px 40px 60px</div> <div>20px 40px 60px 80px</div> <div>100px height:100px</div> <div>100px 0</div> </body> ``` ### 三角形作法 > - 原理: > - 當內容物是寬高都是時, 設置border後, border會繞著一個中心點, > - 而各邊邊框會擠壓而形成三角形 ![](https://i.imgur.com/PD7b8F7.png) ```htmlmixed= <head> <meta charset='utf-8'> <style> div { /* 新的瀏覽器通常只需要設置width, height */ width: 0; height: 0; /* 這兩個是為了兼容 */ line-height: 0; font-size: 0; /* 此時就有四個三角形了, 需要哪邊就取哪邊 */ border: 50px solid transparent; border-top-color: orange; border-right-color: skyblue; border-bottom-color: darkblue; border-left-color: yellow; } </style> </head> <body> <div></div> </body> ``` ### 實作: 小小對話筐 ![](https://i.imgur.com/IaXG0nA.png) ```htmlmixed= <head> <meta charset='utf-8'> <style> .box { height: 80px; width: 200px; position: relative; margin: 100px auto; background-color: skyblue; border: 1px solid skyblue; border-radius: 20px 20px 20px 20px; } .box::after { /* 創建一個 0 寬高的盒子 */ content: ''; display: inline-block; width: 0; height: 0; line-height: 0; font-size: 0; /* 製作三角形 */ border: 20px solid transparent; border-top-color: skyblue; /* 定位 */ position: absolute; bottom: -40px; left: 20px; } </style> </head> <body> <div class='box'></div> <script> </script> </body> ``` ### 直角三角形 ![](https://i.imgur.com/D35Flk6.png) > - 作法: > - 把一邊的邊框刪掉後會變成這樣 > ![](https://i.imgur.com/1TPXg28.png) -> ![](https://i.imgur.com/W5Gq6aD.png) > - 所以如果我只留一個上下的一個左右的 > ![](https://i.imgur.com/IKOECED.png) > - 最後上下的邊框粗度就控制三角形的高, 左右控制寬, 然後把一邊顏色透明即可 ```htmlmixed= <head> <meta charset='utf-8'> <style> div { /* 盒子內容清掉*/ height: 0; width: 0; line-height: 0; font-size: 0; margin: 100px auto; /* 只留兩個邊框 */ border-top: 80px solid skyblue; /* 這個控制高度 */ border-right: 50px solid transparent; /* 這個控制寬度 */ } </style> </head> <body> <div></div> </body> ``` ### 練習 ![](https://i.imgur.com/egUsto9.png) ```htmlmixed= <head> <meta charset='utf-8'> <style> /* 兩個相鄰的盒子 */ .fa { margin: 100px auto; display: flex; height: 80px; width: 200px; } .left, .right { flex:1; } .left { background: skyblue; } .right { background: yellow; position: relative; } /* 把直角三角形弄出來 */ .right::after { /* 弄一個空盒子 */ content: ''; display: inline-block; height: 0; width: 0; line-height: 0; font-size: 0; /* 直角三角形*/ border-top: 80px solid skyblue; border-right: 50px solid transparent; /* 定位 */ position: absolute; left: -25px; top: 0; } </style> </head> <body> <div class='fa'> <div class='left'></div> <div class='right'></div> </div> <script> </script> </body> ``` ### 練習: 降價標示 ![](https://i.imgur.com/Tp9NzH7.png) ```htmlmixed= <head> <meta charset='utf-8'> <style> /* 就標示盒子的一些基本設定 */ .price { line-height: 30px; /* 幫span垂直置中 */ width: 200px; border: 1px solid red; margin: 100px auto; font-size: 18px; text-align: center; /* 幫span 水平置中 */ } .savePrice { background: red; color: #fff; width: 100px; float: left; /* 直接觸發BFC就有寬高了*/ position: relative; text-decoration: line-through; } /* 中間的三角形 */ .savePrice::after { /* 弄個空盒子 */ content: ''; display: inline-block; height: 0; width: 0; line-height: 0; font-size: 0; /* 三角形 */ border-top: 30px solid red; border-right: 20px solid white; /* 定位 */ position: absolute; right: -10px; } </style> </head> <body> <div class='price'> <span class='savePrice'>$ 200</span> <span>$ 100</span> </div> </body> ``` ### Padding > - 內邊距, 邊框與內容的距離 > - `padding-top|right|bottom|left:` > - `padding:` > - 一個值: all > - 兩個值: 上下 左右 > - 三個值: 上 左右 下 > - 四個值: 上 右 下 左 ### 實作: 新浪導航 ```htmlmixed= <head> <meta charset="utf-8"> <style> nav { height: 41px; background-color: #FCFCFC; border-top: 3px solid #FE8400; border-bottom: 1px solid #EDEEF0; } nav a { color: #666666; font-size: 14px; text-decoration: none; line-height: 41px; /* 行高=合高 > 水平致中*/ display: inline-block; height: 41px; /* 由於字數不同, 故每個盒子如果固定大, 內間距會大小不一 * 解決辦法: 不給寬, 直接給內間距*/ padding: 0 16px; } a:hover { background: #EDEEF0; color: #FF8400; } </style> </head> <body> <nav> <a href="#">設為首頁</a> <a href="#">手機新浪網</a> <a href="#">移動客戶端</a> </nav> </body> ``` ### margin > - 外邊距 > - `margin-top|right|bottom|left:` > - `margin:` > - 一個值: all > - 兩個值: 上下 左右 > - 三個值: 上 左右 下 > - 四個值: 上 右 下 左 ### 外邊距盒居中 > - 條件: > - 須為塊級 > - 須指定寬度 > - 左右外邊距值為auto ```htmlmixed= <head> <meta charset="utf-8"> <style> header/*, span*/ { /*非塊級沒有作用*/ width: 40px; height: 40px; background: black; margin: 20px auto; } </style> </head> <body> <header></header> <span>1</span> </body> ``` ### 觀念釐清 > - 文字水平居中 vs 盒子水平居中 > - 文字水平居中 > `text-align: center;` > - 盒子水平居中 > `左右margin: auto;` ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 200px; height: 100px; border: 1px solid brown; text-align: center; /* 文字水平居中*/ margin: 10px auto; /* 盒子水平居中*/ } </style> </head> <body> <div>文字水平居中</div> </body> ``` > - 插入圖片 vs 背景圖片 > - 改大小 > - 插入: width & height > - 背景: background-size > - 移動 > - 插入: margin & padding > - 背景: background-position > - 使用場景 > - 插入: 較為常用, 如展示產品 > - 背景: 背景大圖或小圖示 ```htmlmixed= <head> <style> section { width: 200px; height: 200px; border: 1px solid black; } section img { width: 100px; /* 插入圖片更改大小 width & height */ margin-top: 20px; /* 插入圖片移動: 改padding或margin */ margin-left: 10px; } aside { width: 200px; height: 200px; border: 1px solid red; background: url(raccoon.jpeg) no-repeat; background-size: 100px; background-position: 10px 20px; /* 背景圖片移動 */ } </style> </head> <body> <section><img src="raccoon.jpeg"/></section> <aside></aside> </body> ``` ### reset.css 與 Normalize.css > - 由於各個瀏覽器有不同的預設, 造成顯示不同結果, 故開發時會先清除內外邊距以求一致 > - `* {margin: 0; padding: 0;}` > - 但實際開發中不會使用*, 因為不是所有標籤都有預設內外邊距, 使用*會將所有標籤都遍歷一遍, 造成效率低, 故一般會使用 > `body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,texarea,p,blockquote,th,td{ margin:0px; padding:0px; }` > - 其實我也不知道這兩個名字差在哪, 我覺得就都是重設, 只是重設的項目多寡而已 > - [reset.css By Meyer](https://meyerweb.com/eric/tools/css/reset/) ```css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ``` > - [normalize.css](https://necolas.github.io/normalize.css/) ### 行內元素的內外邊距問題 > - 行內元素只有左右的外邊距, 沒有上下的外邊距 > - 行內元素的上下內邊距也有問題 <img src="https://i.imgur.com/hHzxRat.png" style="width: 200px"/> > - 故盡量不要給行內元素指定上下的內外邊距 ### 外邊距合併問題 #### 相鄰塊元素垂直外邊距合併 > - 上下兩塊級元素的margin會大吃小 > - 下圖為上下兩div`margin: 30px`, 邏輯上中間應該是60px, 但很明顯重疊掉了 > <img src="https://i.imgur.com/I9W4caJ.png" style="width: 200px"/> > - 解決辦法: 就設置一個大的就好了 #### 嵌套塊元素垂直外邊距合併 > - 如果父元素沒有邊框或內邊距, 則父子元素的上外邊距會大吃小合併 > <img src="https://i.imgur.com/4LdHh2Z.png" style="width: 200px"/> > - 解決辦法: > - 父元素設置邊框或內邊距 > - 父元素添加`overflow: hidden` ```htmlmixed= <head> <meta charset="utf-8"> <style> div { margin: 30px; } .father { width: 200px; height: 200px; background: blue; /* 解決辦法 */ /* border: 1px solid white; */ /* padding: 1px; */ overflow: hidden; } .child { width: 50px; height: 50px; background: skyblue; } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> ``` ### Content 寬高 > - 外盒: margin + border + padding + height | width > - 內盒: border + padding + height | width ### 實作: 新浪網選取標籤 <img src="https://i.imgur.com/6tLIYjI.png" style="width: 100px"/> > HackMD的Bug > 圖片標籤跟程式碼區塊間至少要有換行, 否則會掛 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { /* width: 74px;*/ width: 59px; /* 必須減去padding */ height: 33px; border: 1px solid #8C8C8C; margin: 69px 0 0 153px; border-radius: 5px 0 0 5px; color: #666; font: 14px "SimSun"; line-height: 33px; /* 垂直致中 */ padding: 0 0 0 15px; } </style> </head> <body> <div>新聞</div> </body> ``` > - 注意: > - width & height 對行內元素無效(除img, input外) > - 計算盒高須考慮合併 > - 如果盒子沒給寬或高, padding不會影響盒子大小 > - 即使給100%也會影響 > - 繼承的寬高不算 ```htmlmixed= <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } div { height: 50px; border: 1px solid red; padding: 30px; /*width: 100%;*/ /* 即使給100%也會影響 */ } nav { height: 50px; width: 200px; border: 1px solid blue; } nav p { height: 30px; background: skyblue; padding: 20px; /* 繼承寬高不會影響 */ /*width: 100%;*/ /* 自己給才會 */ } </style> </head> <body> <div>新聞</div> <nav> <p>haah</p> </nav> </body> ``` ### 實作: 新浪網的搜索趣圖 ```htmlembedded= <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } li { color: #FF8400; margin-left: 26px; /* 讓點點與圖片垂直 */ } .searchpic { height: 298px; width: 238px; border: 1px solid #D9E0EE; border-top: 4px solid #FF8400; margin: 30px; } .searchpic h3 { height: 34px; border-bottom: 1px solid #D9E0EE; font: 400 16px "Microsoft Yahei"; line-height: 34px; padding-left: 12px; } .searchpic h3 a { color: #FF8400; text-decoration: none; } .searchpic li a{ font: 12px "Simsun"; text-decoration: none; color: #666; margin-left: -6px; /* 拉近字與點點的空間 */ } .seachpic li a:hover { color: #FF8400; text-decoration: underline; } .raccoon { height: 197px; border-bottom: 1px solid #D9E0EE; } .raccoon img { height: 160px; width: 218px; margin: 7px 14px 0 10px; } .OtherList { height: 65px; } .OtherList li { margin-top: 6px; margin-bottom: 12px; } </style> </head> <body> <div class="searchpic"> <h3><a href="#">搜索趣圖</a></h3> <div class="raccoon"> <img src="raccoon.jpeg"></img> <ul> <li><a href="#">發現自己的寶寶太可愛</a></li> </ul> </div> <div class="OtherList"> <ul> <li><a href="#">超臨界水蒸煤：從源頭杜絕燒煤污染</a></li> <li><a href="#">SpaceX有望明年將宇航員送往國際太空站</a></li> </ul> <div> </div> </body> ``` ### 盒子模型佈局的穩定性 > - width > padding > margin > - margin一堆問題 > - padding要計算盒子大小 > - width經常使用剩餘法來完成 > - 說白了就是把盒子弄大一點 ### CSS3 盒模型 `box-sizing: val` > - `content-box;` > - 預設 > - 內盒大小為 border + padding + height | width > - `border-box;` > - 內盒大小: height | width > - 亦即border跟padding被包含到設定的大小內 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { margin: 30px; } div:first-child { width: 200px; height: 200px; background-color: blue; box-sizing: content-box; border: 2px solid gray; padding: 20px; } div:last-child { width: 200px; height: 200px; background-color: skyblue; box-sizing: border-box; border: 2px solid gray; padding: 20px; } </style> </head> <body> <div>content-box</div> <div>border-box</div> </body> ``` ### 盒子陰影 `box-shadow: *h-shadow *v-shadow blur spread color insert` > - spread: 尺寸 > - insert: > - outside > - 不能寫, 就直接省略 > - inset > - 基本上跟文字陰影使用方法差不多 ```htmlmixed= <head> <meta charset="utf-8"> <style> h1 { font-size: 50px; color: black; /* text-shadow: *h-shadow *v-shadow blur color */ text-shadow: 5px 5px 5px rgba(0,0,0,0.5) } div { width: 200px; height: 200px; border: 2px solid gray; /* box-shadow: *h-shadow *v-shadow blur spread color insert */ box-shadow: 5px 5px 5px 5px rgba(0,0,0,.5); } </style> </head> <body> <h1>Shadow</h1> <div></div> </body> ``` ## CSS的定位機制 > - 普通流(Normal Flow): > - 一般由上而下, 由左至右排列 > - 塊元素佔一行, 行內依序排隊 > - 浮動(Float) > - 定位 ## Float `float: val;` > - left, right, none(預設) > - 一開始的Float是要解決文字環繞圖片的效果 > - <img src="https://i.imgur.com/cz6vusL.png" style="width: 100px;"/> -> <img src="https://i.imgur.com/pKeNG7i.png" style="width: 100px;"/> > - 後來發現可以讓盒子一行排列 > <img src="https://i.imgur.com/qGc9URt.png" style="width: 100px;"/> > ![]() > HackHD的BUG行, 勿刪 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; /*display: inline-block;*/ float: left; } div:first-child { background-color: blue; } div:last-child { background-color: skyblue; } </style> </head> <body> <div></div> <div></div> </body> ``` ### 為何叫做浮動? > - 漂浮在 NormalFlow 之上 > <img src="https://i.imgur.com/7cve7tz.png" style="width: 50px;"/> -> <img src="https://i.imgur.com/L3S1QFF.png" style="width: 50px;"/> > - 圖一為兩個標準流的盒子 > - 圖二為深藍色變成浮動的盒子 > - 此特性會造成佈局困擾, 因為下面的東西往上移後被遮住了 > - 故一般來說會用一個大盒子包起來, 浮動只會在盒子裡面浮 ### 浮動特性 > - 浮動在普通流上 > - 浮動會在padding內 > <img src="https://i.imgur.com/uarKGJb.png" style="width: 100px;"/> > - 灰色border, 淺藍色盒子設為浮動, 深藍設有padding > - 浮動添加後會具有行內塊特性: > - 一行放多個 > - 具寬高 > - 無設寬的盒子寬由內容決定 > - 一個 div, 沒有設寬, 無浮動 ![](https://i.imgur.com/2DVv4iA.png) > - 前者為一個 div 無設寬且浮動, > - 後者為兩個 div 無設寬且浮動. ![](https://i.imgur.com/D2BPde3.png) -> ![](https://i.imgur.com/sllFNv8.png) > - 兩個 span 無設寬無浮動 ![](https://i.imgur.com/6l0y9yt.png) > - 兩個 span 無設且浮跟兩個 div 無設且浮一樣 ### 字體不會被Float壓住 <img src="https://i.imgur.com/Gx4EC2m.png" style="width: 200px;"/> > - 上圖父元素為深藍底, 淺藍與橘色為浮動, 黃色為標準 > - 由此可知標準盒子的確往上跑了，但是字被卡在外面 ```htmlmixed= <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .father { width: 600px; height: 600px; background: blue; margin: 300px auto; } .son1 { width: 200px; height: 400px; margin-top: 200px; background: skyblue; float: left; } .son2 { width: 300px; height: 300px; background: orange; float: left; } .son3 { width: 400px; height: 400px; background: yellow; } div { font-size: 30px; } </style> </head> <body> <div class="father"> <div class="son1">float</div> <div class="son2">float</div> <div class="son3">Unfloat</div> </div> </body> ``` ## 版心與佈局 ### 版心(可視區) > - 網頁主體 > - 一般水平居中 > - 常見寬度為960px以上 ### 佈局 #### 一列固定寬度且居中 > <img src="https://i.imgur.com/bWnKwB7.png" style="width: 100px;"/> > Bug行, 勿刪 ```htmlmixed= <head> <meta charset="utf-8"> <style> .top, .banner, .main, .footer { width: 200px; margin: 0 auto; margin-bottom: 5px; font-size: 18px; text-align: center; } .top { height: 50px; background: red; } .banner { height: 30px; background: orange; } .main { height: 100px; background: yellow; } .footer { height: 30px; background: purple; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="main">main</div> <div class="footer">footer</div> </body> ``` #### 兩列左窄右寬 > <img src="https://i.imgur.com/I2j6xoY.png" style="width: 100px;"/> > Bug行, 勿刪 ```htmlmixed= <head> <meta charset="utf-8"> <style> .top, .banner, .main, .left, .right, .footer { width: 200px; margin: 0 auto; margin-bottom: 5px; font-size: 18px; text-align: center; border: 1px solid gray; } .top { height: 50px; background: red; } .banner { height: 30px; background: orange; } .main { height: 100px; background: yellow; } .left { height: 100px; width: 93px; background: green; float: left; margin-right: 5px } .right { height: 100px; width: 98px; background: blue; float: left; } .footer { height: 30px; background: purple; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body> ``` #### 一列固定寬度且居中 > <img src="https://i.imgur.com/rRBEJOA.png" style="width: 100px;"/> > Bug行, 勿刪 ```htmlmixed= <head> <meta charset="utf-8"> <style> * { margin: 0px; padding: 0px; } .top, .banner, .MainTop, .MainBottom, .footer { width: 200px; border: 1px solid gray; margin: 0 auto; margin-bottom: 5px; text-align: center; } .top{ width: 100%; height: 30px; line-height: 30px; } .banner { width: 198px; height: 50px; line-height: 50px; } .MainTop { height: 50px; border: none; } .MainTop div { height: 50px; width: 45px; border: 1px solid gray; float: left; margin-right: 4px; } /* 注意權重 * 只有.NoMargin的權重會不夠 */ .MainTop .NoMargin, .MainBottom .NoMargin { margin-right: 0px; } .MainBottom { height: 70px; border: none; } .MainBottom div { height: 70px; width: 45px; border: 1px solid gray; float: left; margin-right: 4px; } .footer { height: 60px; width: 100%; border: 1px solid gray; line-height: 60px; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="MainTop"> <div></div> <div></div> <div></div> <div class="NoMargin"></div> </div> <div class="MainBottom"> <div></div> <div></div> <div></div> <div class="NoMargin"></div> </div> </div> <div class="footer">footer</div> </body> ``` ### 清除浮動 <img src="https://i.imgur.com/gZuhR0D.png" style="width: 100px"/> -> <img src="https://i.imgur.com/hpzCbKB.png" style="width: 200px"/> > 防Bug, 留空 ```htmlmixed= <head> <meta charset="utf-8"> <style> .Father { border: 1px solid gray; } /*.SonOne, .SonTwo { float: left; }*/ .SonOne { height: 30px; width: 100px; background: skyblue; } .SonTwo { height: 40px; width: 100px; background: yellow; } .Guest { height: 150px; width: 150px; background: brown; } </style> </head> <body> <div class="Father"> <div class="SonOne"></div> <div class="SonTwo"></div> </div> <div class="Guest"> </body> ``` > - 前圖為四個標準流的div, 後圖將SonOne與SonTwo浮動 > - 在父元素沒有給任何高時, 子元素的高=父元素的高 > - 但當子元素浮動時, 父元素是標準流, 子元素都飄起來了, 沒有東西撐起父元素的高, 故後圖父元素的高=0 > - 最後造成底下盒子跑上來 > - 解決辦法: > - 直接給父元素高 > - 但很多時候沒辦法給父元素高, > - 比如新聞不知道一篇有多長 > - 清除浮動(閉合浮動) > - 閉合父元素的出入口, 讓浮動元素不影響他人 ### 清除浮動方法 `clear: val` - left: 清除左側浮動影響 - right: 清除右側浮動影響 - both (一般都用這個) #### 額外標籤法 > - 在浮動元素尾添加空標籤並添加清除浮動效果 > - 例如`<div style="clear:both;></div>"` > - 優點: 簡單易懂 > - 缺點: 多了一堆空標籤 #### 觸發BFC-父級添加OverFlow `overfolw: hidden; | auto; | scroll;` > - 三個val都可以觸發BFC來解決 > - 優點: 代碼簡單 > - 缺點: 內容太多會有問題 #### 使用::after來添加額外標籤 ```css .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear { *zoom: 1; } ``` > - 內容講解在下面代碼註釋 > - 常使用`:after`來代替`::after`, 以達成相容性 ```htmlmixed= <head> <meta charset="utf-8"> <style> .Father { border: 1px solid gray; /* OverFlow overflow: hidden; */ } .SonOne, .SonTwo { float: left; } .SonOne { height: 30px; width: 100px; background: skyblue; } .SonTwo { height: 40px; width: 100px; background: yellow; } .Guest { height: 150px; width: 150px; background: brown; } /* 額外標籤法 .clear { clear: both; } */ .clear:after { content: "."; /* 內容盡量不要空, 否則firefox7.0之前會生成空格 */ display: block; /* 為了調整高, 故改為塊元素 */ height: 0; /* 此時只有把盒高歸零, 內容還是在那 */ visibility: hidden; /* 把內容隱藏 */ /* 此時已經創造一個標籤且沒有指定空間了 */ /* 等同於<div class="clear"></div>*/ clear: both; } .clear { *zoom: 1; /* *為IE6,7能識別的專屬特殊符號, 觸發haslayout zoom為IE6,7清除浮動的方法*/ } </style> </head> <body> <div class="Father clear"> <div class="SonOne"></div> <div class="SonTwo"></div> <!-- 額外標籤法 <div class="clear"></div> --> </div> <div class="Guest"> </body> ``` #### 使用::before與::after來清除 ```css .clear:before, .clear:after { content: ""; /* 不用添加內容 */ display: table; /* BFC */ } .clear:after { clear: both; } .clear { /* IE6,7 */ *zoom: 1; } ``` > - 邏輯上這個比較好, > - 畢竟叫做閉合浮動, 故當然要有兩個東西把出入口關起來 ## 定位(Position) > - 定位 = 定位模式 + 邊偏移 > - 邊偏移 > - `top | bottom | left | right : 100px;` > - 定位模式 > `E {position: val;}` > - static 自動定位(默認) > - relative 相對定位 > - absolute 絕對定位 > - fixed 固定定位 ### Static > - 靜態位置: HTML 文檔默認的位置, 其實就是Nomal flow > - 靜態定位下, 無法透過邊偏移改變位置 > - 用處: 一般用來清除定位, 亦即本來有定位不想要了 `E { position: static;}` > - 上圖`position: fixed;` > <img src="https://i.imgur.com/xlpFwT9.jpg" style="width: 400px;"/> > - 下圖 `position: static;` > <img src="https://i.imgur.com/Q0iQUgw.jpg" style="width: 400px;"/> ### Relative > - 以自己左上角為基準點移動(相對於自己來移動) > - 原來所佔有的位置繼續佔有! (不脫離標準留) <img src="https://i.imgur.com/C8Pddhz.png" style="width: 100px;"/> > <img src="https://i.imgur.com/1jbL3eG.png" style="width: 150px;"/> > - 左圖為沒有位移 > - 右邊將深藍盒子位移後, 淺藍沒有往上補! > 故==相對定位不脫標== ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: skyblue; } div:first-child { background: blue; left: 100px; top: 100px; position: static; } </style> </head> <body> <div></div> <div></div> </body> ``` ### Absolute > - 完全脫標不佔位 > <img src="https://i.imgur.com/C8Pddhz.png" style="width: 100px;"/> > <img src="https://i.imgur.com/DQMHk6Y.png" style="width: 150px;"/> ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: skyblue; } div:first-child { background: blue; left: 100px; top: 100px; position: absolute; } </style> </head> <body> <div></div> <div></div> </body> ``` > - 絕對定位是元素依據『最近的==已定位==父元素』進行定位 > <img src="https://i.imgur.com/9JVphRP.png" style="width: 100px;"/> > <img src="https://i.imgur.com/cOmKepg.png" style="width: 100px;"/> > <img src="https://i.imgur.com/ZrqUN6r.png" style="width: 100px;"/> > - 左為三個盒子都沒有定位, `.father {margin: 100px;}` > - 中為淺藍絕對定位`left:20px;top:10px;` > 由於父元素沒有定位, 故淺藍跟body對齊 > - 右為淺藍跟灰有設定位, 故淺藍跟灰色父元素對齊 ```htmlmixed= <head> <meta charset="utf-8"> <style> .father { width: 200px; height: 200px; background: gray; margin: 100px; /* 父親有定位就可, 模式不重要 */ position: absolute; } .son { width: 100px; height: 100px; } .son:first-child { background: skyblue; /* 定位 */ left: 20px; top: 10px; position: absolute; } .son:last-child { background: blue; } </style> </head> <body> <div class="father"> <div class="son"></div> <div class="son"></div> </div> </body> ``` > - 絕對定位水平垂直居中 > - 絕對定位用`margin: 0 auto;`是無效的 > - 居中就是自己算啦 > - `left | top: 父50%-子50%;` > - ```CSS > left | top : 50%; /* 移動至父元素的一半 */ > margin-left: -(子元素的寬高一半)px; /* 移回自己一半 */ > ``` ### 子絕父相 <img src="https://i.imgur.com/yIMogPt.jpg" style="width: 500px;"/> > - 前言: > - 相對定位: 佔有位置, 不脫標 > - 絕對定位: 不佔位置, 完全拖標 > - 在做佈局的時候 > - 為了避免定位的子元素擠壓到其他元素, 故子元素經常使用絕對定位 > - 為了避免定位的父元素後, 下面元素往上擠, 故父元素經常使用相對定位來佔位 ### 實作: KKBOX ```htmlmixed= <head> <meta charset="utf-8"> <style> .kkbox { width: 1360px; height: 365px; margin: 30px auto; position: relative; /* 父相 */ } .kkbox div { width: 100px; line-height: 365px; background: rgba(0,0,0,0.3); color: white; text-align: center; position: absolute; /* 子絕 */ } .kkbox div:hover { background: rgba(0,0,0,0.8) } nav { display: inline-block; } .photoOne { width: 225px; height: 365px; background: url(original.jpg) no-repeat -675px 0px; } .photoTwo { width: 900px; height: 365px; background: url(original-1.jpg) no-repeat 0 0; } .photoThree { width: 225px; height: 365px; background: url(original-2.jpg) no-repeat 0 0; } .kkbox .right { right: 0px; top: 0px; position: absolute; /* 子絕 */ } </style> </head> <body> <div class="kkbox"> <div>&lt</div> <nav class="photoOne"></nav> <nav class="photoTwo"></nav> <nav class="photoThree"></nav> <div class="right">&gt</div> </div> </body> ``` ```htmlmixed= <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .kkbox { width: 1360px; height: 365px; margin: 30px auto; position: relative; } .photo { display: inline-block; height: 365px; } .photo:nth-child(2) { width: 225px; background: url(original.jpg) no-repeat -675px 0px; } .photo:nth-child(3) { width: 900px; background: url(original-1.jpg) no-repeat 0 0; } .photo:nth-child(4) { width: 225px; background: url(original-2.jpg) no-repeat 0 0; } .kkbox .left, .kkbox .right { top: 132px; width: 100px; line-height: 100px; background: rgba(0,0,0,0.3); color: white; text-align: center; position: absolute; } .kkbox div:hover { background: rgba(0,0,0,0.8) } .kkbox .right { right: 0px; } .kkbox ul { width: 160px; height: 20px; position: absolute; bottom: 15px; left: 615px; } .kkbox ul li { width: 10px; height: 10px; background: rgba(0,0,0,0.4); float: left; margin: 4px; border: 1px solid gray; border-radius: 50%; } .kkbox ul li:first-child { background: rgba(255, 255, 255, 0.5) } .kkbox ul li:active { background: rgba(255, 255, 255, 0.5) } </style> </head> <body> <div class="kkbox"> <div class="left">&lt</div> <nav class="photo"></nav> <nav class="photo"></nav> <nav class="photo"></nav> <div class="right">&gt</div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> ``` ### Fixed(固定定位) > - 只認瀏覽器 > - 完全脫標不佔位, 不隨滾動而滾動 > <img src="https://i.imgur.com/T4ZO6FQ.png" style="width:200px"/> -> <img src="https://i.imgur.com/hUG4Mc5.png" style="width:200px"/> > - 左圖 > - 淺藍子元素fixed, 深藍父元素absolute > - 子元素沒有因為父元素有定位而依據父元素定位 > - 右圖為頁面向下滾動後, 淺藍依舊停在( 0, 0 ) > - IE6等的低版本不支持 ```htmlmixed= <head> <meta charset="utf-8"> <style> body { height: 3000px; } .father { width: 200px; height: 200px; margin: 200px; background: blue; position: absolute; } .son { width: 100px; height: 100px; background: skyblue; position: fixed; top: 0; left: 0; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> ``` ### 實作: 常用佈局 ```htmlmixed= <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .top { width: 1500px; height: 100px; /* 固定定位一定要有寬高, 除非有內容撐開 */ background: blue; margin: 0 auto; top: 0; left: 50%; margin-left: -750px; position: fixed; } .box { width: 900px; height: 2000px; background: skyblue; margin: 0 auto; margin-top: 100px; } .bar-r, .bar-l { width: 200px; height: 400px; position: fixed; top: 50%; margin-top: -200px; } .bar-r { background: purple; left: 0; } .bar-l { background: pink; right: 0; } </style> </head> <body> <div class="top"></div> <div class="box">haha</div> <div class="bar-r"></div> <div class="bar-l"></div> </body> ``` ### z-index (疊層) <img src="https://i.imgur.com/8QrndjO.png" style="width: 100px"/> -> <img src="https://i.imgur.com/534TdSH.png" style="width: 100px"/> -> <img src="https://i.imgur.com/lUYsuDr.png" style="width: 100px"/> > - 左圖為普通流, 啥都沒動的三個普通盒子 > - 中圖為當所有盒子都定位在(0,0)的樣子 > - 右圖為(0,0) (20,20) (40,40) > - 當元素定位(static)時, 經常發生重疊的現象 > - 如果沒有特別設定, 那疊層就是依順序疊 > - 換句話說，只有定位才有層疊, 默認`z-index: 0` > - 設定方法 `z-index: val;` > - 數值可正可負可0 > - 數值越大則越上面 > - 數值別加單位 > - 只有relative, absolute, fixed 有疊層屬性 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; position: absolute; } div:first-child { background: blue; } div:nth-child(2) { background: darkblue; left: 20px; top: 20px; z-index: 2; } div:last-child { background: skyblue; left: 40px; top: 40px; z-index: 10; } </style> </head> <body> <div></div> <div></div> <div></div> </body> ``` ### 小技巧 <img src="https://i.imgur.com/DupYaaL.png" style="width: 200px;" /> > - 欲達到的效果: 滑鼠經過hover編框變色 > - 一開始創三個有邊框的盒子，並且用浮動讓他們黏在一起 > <img src="https://i.imgur.com/1ul6O2m.png" style="width: 200px;" /> > - 問題: 中間邊框兩倍大 > - 解決: `margin-left: -1px;` > - 第一個盒子向左1px後，後面盒子還沒有動, > - 他們會先緊貼(`float`)著第一個盒子後才做`margin`的動作 > - 所以後面的盒子會蓋上前面盒子左邊編框 > - <img src="https://i.imgur.com/mfWvwqP.png" style="width: 200px;" /> > - 問題: 此時設置hover後, 因右邊編筐被蓋住, 導致前面編筐看起來只有改三邊顏色 > <img src="https://i.imgur.com/l4QJgfE.png" style="width: 200px;" /><img src="https://i.imgur.com/FB3J8rL.png" style="width: 200px;" /><img src="https://i.imgur.com/SwkHiLa.png" style="width: 200px;" /> > - 解決: > - hover時讓盒子相對定位(佔位), 如果用絕對定位(不佔位)，後面浮動會往前衝 > - 此時hover時，盒子就有層級`z-index: 0`而在最上面 > - 問題: > - 有時盒子上會用`absoulute`設置一些小icon， > - 所以有時盒子在一般情況下(沒有hover)也會設置`relative`來子絕父相 > - 導致hover設置`relative`也疊不上去( 大家都是`z-index: 0;` ) > - 解決: > - 盒子本身有設定位的話, 那hover就提高z-index就好了 ```htmlmixed= <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } nav { margin-left: 300px; } div { height: 100px; width: 100px; border: 1px solid blue; margin-top: 300px; float: left; margin-left: -1px; /*position: relative;*/ /* 當盒子本來就設有定位時 */ } div:hover { border-color: red; position: relative; /* z-index: 1;*/ /* hover提高層級 */ } </style> </head> <body> <nav> <div></div> <div></div> <div></div> </nav> </body> ``` ### 定位模式轉換 > - 複習 > ![](https://i.imgur.com/culIp3Q.png) > > - 圖為塊元素(div)跟行內元素(span)給背景色跟高的樣子 > - 塊元素隨便調, 獨占一行, 默認寬度100% > - 行內元素不能調寬高, 大家一起佔一行, 垂直設置無效, 水平可`(margin: 20px)` 只有水平移動, 默認寬=內容 > ```CSS > <style> > div { > height: 50px; > background: skyblue; > } > span { > background: blue; > height: 50px; /* 無意義 */ > } > </style> > ``` > - float, absolute, fixed 設置後, 元素會轉換成類似行內塊的性質(BFC) > - 隨便調, 一起佔行, 默認寬=內容(故一定要給寬或內容) > - <img src="https://i.imgur.com/J0i8Oyv.png" style="width:100px;"/> > > - 圖為將上圖淺藍改為`float:left`, 將深藍加入`position: absolute` > - 此時淺藍寬變成默認內容, 並沒有獨佔一行 > - 深藍高變得可以調整 > ```CSS > <style> > div { > height: 50px; > float: left; > } > span { > background: blue; > height: 50px; /* 此時高就有意義了 */ > position: absolute; > left: 30px; > top: 30px; > } > </style> > ``` > - 故如果本來就要加float, absolute, fixed , 那就不用`display`轉換了 ### 實作: 背景連結 <img src="https://i.imgur.com/J6gMe6N.jpg" style="width: 400px;" /> > - 經常會有頁面在背景塞廣告，且該廣告是可以點的`<a>` > - 作法: > - 就是在主元素的上面塞一個a且放背景圖 > - 注意 > - a 必須是不佔位的 (float, absolute), 否則會把主要框框擠下去, 所以a必須不佔位讓下面的盒子上來 > - a 轉換時，必須給寬度100%，否則觸發BFC時的寬高是根據內容的 > ![](https://i.imgur.com/w95DzpZ.png) > ![](https://i.imgur.com/wnsmAjV.png) > - 主元素要設定位(層疊a)且佔位(撐開父元素), 或不佔位且設父元素的高 > 一般都是前者 > - 沒層疊 > ![](https://i.imgur.com/1XakUHC.png) > - 佔位 > ![](https://i.imgur.com/wlah5g9.png) ```htmlmixed= <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .main { position: relative; /* 不用給高, 讓.main撐開就好了 */ } .main a { position: absolute; /* 不佔位 */ top: 0; left: 0; background: skyblue; width: 100%; /* 必須給寬, 否則沒有內容稱寬 */ height: 300px; } .mainin { margin: 0 auto; height: 300px; width: 300px; background: blue; position: relative; /* 層疊 */ } </style> </head> <body> <div class="main"> <a href="#"></a> <!-- 直接在主元素上加一個不佔位的滿版a --> <div class="main_in"></div> 123 </div> </body> ``` > - 另外一種寫法是在主元素上面加一個帶有a的盒子 > - 這種寫法上面那個a的父盒子更不能給高, 否則會把主元素擠下去 ```htmlmixed= <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .a { position: relative; /* height: 200px; 不能給高，不然會把主元素擠下去 */ } .a a { position: absolute; top: 0; left: 0; background: skyblue; width: 100%; height: 300px; } .main { margin:0 auto; height: 300px; width: 300px; background: blue; position: relative; } </style> </head> <body> <div class="a"> <!-- 在主元素上面額外加一個有a的盒子 --> <a href="#"></a> </div> <div class="main"></div> </body> ```