# 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)