###### tags: `other`

# 01_CSS

## 工具包
> [Tailwind CSS](https://tailwindcss.com/)
> [什麼是 Tailwind CSS？](https://5xruby.tw/posts/tailwind-css-plugin)

## px em換算
> [px em 換算表](http://pxtoem.com/)

## 選擇器
> [30個你必須記住的CSS選擇器](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
> [排除某個元素](https://blog.csdn.net/heygirl1/article/details/53611263)
- 相鄰選擇器 +
1. .hd+.ct+.ft li.more的概念為「 .hd 下面的 .ct 下面的 .ft 這個區塊裡面的 li.more」
2. "+" 指的是剛好相鄰 不是裡面中間也沒相隔
3. 
4. 如果少了.hd 或是少了 .ct 都無法成立 display: block

## 屬性
> [谈谈 CSS 关键字 initial、inherit 和 unset](https://www.cnblogs.com/libin-1/p/6734751.html)

## 不熟悉的屬性
- text-indent 首行字的縮進
- letter-spacing 字符的間距
- word-spacing 單詞的間距
- word-break 文字強制換行、不換行

## 權重
- [強烈推薦收藏好物 – CSS Specificity (CSS 權重一覽)](https://muki.tw/tech/css-specificity-document/)
- <font color="#f44336">pseudo-class</font>優先權順序
- :link
- :visited
- :focus
- :hover
- :active
> [順序有那麼重要嗎？](https://ithelp.ithome.com.tw/articles/10239535)
> [幾個CSS的學習心得與小技巧](https://hackmd.io/@IUOGmfklQWSevEwFz8S1tQ/H1QSHRu-w)

## RWD
> [易犯的 RWD 網站製作失誤](https://blog.user.today/rwd-mistake/)
> [常用斷點(常用螢幕解析度)](https://ithelp.ithome.com.tw/m/articles/10331102)


## :focus-within
- 偽類選擇器
- :focus-within 是一個`可以用來改變上層元素樣式的偽類選擇器`，只要在你要套用的元素上面加上 :focus-within，這樣裡面只要有表單元素有被 focus，就會吃到該樣式。
- <font color="#f44336">可運用於共構的選單，當選單內連結被選取時，父元素會有會有變化。</font>
> [設定 focus 後讓上層元素改變樣式的選擇器- :focus-within](https://tools.wingzero.tw/article/sn/237)
> [CSS :focus-within 的作用和用法](https://www.webhek.com/post/css-focus-within/#google_vignette)

## :has()
- 偽類選擇器
- 可指定子元素、兄弟元素(`+*`)
- 特色：`可子元素、兄弟元素影響父元素`
> [CSS最新的強大 :has() 父層選取器來了！](https://www.tpisoftware.com/tpu/articleDetails/2883)
> [CSS :has()伪类她来了](https://www.zhangxinxu.com/wordpress/2022/08/css-has-pseudo-class/)

## :not()
- 偽類選擇器
- 它的作用是防止特定的元素被選中，它也被稱為反選偽類別（negation pseudo-class）
- 特色：排除你不要的東西(class、選擇器等)
- `div:not(:last-child){ margin-right:10px;}`
- 上方程式碼意思是，最後一個div不要套用該樣式`margin-right:10px`
> [:not() - CSS：层叠样式表 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)
> [CSS的:not選擇器](https://www.webdesigns.com.tw/CSS-not-selector.asp)

## :empty
- 偽類選擇器
- 用於選擇不包含任何子元素的元素。
> [:empty - CSS：层叠样式表 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty)

## 元素垂直置中方法
- 單行置中：line-height
- 多行元素置中：inline-block & vertical-align
- vertical-align原是用於圖片垂直對齊用
- 用於多個元素對其方式
- 如需在父元素內垂直置中，則需添加偽元素撐滿高，才能使它看起來在父元素內是置中的
- 單個元素在父元素內置中：transform
- 利用 transform 裏頭的 translateY ( 改變垂直的位移，如果使用百分比為單位，則是以元素本身的長寬為基準 )，搭配元素本身的 top 屬性
- 需加position: relative、top

    .use-transform{
        width:200px;
        height:200px;
        border:1px solid #000;
    }
    .use-transform div{
        position: relative;
        width:100px;
        height:50px;
        top:50%;
        transform:translateY(-50%);
        background:#095;
    }

- 單個元素在父元素內置中：負margin
- 父元素設定relative
- 元素設定absolute，利用top50%、left50%，將元素左上角位於父元素中心點
- 元素用margin-top、margin-left往上左拉
> [CSS 垂直置中的三個方法](https://www.oxxostudio.tw/articles/201408/css-vertical-align.html)
> [CSS 垂直置中的七個方法](https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html)
> [使用 inline-block 版面配置](https://zh-tw.learnlayout.com/inline-block-layout.html)

## 元素置中方法
- text-align：center
- 設定行內元素置中(inline、inline-block、a、p...)
- 需設定在父元素上
- margin：0 auto
- 設定塊狀元素置中(block、div...)
- 需有固定寬度
- 需設定在元素本身
> [正確的使用margin:0 auto與body{text-align:center;}實現元素居中](https://www.itread01.com/content/1548430205.html)
> [用CSS/CSS3 實現 水平居中和垂直居中的完整攻略](https://www.itread01.com/content/1548951151.html)
> [正確的使用margin:0 auto與body{text-align:center;}實現元素居中](https://www.itread01.com/content/1548430205.html)

## inline-block
- inline-block元素之間會有縫隙，父元素內加 `word-spacing:-1em;`，可解決縫隙問題
- 使用inline-block會內建vertical-align: baseline屬性，在inline-block元素內容多寡不相同時，baseline屬性會讓元素看起來是置下的，因此可用vertical-align: top解決此問題
> [解决设置inline-block后不对齐问题](https://blog.csdn.net/sheng_li/article/details/76805158)
> [解决inline-block元素的3个bug](https://segmentfault.com/a/1190000010934928)
> [去除inline-block元素間間距的N種方法](https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/)

## 圖片隨尺寸縮放

img{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;	
}

## 清除float浮動的各種方法
- 父元素加clearfix(偽元素)

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

## float與Overflow
> [[CSS] Overflow清除Float效果的妙用](https://audilu.com/2011/02/19/css-overflow-clear-float/)
- 圖片元素設定float效果，造成的所謂「文繞圖」效果。若是我們在文字區塊上設定 overflow:auto，文字就不會再繞圖了。
這種設定造成文字會視圖片的寬度來切齊顯示區域，而這樣的設計很常在回覆區域的設計上見到，即是把大頭照放一邊，留言文字切齊放另一邊。

## position概念
#### 有4個值可以使用
- static (不會被定位)
- relative (相對定位/沒設屬性就跟static一樣)
- absolute (絕對定位/定位在上層容器 or body)
- fixed (視窗定位)
- sticky(滑到物件時被固定在上方,是用於menu)
#### 相對定位 & 絕對定位的差異
- 相對定位
1. 相對於原本位置的移動
2. 仍占據原本的位置
3. 其他元素的定位不受影響
4. 元素會重疊
- 絕對定位
1. 完全脫離原本結構(像fixed一樣浮在最上面的圖層)
2. 從父元素往上找有無定位元素(relative | absolute | fixed | inherit)，若無就以body為定位點(左上角)
3. 無占空間
4. 如未設定屬性，元素則漂浮並無占空間在原本位置
> [關於 position 屬性](https://zh-tw.learnlayout.com/position.html)
> [CSS relative? absolute? 傻傻分不清楚](https://ithelp.ithome.com.tw/articles/10212202)

## 關於盒模型Box Model
> [關於 Box Model（區塊模型）](https://zh-tw.learnlayout.com/box-model.html)
> [網頁的Box Model到底是蝦米挖溝](https://medium.com/@zz41354899/%E7%B6%B2%E9%A0%81%E7%9A%84box-model%E5%88%B0%E5%BA%95%E6%98%AF%E8%9D%A6%E7%B1%B3%E6%8C%96%E6%BA%9D-70b087f3e4d8)

## box-sizing
- Box Model的內距(padding)外距(margin)和邊框(border)將不會增加元素本身的寬度。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

> [關於 box-sizing 屬性](https://zh-tw.learnlayout.com/box-sizing.html)

## 用Margin還是用Padding
#### 何時應當使用margin
- 需要在border外側添加空白時。
- 空白處不需要背景（色）時。
- 上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，將得到20px的空白。
#### 何時應當時用padding
- 需要在border內測添加空白時。
- 空白處需要背景（色）時。
- 上下相連的兩個盒子之間的空白，希望等於兩者之和時。如15px + 20px的padding，將得到35px的空白。
#### margin-top的影響
- 交疊的margin，如沒有border、padding相鄰，則會合併。
- 解決方法：
1. 父元素加border
2. 父元素加padding
3. 父元素加overflow:hidden
> [子元素margin-top为何会影响父元素？](https://blog.csdn.net/sinat_27088253/article/details/52954688)
> [不要告訴我你懂margin](https://fredevangigi.pixnet.net/blog/post/57202532)

## background屬性
>[background 属性](https://www.w3school.com.cn/cssref/pr_background.asp)
> [意想不到的background-attachment](https://wcc723.github.io/css/2013/09/25/background-att/)
> [多重背景](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds)
> [漸層效果](http://www.wibibi.com/info.php?tid=CSS3_Gradients_%E6%BC%B8%E5%B1%A4%E6%95%88%E6%9E%9C)
> [background-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position)
> [background-size](https://www.kip.com.tw/modules/news/article.php?storyid=35)

## SVG、圖片遮罩效果
> [CSS Masks 圖片遮罩效果](https://w3c.hexschool.com/blog/24db18f8)
> [在CSS背景图片中使用SVG的优点](http://svgtrick.com/tricks/3b3a77a38f6222b7974039c1ba36abba)
> [CSS: SVG上色](https://ithelp.ithome.com.tw/articles/10201737)

## 全域性樣式
> [css的全域性樣式](https://www.itread01.com/p/651167.html)
> [[Bootstrap]全域性樣式（二）](https://www.itread01.com/p/654426.html)

## css reset
> [reset.css](https://gist.github.com/DavidWells/18e73022e723037a50d6)

## css 動畫
> [CSS3動畫快速入門](https://eyesofkids.gitbooks.io/css3/content/contents/transform2d.html)
> [CSS 加載動畫：理查等等](https://tpu.thinkpower.com.tw/tpu/articleDetails/1795)
> [完整解析 CSS 動畫 ( CSS Animation )](https://www.oxxostudio.tw/articles/201803/css-animation.html)
> 圖片持續移動效果：
`animation: slide 150s linear infinite;`

### 打字動畫
> [快速實作 CSS3 打字動畫](https://blog.arvinh.info/tech/css-typing-animation)
> [可換行的打字動畫效果](https://hamsterism.com/articles/wrapable-typing-animation/)

### transition
> [CSS transition 各種速率](https://wcc723.github.io/css/2013/08/24/css-transtion-speed/)
> [前端新手村 Transition](https://ithelp.ithome.com.tw/articles/10195205)
> [Transition 實作波動拳動圖](https://wcc723.github.io/sass/2013/10/02/transition/)
> [CSS Transitions](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Transitions)

### 互動效果
> [讓設計跟著指尖走：觸控設備上的互動效果](https://sparkful.app/zh-TW/blog/interaction-design-on-touch-screens)
> [CSS微動畫 - 為什麼別人的按鈕點起來比較有感覺？](https://ithelp.ithome.com.tw/articles/10262387)

## 陰影
> [box-shadow 區塊陰影](https://abgne.tw/css/css3-lab/css3-box-shadow.html)
> [CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）](https://www.html.cn/archives/9360)
> [CSS Box Shadow - 僅限頂部和底部](https://stackoverflow.com/questions/6671375/css-box-shadow-top-and-bottom-only)

## flex
#### flex是以下3個值的縮寫，默認值是0 1 auto
[Flexbox Froggy Flex小遊戲](https://flexboxfroggy.com/#zh-tw)
- flex-grow
- flex-shrink
- flex-basis
> [flex：1代表什么意思](https://blog.csdn.net/aliven1/article/details/78853725)
> [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
> [CSS3 display:flex](https://wcc723.github.io/css/2013/10/24/css-flex-1/)

## grid
[Grid Garden Grid小遊戲](https://cssgridgarden.com/)
[layoutit - Grid工具](https://grid.layoutit.com/)
> [CSS Grid 屬性介紹](https://wcc723.github.io/css/2017/03/22/css-grid-layout/)
> [CSS Grid Cheat Sheet Illustrated in 2021](https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3?ref=webdesignernews.com)
> [簡單入門 Grid 屬性/用法/使用情境](https://hoyis-note.coderbridge.io/2021/09/30/CSS-Grid/)

## Slider and Carousel 幻燈片
> [Swiper](https://swiperjs.com/demos/)

## 格線佈局的基本概念
> [格線佈局的基本概念](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)

## 裁切圖片
> [CSS：裁切圖片](https://ithelp.ithome.com.tw/articles/10194708)

## border
### 三角形
> [CSS border-style 邊框樣式](https://www.wibibi.com/info.php?tid=89)
> [使用 CSS border 製作梯形、三角形、對話框](https://www.footmark.info/web-design/css/css-border-create-triangle/)
> [CSS三角形產生器](http://apps.eky.hk/css-triangle-generator/zh-hant)
### Border運用
> [Border 運用技巧（手繪框線、三角形、空間運用）](https://www.casper.tw/css/2020/02/21/css-border/)

## 關於...省略號
- 單行的...
可用共構的function處理，其處理方式為**在需要...的元素上**寫以下語法

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

- 多行的...
可參考桃園市政府首頁的消息區塊，**在需要...的元素上**寫以下語法

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

- *-webkit-line-clamp* 顯示行數，*overflow*是為了要剪裁多出來的行
> [关于文字内容溢出用点点点(…)省略号表示](https://www.zhangxinxu.com/wordpress/2009/09/%E5%85%B3%E4%BA%8E%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA%E7%94%A8%E7%82%B9%E7%82%B9%E7%82%B9-%E7%9C%81%E7%95%A5%E5%8F%B7%E8%A1%A8%E7%A4%BA/)
> [用 CSS 完成單行與多行省略號功能](https://netivism.com.tw/blog/492) **有多行的表現**

## 清除網頁內鍵效果/input(ios.firefox)
> [解決input button在iOS上(iPad/iPhone)css樣式跑掉](https://smiletrip.pixnet.net/blog/post/343751019-%5Bhtml%5D%E7%A7%BB%E9%99%A4input-button%E5%9C%A8ios%E4%B8%8A%E7%9A%84%E5%85%A7%E5%BB%BA%E6%A8%A3%E5%BC%8F)
> [套用CSS樣式後的input button在iOS上的顯示問題](https://evacyl52201.pixnet.net/blog/post/31887873)

## 解決下拉選單option文字過長問題
> [牧謙給的資料](http://jsfiddle.net/t0xicCode/454Lqbz8/)

## IOS Bug
> [iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理](https://segmentfault.com/a/1190000012761272)
> [一个超级诡异的 iOS Safari `position: fixed` 失效问题](https://segmentfault.com/a/1190000008450982)
> [如何讓「backdrop-filter:blur()」效果在 iOS 上運作](https://stackoverflow.com/questions/75606971/how-can-i-make-backdrop-filter-blur-effect-work-on-ios)

## font: 0/0 a;的意思
> [请问css中font: 0/0 a;起什么作用](https://bbs.csdn.net/topics/390494313)

## cursor滑鼠游標
> [CSS 語法「cursor 屬性」改變滑鼠游標的形狀](http://www.flycan.com/article/css/css-cursor-209.html)

## Notification Buttons 通知按鈕
> [How TO - Notification Buttons](https://www.w3schools.com/howto/howto_css_notification_button.asp)

## 模糊效果 (box-shadow / text-shadow)
> [CSS 模糊效果](https://www.oxxostudio.tw/articles/201407/css-blur.html)

## filter
> [CSS webkit filter](https://www.oxxostudio.tw/articles/201407/css-webkit-filter.html)
> [filter 變色特效](https://orandigo.github.io/blog/2020/05/31/20200531-filter/)
> [drop-shadow與box-shado大不同，讓CSS也可為透明圖片加上陰影](https://www.minwt.com/webdesign-dev/css/19671.html)
> [純CSS毛玻璃特效：backdrop-filter屬性介紹](https://wcc723.github.io/development/2020/10/12/frosted-glass/)
> [CSS filter 生成不规则边框.md](https://segmentfault.com/a/1190000040490964)
> [什麼?? CSS也有濾鏡可以用! (CSS3 filter)](https://www.eztrust.com.tw/html/webdesign/show.aspx?num=13&category=B&kind=10)

## Table
- 拿掉Table th td的空間

<table style="border-collapse:collapse">

- 使table/th的寬度均分一致：`table-layout: fixed`
- 強制table的內文斷行：`word-wrap:　break-word`
> [用CSS+DIV畫表格(table)進行網頁排版](https://sofree.cc/css-table/)

## 計算式calc()
> [CSS： calc() 數值運算](https://5xruby.tw/posts/css-calc/)
> [《CSS3教學》calc讓CSS單位也可用加、減、乘、除](https://www.minwt.com/webdesign-dev/css/11583.html)
- 
top-logo.png寬為400px，照上寫法margin-left為200px。
- 
有變數的話就不用括胡
> [SASS : #{ } 插值](https://ithelp.ithome.com.tw/articles/10204325) calc內加入變數

## 路徑概念
> [路径中“./”、“../”、“/”代表的含义](https://blog.csdn.net/Young__Fan/article/details/80152501)

## pointer-events
> [穿透的 div ( pointer-events )](https://www.oxxostudio.tw/articles/201409/pointer-events.html)

## checkbox樣式
> [修改checkbox樣式](https://www.itread01.com/content/1546518799.html)

## 影像地圖
> 讓地圖focus時會出現outline樣式：在地圖的img加上position: static
> [如何製作響應式的影像地圖](http://blog.shihshih.com/responsive-image-map/)
> 修改focus顏色：

map area:focus {
    outline-width: 3px;
    outline-style: dashed;
    outline-color: invert($major-color);
}

## ID錨點
> [HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)](https://vector.cool/offset-anchor-tag-link/)
> [解決 HTML Anchor 內文被選單遮住的問題](https://coder.tw/?p=7479)

body :target:before{
  display: block;
  content: "";
  height: 160px;
  margin: -160px 0 0;
}

body改成要移動到的區塊

## print設定
> [關於 @media print 的二三事](https://kakadodo.github.io/2018/03/13/css-media-print-setting/)

## CSS濾鏡效果
> [CSS濾鏡效果](http://blog.shihshih.com/css-filter/)
> [CSS魔法堂：那個被我們忽略的outline](https://www.itread01.com/ehkxex.html)

## lightbox
> [利用純 CSS3 做出自適應的 lightbox](https://muki.tw/tech/responsive-css3-lightbox-without-javascript/)

## 禁用hover及a連結
> [是否有方法阻止":hover" 触发样式](https://segmentfault.com/q/1010000000121521)
> [如何禁用連結](https://iter01.com/52661.html)

## iframe
### 隨RWD縮放
原理是使用 父元素 裡的 padding-bottom (或 padding-top 也可以) 屬性將 iframe 撐開，這裡使用 75% 是因為 iframe 起始值的 width 為 600 而 height 為 450，所以 height 永遠為 width 的 0.75 。

<style>
    .父元素classname {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        overflow: hidden;
    }
    .父元素classname iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

> [iframe 如何跟著 RWD 網站縮放](https://ian.partners-studio.com/2017/07/07/iframe-%E5%A6%82%E4%BD%95%E8%B7%9F%E8%91%97-rwd-%E7%B6%B2%E7%AB%99%E7%B8%AE%E6%94%BE/)
> [設定iframe內鑲YouTube影片的寬度為100%，高度自動調整](https://nknuahuang.wordpress.com/2020/04/23/how-to-make-a-responsive-100-width-youtube-iframe-embed/)

## 變反白選取的顏色
> [CSS 改變反白選取的顏色 ::selection](https://tools.wingzero.tw/article/sn/62)

## 文字處理
> [[教學] 透過CSS3的屬性text-stroke，就能實現樓空的文字邊框效果](https://www.minwt.com/webdesign-dev/css/22137.html)

## 混合模式(像PS一樣)
> [我把CSS變成Photoshop了！我跟mix-blend-mode剛認識](https://www.tpisoftware.com/tpu/articleDetails/2798)
> [參考網頁](https://nanatsuya-stay.com/)

## min-content、max-content
> [理解CSS3 max/min-content及fit-content等width值](https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/)
> [CSS 的 min-content 與 max-content 屬性](https://tools.wingzero.tw/article/sn/754)

## Textarea 文字框的各種問題
> [Textarea Tricks 文字框技巧](https://css-tricks.com/textarea-tricks/)
> [顯示文字框的文字區域而不滾動](https://stackoverflow.com/questions/30050605/display-all-textarea-rows-without-scrolling)
> [列印文字框時只顯示卷軸](https://stackoverflow.com/questions/49876216/printing-bootstrap-text-area-it-only-shows-scroll-bar)

## RWD & CSS Media Queries
> [RWD & CSS Media Queries & iOS Safari 上的經驗談](https://ithelp.ithome.com.tw/articles/10337429)

## 跨瀏覽器
> [跨瀏覽器網頁設計密技](https://blog.miniasp.com/post/2012/05/02/Building-Website-is-not-that-easy-CSS-Hacks-and-IE-Conditional-Comments) 各瀏覽器 CSS Hacks 技巧
> [不同瀏覽器用不同CSS](https://www.tad0616.net/modules/tad_book3/page.php?tbsn=4&tbdsn=73)

## 步驟進度條
> [偽元素應用- Step progress bar 進度條](https://ithelp.ithome.com.tw/articles/10200843?sc=rss.iron)

## CSS計數器
`counter-*`
> [counter- 讓 css 幫你計數](https://tools.wingzero.tw/article/sn/252)
> [使用 CSS 计数器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)