關於兩欄式的一些小分享

--- tags : 分享 --- # 關於兩欄式的一些小分享 ## 在兩欄式版面，設定margin-left:-100%的用途 ### 實作 1. 建立一份index.html 以及 index.css ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="index.css" rel="stylesheet" /> <title>首頁</title> </head> <body></body> </html> ``` index.css ```css= * { margin: 0; padding: 0; box-sizing: border-box; } ``` 2. 基本佈局 index.html ```htmlembedded= <div class = "container"> <div class="middle">Middle</div> <div class="left">Left</div> <div class="right">Right</div> </div> ``` * 首先設置左右兩個div寬度以及container容器的左右那邊距分別為left、right盒子的寬度，這是兩個盒子的佈局位置。 index.css ```css= //窗口小于一定值时布局会混乱，因此加一个最小宽度 //阈值 = 左width x 2 + 右width body{ min-width: 700px; } .container{ padding: 0 300px 0 200px; } .middle{ width: 100%; height: 200px; background: #ccc; } .left{ width: 200px; height: 200px; background: green; } .right{ width: 300px; height: 200px; background: orange; } ``` 做完成果如下： ![](https://i.imgur.com/K7q8nSQ.png) 3. 添加浮動左浮動： ```css= .middle,.left,.right{ float: left } ``` 可以看到黃色的部分網上移動了 ![](https://i.imgur.com/OwV58nX.png) 4. left right盒子移動 * 負margin * 讓left與right爬升至第一行 * 負margin的眾多表現行為之中，這裡只討論脫離了文檔的浮動元素的情況。 * 設置了之後，我們可以知道這三個盒子都脫離了html的文檔，要讓綠色的left往上爬，需要使用到負margin，這個負margin是多少呢？取決於兩個條件： * 元素的寬度 * 元素與上一個元素之間的空白空間 * 我們對當前的佈局做一下修改，將right盒子註釋，middle盒子修改為如下寬度： ```css= .middle{ width: calc(100% - 166px) } ``` * 現在middle與left之間就有了166px的空白空間。設置 margin-left: -10px，會發現left盒子仍在當前行高移動，只不過向左侧移動了10px，接下来设置margin-left: -34px，此时left盒子已经成功上升到第一行了。 * margin-left: -10px; ![](https://i.imgur.com/DnKTP4u.png) * margin-left: -34px; ![](https://i.imgur.com/n0jnKDk.png) 然而这是为什么呢？ * html元素=margin + border + padding + content，那佈局是根據每個div的屬性來決定的，對於設置了浮動的鄉林元素而言，他們脫離了正常的html，當對一個元素設置負margin時，按照第一條規則來看，元素對應的div變小了，負margin多少，就縮小多少。 * 在這個範例中我們設置了margin-left:-34px，本質上div的寬度較之前減少了34px的寬度，實踐上的佈局寬度變為200-34=166px，而166px正是他上一行相鄰元素的空白寬度，因此left的盒子就會流到這個為他量身定做的位置，即：left填補了這一塊空白空間。 :::info 經過一小部分得獎解，大家應該可以明白其中的關鍵原理，那麼我們先將上面的改動還原回去，繼續往下製作。 ::: 那麼可以思考一下，left的盒子與上一行相鄰元素有沒有空白區域，應該沒有！所以想要讓left往上流的話，可以使用margin設置為-200px，他就會上升到第一行的末端。 margin設置為-200px ```css= margin-left: -200px; ``` 執行結果如下： ![](https://i.imgur.com/u4mtCDp.png) 接下來讓left盒子移動到最左側，根據上圖來直接移動，x 的像素即可，x的寬度是100%，即他們共同的父元素的寬度，left須設置`margin-left:-100%`。 ![](https://i.imgur.com/B3nSEte.png) 到这里先停一下，處理一下right div，使用margin-left: -300px即可 ```css= .right{ margin-left: -300px } ``` 結果如下，可以看到全部的div都變成同一層了。 ![](https://i.imgur.com/I3Syhrh.png) 5. 佈局此時的left與right分別在container的左右兩端（注意，這邊是內側），因此我們要讓他們最終分布在container的為側，即左右padding，這兩個距離多少我們是知道的，就是我們的左右div，使用絕對定位即可達成。 ```css= .left{ position: relative; left: -200px } .right{ position: relative; right: -300px; } ``` 整格頁面就被填滿了。 ![](https://i.imgur.com/pd5kIBO.png) :::success 實作完成！！！！ ::: 完整程式碼： index.html： ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="index.css" rel="stylesheet" /> <title>首頁</title> </head> <body> <div class="container"> <div class="middle">Middle</div> <div class="left">Left</div> <div class="right">Right</div> </div> </body> </html> ``` index.css： ```css= * { margin: 0; padding: 0; box-sizing: border-box; } body { min-width: 700px; } .container { padding: 0 300px 0 200px; } .middle { width: 100%; height: 200px; background: #ccc; } .left { width: 200px; height: 200px; background: green; margin-left: -100%; position: relative; left: -200px; } .right { width: 300px; height: 200px; background: orange; margin-left: -300px; position: relative; right: -300px; } .middle, .left, .right { float: left; } ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.