---
# System prepended metadata

title: Treehouse html/css

---

# Treehouse html/css
[預設專案包](http://www.initializr.com/) | [響應式網頁起源](http://alistapart.com/article/responsive-web-design/) | [響應式網頁原則](https://blog.teamtreehouse.com/modern-field-guide-responsive-web-design) | [使用breakpoint的時機](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/)
```
<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <meta name='viewport' content='width-device-width, initial-scale=1'></meta>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <script src="sum.js"></script>
  </body>
</html>
```
#### html避免瀏覽器自動縮放網頁內容
```
<head>
    /*避免瀏覽器縮放網頁內容的設定*/
    <meta name='viewport' content='width-device-width, initial-scale=1'></meta>
</head>
```
[The meta Viewport Declaration](https://css-tricks.com/snippets/html/responsive-meta-tag/)
[Simulate Mobile Devices with Device Mode in Chrome DevTools](https://developer.chrome.com/docs/devtools/)
#### CSS Reset with Normalize
[Normalize.css](https://necolas.github.io/normalize.css/) 標準化文件

```
* {
    box-sizing: border-box; /*box-size會計算padding跟border*/
}

h1 {
    margin-top: 0px; /*常常最上面的網頁標題的margin會溢出,造成網頁最上方多出一個空白*/
}
```
[display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) ｜[position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) ｜[data type](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types) ｜[Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) ｜[inheritance](https://www.sitepoint.com/css-inheritance-introduction/) | [mobile first](https://bradfrost.com/blog/post/mobile-first-responsive-web-design/) | [hiding content](https://webaim.org/techniques/css/invisiblecontent/) | [labeling controls](https://www.w3.org/WAI/tutorials/forms/labels/)
[media-quries](https://css-tricks.com/a-complete-guide-to-css-media-queries/)常用:width控制螢幕變化
#### JS script tag位置
❌放在 head - 產生 DOM 之前就取值並操作  
✅放在 body - 等產生 DOM 後再取值並操作（等全部 DOM 節點都載入後才讀取得到需要的指定資料）
```
<body>
...
<script src='file.js'></script>   <!-- 把js的檔案連結放在<body>內容底部js才抓得到tag --> 
</body>
```
[How To Add JavaScript to HTML](https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html)
#### html
[entity cahrt](https://www.w3-tools.com/html_entity_chart.html)
#### UI icons
[boxicons](https://boxicons.com/) | [Google icons](https://fonts.google.com/icons) | [Font Awsome](https://fontawesome.com/icons)
#### flexbox
[flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) | [flexbugs](https://github.com/philipwalton/flexbugs)
置中的三種方法
```
/*1*/
.container {
  justify-content: center;
  align-items: center;
}

/*2*/
.container {
  justify-content: center;
}
.item {
  align-self: center;
}

/*3*/
.item {
  margin: auto;
}
```
### 常用layout
#### header logo靠左 nav-bar靠右
```
.container{
    display: flex;
    flex-direction: row;
    justify-content: space-between; /*不一定需要!?*/
}

.logo{
    margin-right: auto;
}
```
#### button置column底
```
.column{
    display: flex;
    flex-direction: column;
}

.button{
    margin-top: auto;
    align-self: flex-start; /*置底不延展靠左*/
}
```
#### footer置底(unfixed-height-footer)
```
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content{
    flex: 1; /*flex-grow也可*/
}
```
## Grid layout
[Grid by Example - Rachel Andrew](https://gridbyexample.com/) | [Intro to CSS Grid - Jen Simmons](http://labs.jensimmons.com/) | [Relationship of grid layout to other layout methods](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
### Grid [Concepts and Terminology](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
![](https://i.imgur.com/jDuvbWg.png)
#### Defining a Grid
```
div {
display: grid;
grid-template-columns: 300px auto 20%;    //Grid Tracks,欄寬(有幾欄就設幾個)
grid-template-rows: 100px 100px;    //Grid Tracks,列高(有幾列就設幾個)
column-gap: 20px;    //欄列gap一樣的話可以用縮寫gap
row-gap: 10px;
}
```
* [The Grid container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#grid_container)
* [Grid lines](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Lines)
![](https://i.imgur.com/XOy8ET6.png)
* Grid Tracks
The space between two adjacent grid lines( the **columns** and **rows** of the grid).
1. Column track設成`auto`會自動填滿(size item based on content)
2. Rows預設高度(沒指定的皆為)為內容高
3. item數不夠會留空白, 沒tag的內容為Anonymous grid items
* Grid gap
gap只有中間有 邊邊沒有
### Flexible size Grid
讓items自動wrap和調整大小,來符合container's width,可實現部分Media query的功能
* Introducing [**fr**](https://css-tricks.com/introduction-fr-css-unit/)
a Flexible CSS Length Unit `fr`(or fraction) designed for creating grid tracks that expand and contract based on the free space in the grid.
```
div {
display: grid;
grid-template-columns: 2fr 1fr 200px;    //第三欄固定200px,剩下的空間分配兩份和一份 
gap: 20px;
}
```
* Set Tracks with `repeat()` Notation
```
grid-template-columns: 2fr repeat(3, 1fr);    //後面三欄各1fr
```
* Flexible Track Sizing with `minmax()`
```
grid-template-columns: minmax(200px, 300px) 1fr 1fr;    //第一欄寬度會介於200px~300px之間
//只設定最小值
grid-template-columns: minmax(200px, 1fr) 1fr 1fr;    //第一欄最小200px,超過三欄平均分配
//混用repeat()
grid-template-columns: repeat(3, minmax(200px, 1fr));    //三欄皆最小200px,超過平均分配
```
#### `Repeat()` Tracks with `auto-fill` and `auto-fit` (**可替代Media quary功能**)

```
.grid {
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 60px);    //container(1000px)能塞幾個60px就裝幾個,會包含gap
    gap: 15px;
}
```
如下圖,repeat生出空的 60px column tracks來裝滿container
![](https://i.imgur.com/5BjQtC2.png)

搭配fr彈性處理**剩下空間**:
* **auto-fill**: 生出空的欄來塞滿,不夠的平均分配
```
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
```
items數夠時,盡量塞item,多的空間分給每個item
![](https://i.imgur.com/oVydyzB.png)
items數不夠時會生出空的欄
![](https://i.imgur.com/8TWYpHw.png)

* **auto-fit**: 把空間直接平均分配(**常用**)
```
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
```
![](https://i.imgur.com/amg5sqG.png)
### The [Explicit and Implicit](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#implicit_and_explicit_grids) Grid
![](https://i.imgur.com/TslGrHz.png)

**Explicit Grid**: 指定的grid,有限制的items數量

**Implicit Grid**: grid container自動產生的隱藏grid,用來position在Explicit Grid之外的extra items
--- default auto-size: 根據content大小
#### Control Implicit Tracks
* `grid-auto-rows`: 隱藏列高
* `grid-auto-columns`: 隱藏欄寬
```
.grid {
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    grid-auto-rows: minmax(150px, auto);    //隱藏列高最小150px,依內容增加高度
}
```
* `grid-auto-flow`: 指定把多的items放在隱藏欄或隱藏列, defaul是row
```
grid-auto-flow: column;    //多的items放在隱藏欄
```
###  Alternate methods for positioning items
#### [Position Items by Line based placement](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Positioning_items_against_lines)
```
header{
    grid-column-start: 1;
    grid-column-end: -1;
}
```
* Line based placement用在Grid item上,指定起始跟結束的grid line
* [Negative Grid Lines](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid#counting_backwards)
![](https://i.imgur.com/yeEZ8Gn.png)
* Shorthand Syntax
```
header{
    grid-column: 1 / -1;
}
```

[CSS Grid Layout: The Span Keyword](https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword) | [Seven Ways You Can Place Elements Using CSS Grid Layout](https://www.sitepoint.com/seven-ways-you-can-place-elements-using-css-grid-layout/)
#### Placing Elements Using [Grid Template Areas](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
1. Use [`grid-area`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)幫grid area取名,名字隨意
2. Use [`grid-template-areas`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)裡名字的排列定義layout
* 可用`.`表示空白area,連續幾個`...`都可以(ASCII method of grid layout)
```
.container{
    ...
    grid-template-areas:
    "header header"
    "main aside"
    "footer aside";
}

header{
    grid-area: header;
}
main{
    grid-area: main;
}
aside{
    grid-area: aside;
}
footer{
    grid-area: footer;
}
```
![](https://i.imgur.com/l93Cgit.png)
#### Adjust the Grid with Media Queries
```
.container{
    ...
    grid-template-columns: 1fr;    //mobile first
    grid-auto-rows: minmax(150px, auto);
    gap: 10px;
    grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
}

...

@media (min-width: 768px){
    .container{
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 100px minmax(150px, auto) 100px;
        grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    }
}

@media (min-width: 992px){
    .container{
        grid-template-areas:
        "header header header"
        "nav main aside"
        "nav footer footer";
    }
}
```
#### Using [Grid with Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#Grid_and_flexbox)
[Does CSS Grid Replace Flexbox?](https://css-tricks.com/css-grid-replace-flexbox/) | [Two different ways you could write fallbacks for CSS Grid](https://twitter.com/guilh/status/870706512364060672)
Flexbox強項: Align and distribute space within a single access.
**tips**:把一個grid item當flex container用
### Firefox Grid Inspector Tool
* [CSS Grid Inspector: Examine grid layouts](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)
* 火狐的瀏覽器for Dev & testing:[Firefox Nightly](https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly) | [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/)
* [Chrome DevTools: Inspect CSS grid layouts](https://developer.chrome.com/docs/devtools/css/grid/)

![](https://i.imgur.com/NN6UeuF.png)

![](https://i.imgur.com/Q3BqtuI.png)
