H5C3知識點今日總結

2021-09-19 17:13:24 字數 2409 閱讀 4080

結構(位置)偽類選擇器(css3):

p:first-of-type  : 匹配同型別中的第乙個同級兄弟元素p

p:last-of-type  : 匹配同型別中的最後乙個同級兄弟元素p

p:first-child  : 匹配父元素的第乙個子元素p。

p:last-child  : 匹配父元素的第乙個子元素p。

p:nth-child(n) : 返回其父元素的第n個p元素

偽元素選擇器(css3):

e::first-letter文字的第乙個單詞或字

e::first-line 文字第一行

e::selection 可改變選中文字的樣式

e::before和e::after 在e元素內部的開始位置和結束位建立乙個元素,該元素為行內元素,且必須要結合content屬性使用。

e[屬性] {}

找到div標籤中class有cls的標籤 div[class="cls"]

找到div標籤中class有cls開頭的標籤 div[class^="cls"]

找到div標籤中class有cls結束的標籤 div[class$="cls"]

找到div標籤中class有包含cls的標籤 div[class=*"cls"]

border-radius  圓角邊框

box-shadow  陰影邊框 ---六個值(前兩個值必寫)

水平陰影(可負值) 垂直陰影(可負值) 模糊距離 陰影尺寸 陰影顏色  外部陰影(outset)改為內部陰影(inset)

text-shadow: 水平位置  垂直位置  模糊距離 陰影顏色;

通過background-size設定背景的尺寸

可以設定長度單位(px)或百分比(設定百分比時,參照盒子的寬高)

設定為cover時,會自動調整縮放比例,保證始終填充滿背景區域,如有溢位部分則會被隱藏。我們平時用的cover 最多

設定為contain會自動調整縮放比例,保證始終完整顯示在背景區域。

box-sizing: content-box

盒子大小為 width + padding + border content-box:此值為其預設值,其讓元素維持w3c的標準box mode

box-sizing: border-box

盒子大小為 width 就是說 padding 和 border 是包含到width裡面的

transition: 要過渡的屬性  花費時間  運動曲線  何時開始;

如果有多組屬性變化,還是用逗號隔開。

如果想要所有的屬性都變化過渡, 寫乙個all 就可以

移動 translate

translate(x,y)水平方向和垂直方向同時移動

translatex(x)僅水平方向移動(x軸移動)

translatey(y)僅垂直方向移動(y軸移動)

縮放 scale

scale(x,y)使元素水平方向和垂直方向同時縮放(也就是x軸和y軸同時縮放)

scalex(x)元素僅水平方向縮放(x軸縮放)

scaley(y)元素僅垂直方向縮放(y軸縮放)

scale()的取值預設的值為1,當值設定為0.01到0.99之間的任何值,作用使乙個元素縮小;而任何大於或等於1.01的值,作用是讓元素放大

旋轉 rotate

語法: transform:rotate(45deg);

注意單位是 deg 度數

transform-origin可以調整元素轉換變形的原點

如果是4個角,可以用 left top這些,如果想要精確的位置, 可以用 px 畫素。

傾斜 skew

skew(deg,deg)

可以使元素按一定的角度進行傾斜,可為負值,第二個引數不寫預設為0。

3d模型: 負值到正值

x軸水平左向右

y軸垂直上到下

z軸遠到近

透視(perspective)

腦顯示屏是乙個2d平面,影象之所以具有立體感(3d效果),其實只是一種視覺呈現,通過透視可以實現此目的。

透視原理: 近大遠小

perspective 一般作為乙個屬性,設定給父元素,作用於所有3d轉換的子元素

translatex(x) 水平方向移動

translatey(y) 垂直方向移動

translatez(z) 直觀表現形式就是大小變化 實質是xy平面相對於視點的遠近變化

translate3d(x,y,z)

[注意]其中,x和y可以是長度值,也可以是百分比,百分比是相對於其本身元素水平方向的寬度和垂直方向的高度和;z只能設定長度值

backface-visibility 屬性定義當元素不面向螢幕時是否可見。

H5C3小知識點總結

相對定位 reletive 絕對定位 absolute 注意 overflow hidden text overflow ellipsis white space nowrap display webkit box webkit box orient vertical webkit line cla...

H5C3關鍵點記錄

與 這些類似,h5把這些布局語義話,並沒有本質區別。定義了文件的頭部區域 定義頁面的側邊欄內容 定義頁面內容之外的內容 定義 section 或 document 的頁尾 在ie9一下並不支援html5的語法規則,需要通過引入html5shiv.min.js這個外掛程式相容ie9一下 1.datal...

今日c 知識點總結

1.const char p和char constp有什麼區別?const char p 表示的是指標指向的內容不能修改 p 是不可以的 char const p 表示的是指標指向的內容可以修改,p本身的內容 指的是位址 不可修改 比如一開始初始化的時候p a 但是現在p b 這樣是不對的 2.有參...