1.設定高度為0 - - -height:0px;
2.設定寬度為0 - - -width:0px;
3.邊框全透明 - - -border：num solid transparent
4.給需要的方向加顏色 - - -border-[top | right | bottom | left]-color:顏色值
transparent - - -完全透明
寬=w(內容content+margin+padding)
box-sizing:border-box;
彈性盒模型：主軸 側軸
主軸：預設水平左---->右
側軸：預設垂直方向
彈性盒模型子專案預設在主軸排列，左---->右
如果主軸為水平，側軸為垂直
子專案預設一行排列，排不下，會被壓縮
1.dispiay:flex-----把父元素設定為彈性盒模型
2. flex-direction-----設定主軸方向
row----------水平從 左---->右
row-reverse–水平從 右---->左
column-----------垂直 上—>下
column-reverse—垂直 下—>下
3. justify-content-----設定專案主軸對齊方式
flex-start-----主軸起點對齊
flex-end------主軸末端對齊
center--------居中對齊
space-betwwen-----兩端對齊，多餘分到專案之間
space-around-------自動對齊，多餘分到專案兩側
4. align-items--------側軸只有一行，側軸對齊方式
flex-start-----側軸起點對齊
flex-end------側軸末端對齊
center--------側軸居中對齊
5.align-content-------側軸有多行，側軸對齊方式
flex-start-----側軸起點對齊
flex-end------側軸末端對齊
center--------側軸居中對齊
space-betwwen-----兩端對齊，多餘分到專案之間
space-around-------自動對齊，多餘分到專案兩側
6. flex-wrap--------子專案是否換行
nowrap-----不換行，預設值
wrap--------換行
wrap-reverse-----反轉換行
給子元素設定的屬性
1. align-self----給子元素側軸對齊方式
auto--------預設值，如果父元素align-items,auto值為父元素 align-items屬性值；如果父元素沒有align-items值，auto值為：
stretch-------拉伸，把子專案寬高拉伸至父元素寬高
flex-start-----側軸起點對齊
flex-end------側軸末端對齊
center--------側軸居中對齊
注意：
1.子專案在主軸方向上的值（寬或高）一定要設定
2.order:num-----設定子元素排序，num越大越往後
3.flex-grow-----設定子元素放大比例( 剩 餘 空間 )
flex-----------設定子元素所佔彈性容器比例
4.flex-shrink----設定子元素壓縮比例，預設1(等比壓縮);0(不壓縮)
5.flex-basis-----設定子元素主軸方向寬度 或 高度，原來的寬高被覆蓋
邊框陰影
box-shadow：x距離 y距離 模糊度 邊框 顏色 inset(內陰影- - 不寫預設**影)
邊框圓角
border-radius: 四個值：左上 右上 右下 左下
兩個值：左上右下 右上左下
eg:border-top|bottom-left|right-radius:單獨新增圓角
border-radius：x1 x2 x3 x4 / y1 y2 y3 y4
文字陰影：text-shadow: x y 模糊度 顏色
文字描邊：-webkit-text-stroke：描邊寬度 顏色
文字排版：direction: rtl / ltr
背景:background-size:
1.百分比
2.數值+px
3.auto:預設值
4.cover:等比縮放，直到一邊完全覆蓋
5.contain：包裹
背景位置
放置區域：
background-origin-----設定背景圖放置位置
取值：border-box—邊框位置
padding-box—padding位置，預設
content-box—內容位置
最終顯示區域：
background-clip-----最終顯示區域
取值：border-box—邊框位置，預設
padding-box—padding位置
content-box—內容位置
通過獲取裝置特性，為其設定相應css樣式
語法：@media all and (條件表示式）
@media all and (條件1）and (條件2）
注意：條件表示式一般使用最小寬度 最大寬度來表示
1. 如果使用最小寬度，值越小越在前面
2. 如果使用最大寬度，值越大越在前面
移動端布局;
移動端布局：邏輯畫素=物理畫素 / 畫素比dpr
設計圖為640px -750px --dpr 為 2 | 1080px–dpr 為 3
@font-face
新增字型：font-family:" 自定義暱稱"
使用@font-family 定義字型名稱 和 引入路徑
@font-face
2.給想要新增字型圖示新增
span
3.給標籤新增字型的編碼
css樣式學習筆記三
注 其中的內容只是自己學習時的一些筆記，好記性不如爛筆頭，在此記錄方便以後鞏固！1 邊距 1 內邊距 padding top padding left padding right padding bottom 值為畫素值 2 外邊距 margin top margin left margin rig...
CSS基礎學習筆記（三）
css類的偽類 selector.class pseudo class元素 元素中的第乙個 元素 元素中的所有 元素 css類也可以使用偽元素 first line 偽元素只能用於塊級元素。下面的屬性可應用於 first line 偽元素 建立三個相等的列 column 列後清除浮動 row aft...
CSS基礎 CSS 三大特性 學習筆記
css層疊性最後的執行口訣 長江後浪推前浪，前浪死在沙灘上。簡單的理解就是 子承父業。css繼承性口訣 龍生龍，鳳生鳳，老鼠生的孩子會打洞。1 權重計算公式 關於css權重，我們需要一套計算公式來去計算，這個就是 css specificity 特殊性 標籤選擇器 計算權重公式 繼承或者 0,0,0...