# css練習
專案參考至mdn
點此檢視效果哦**
## 任務介紹
- 為整體卡片的容器提供乙個固定的寬/高，背景顏色，邊框，以及邊框圓角等等。
- 為header提供乙個漸變的背景顏色，從更暗到更亮，加上圓角，配合在卡片容器上設定的圓角。
- 為footer提供乙個漸變的背景顏色，從更亮到更暗，加上圓角，配合在卡片容器上設定的圓角。
- 將影象向右浮動，使其貼上在名片主要內容的右邊，然後把它的 max-height 設定為 100%
- 編寫乙個面向卡頭規則集,使它們計算的總高度為 50px
- 瀏覽器會為 h2 和 p元素應用預設的 margin，這會影響我們的設計，所以編寫乙個規則集： margin 設定為 0。
- 設定 article 的高度為 120px，但是使用 em來表示。還要給它乙個半透明黑色的背景顏色，產生乙個稍暗一點的陰影，能讓紅色的背景稍微透過。
- 編寫乙個規則集，使 h2 有效的字型大小為20px (使用 em表達) 以及乙個適當的行高將其放置在標題的內容框的**。內容框高度應該是30px
- 為頁尾中的 p 編寫乙個規則集，使它的有效字型大小為 15px (使用 em表達) 以及乙個適當的行高將其放置在頁面的內容框的**。內容框高度應該是30px
- 為 article 中的段落設定乙個合適的 padding 值，讓它和 h2 以及頁尾的段落左邊緣對齊
## 知識點
- 選擇器：筆記
- 型別選擇器（又名元素選擇器）
- 類選擇器
- id 選擇器
- 通用選擇器（*）
- 屬性選擇器
- [子串值（substring value）屬性選擇器
- 偽類
- 組合器和選擇器組
- 選擇器的優先順序:
- 不同級別：!important > 行內樣式》id選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性
- 同級：同一級別中後寫的會覆蓋先寫的樣式
- css數值和單位
- 長度和尺寸
- px 畫素是一種絕對單位
- em 1em與當前元素的字型大小相同
- rem 但它總是等於預設基礎字型大小的尺寸
- vw, vh: 分別是視口寬度的1/100和視口高度的1/100
- 百分比
- 顏色
- 十六進製制值 例如：#ff0000
- rgb 例如：rgb(255,0,0)
- hsl
- 色調：顏色的底色調。這個值在0到360之間，表示色輪的角度。
- 飽和度：飽和度是多少？這需要乙個從0-100%的值，其中0是沒有顏色（它將顯示為灰色），100%是全彩色飽和度。
- 亮度：顏色有多亮或明亮？這需要乙個從0-100%的值，其中0是無光（它會出現全黑的），100%是充滿光的（它會出現全白）。
- opacity 不透明度
- 函式
- 盒模型
- 標準盒模型(content-box)
- 原理
內容寬高+內邊距+邊框+外邊距
- 內容寬高
width寬,height高
- 內邊距
元素的內邊距在邊框和內容區之間,它的屬性是padding
- 單內邊距屬性:
padding-top
padding-right
padding-bottom
padding-left
- 邊框
元素的邊框就是圍繞在內容和內邊距的一條或多條線,它的屬性是border
- 外邊距
圍繞在元素邊框的空白區域,設定外邊距會在元素與元素之間產生乙個間距,它的屬性是margin
- 怪異盒模型(border-box)
- 原理
內容寬度+外邊距(內容寬高包含了內邊距和邊框)
- 垂直外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
- 同級元素發生合併
當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。
- 父子級之間發生外邊距合併
當乙個元素包含在另乙個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。
- 外邊距合併解決辦法
- 同級元素給第二個元素浮動,新增絕對定位,單獨設定某乙個元素inline-block
- 父子級元素外邊距合併解決辦法
1. 給父級設定內邊距代替自己外邊距
2. 給父級加邊框
3. 給父級overflow:hidden;
4. 設定絕對定位
5. 設定display:inline-block;
溫故知新 css布局
本文針對多種css布局進行解析 github 浮動 float left 將元素浮動到左側。right 將元素浮動到右側 none 預設 不浮動 inherit 繼承父元素的浮動屬性 定位 position static 預設 靜態定位 將元素放在文件布局流的預設位置 relative 相對定位 允...
css溫故知新 彈性盒子
css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。通過display flex 來指定盒子型別 彈性父元素屬性 flex direction 指定了彈性子元素在父容器中的位置。flex direction...
溫故知新 ROWTYPE
rowtype 相當於資料庫表裡的一行資料記錄的變數型別。declare 定義乙個emp表裡的一行記錄的資料型別的變數 v emp emp rowtype begin 查詢的emp表裡的資料列必須與v emp的列順序以及個數保持一致 select empno,ename,job,mgr,hireda...