css
文字陰影(css3)
text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色
層疊性1 含義 多種css樣式疊加,瀏覽器處理衝突的一種能力
2 原則 一般情況下,若出現樣式衝突,會按照css書寫的順序 以最後的為準,樣式不衝突,不會層疊
繼承性一般文字顏色和字型大小,font-開頭的屬性,text-開頭的屬性、line-開頭的,color可以被繼承
優先順序id選擇器》class選擇器》標籤選擇器
注意特殊情況
* 行內樣式優先
* css定義了乙個命令!important,該命令賦予最大的優先順序
* 繼承樣式權重為0
* 權重相同,css遵循就近原則,誰靠近元素的樣式具有最大的優先順序
總結
1 首先**選擇器是否直接選中作用的元素還是通過繼承影響作用的元素
2 假如不是繼承則按照權重的計算公式(id選擇器個數 class選擇器個數 標籤選擇器個數),假如三個選擇器個數都一樣,則就近原則(排在最後的優先順序最大)
3 假如都是繼承的,誰描述的近(結構層級)就聽誰的,當描述結構層級一樣,則依次比較id選擇器數量 class選擇器數量 標籤選擇器數量,假如三種選擇器數量也一樣,就近原則(位置就近)
css3動畫
@keyframes 動畫名
100%
元素執行動畫
animation: 動畫名 運動時間 運動曲線
無縫滾動
見案例伸縮布局
傳統的三等份
flex-direction 調整主軸方向
flex-direction: row 預設 水平從左到右
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
justify-content 調整主軸對齊
justify-content: flex-start;
預設值 表示讓子元素從父容器的開頭開始排序
justify-content: flex-end;
表示讓子元素從父容器的後面開始排序但盒子順序不變
justify-content: center;
表示讓子元素在父容器中間顯示
justify-content: space-between;
左右盒子貼近父盒子 中間的均分空白間距
justify-content: space-around;
相當於給每個盒子新增左右margin
align-items 調整側軸對齊(垂直對齊) 對一行的情況排列
align-items: stretch; /預設 子元素高度會拉伸適應父容器(子元素沒有設定高度前提下)/
align-items: center; /垂直居中/
align-items: flex-start;/上對齊/
align-items: flex-end;/下對齊/
flex-wrap 控制是否換行
flex-wrap: nowrap; 預設值 專案不拆行不拆列 收縮顯示 一行內顯示
flex-wrap: wrap; 專案必要時候拆行或拆列
flex-wrap: wrap-reverse; 專案必要時候拆行或拆列,但是相反的順序
flex-flow flex-direction和flex-wrap的簡寫
flex-flow:flex-direction flex-wrap
排列方向 換不換行
order 控制子元素的排列順序
order值越小越排在前面 值可以為負數 預設值為0
align-content
必須父元素設定 display: flex flex-direction: row
flex-wrap: wrap
其值可以設定 stretch center flex-start
flex-end space-between space-around
關於a標籤中可以放div的問題
基於html5的新的內容標籤的分類,新的模型中a標籤被認為是transparent的,所以a標籤內部能否放div取決於a的容器能否放div標籤,取決於他們的content_modal(內容模型)
鬍子哥的重學前端(筆記)css語法
在外部樣式表檔案內使用。指定該樣式表使用的字元編碼。該規則後面的分號是必需的,如果省略了此分號,會生成錯誤資訊。在外部css檔案中寫法如下 charset utf 8 body div.指定匯入的外部樣式表及目標 import url example.css screen and min width...
鬍子哥的重學前端(筆記)css語法
在外部樣式表檔案內使用。指定該樣式表使用的字元編碼。該規則後面的分號是必需的,如果省略了此分號,會生成錯誤資訊。在外部css檔案中寫法如下 charset utf 8 body div.指定匯入的外部樣式表及目標 import url example.css screen and min width...
重學前端系列 Javascript物件
我們可以使用getownpropertydescriptor來檢視屬性狀態 var o o.b 2 a 和 b 皆為資料屬性 object.getownpropertydescriptor o,a object.getownpropertydescriptor o,b 複製 如果想改變屬性的特徵或者...