重學前端 2 簡單回顧css

2021-09-25 10:58:36 字數 2128 閱讀 5026

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 複製 如果想改變屬性的特徵或者...