站點:前端開發文檔
原文:CSS選擇器
原文:CSS繼承屬性
原文:CSS3核心模塊
原文:CSS盒子模型
原文:CSS背景圖像
原文:CSS清除浮動
原文:CSS定位
CSS選擇器
-
並集:對選擇器進行分組,被分組的選擇器可以分享相同的聲明。用逗號將需要分組的選擇器開分。
h1,h2,h3,h4,h5,h6{}
-
交集:兩種屬性同屬一個元素
-
p.name{}
、p#id{}
、.name1.name2{}
-
-
後代(派生):根據元素在位置上的關係定義樣式,使用空格隔開,後代選擇器儘量不要超過3個,不必把每個層級都列出,只需要寫關鍵點即可
li strong {}
-
子代:只能選擇作爲某元素的子元素,只選擇子代,往後孫子一代不選擇
h1 > strong {}
-
兄弟和相鄰兄弟:選擇緊接在另一元素後的,並且二者有相同父元素
h1 + p {}
-
屬性:對帶有指定屬性的HTML元素設置樣式,權重爲10
-
屬性選擇器:爲帶有
title
屬性的所有元素設置樣式,[title] {}
-
屬性和值選擇器:爲
title="name"
的所有元素設置樣式,[title=name] {}
-
設置表單的樣式:
input[type="text"] {}
-
屬性選擇器:爲帶有
-
僞類:
-
:active
:被激活的元素 -
:focus
:有鍵盤輸入焦點的元素 -
:hover
:鼠標懸停 -
:link
:未被訪問的鏈接 -
:visited
:已被訪問的鏈接 -
:first-child
:元素的第一個子元素 -
:lang
:帶有指定lang
屬性的元素
-
-
權重:
-
div
(1) -
class/類選擇器
(10) -
id
(100)
-
-
結構選擇器(新增僞類(面試題))
-
:not
:排除 -
:nth-child(n)
:第幾個元素 從1開始設置 -
:nth-child(2n)
:偶數元素 從0開始設置 -
:nth-child(2n+1)
:奇數元素 -
:nth-of-type(n)
:某個元素下同類型的第幾個元素 -
:nth-last-child
:倒數第幾個元素 -
:first-child->:nth-child(1)
: -
:fisrt-of-type
:第一個同級兄弟元素 -
:last-of-type
:最後一個同級兄弟元素 -
:nth-of-type(n)
:第幾個同級兄弟元素 -
:last-child
:最後一個子元素 -
:only-child
:僅有一個子元素 -
:only-of-type
:只有一個同類型的子元素 -
:empty
:空內容 -
:checked
:被選中 主要用在input
表單元素
-
-
屬性選擇器
-
E[attr=val]
: -
E[attr|=val]
:只能等於val
或只能以val-
開頭 -
E[attr*=val]
:包含val
字符串 -
E[attr~=val]
:屬性值有多個,其中一個是val
-
E[attr^=val]
:以val
開頭 -
E[attr$=val]
:以val
結尾
-
-
目標僞類選擇器
-
:target()
:用來匹配URL指向的目標元素(存在URL指向該匹配元素時,樣式效果纔會生效)
-
-
僞元素:
-
:first-line
:匹配首行文本,只能用於塊級元素 -
:first-letter
:匹配首字符 -
:before/:after
:DOM元素前後插入額外的內容- 遇到僞元素
before/after
就要加上content=''
-
display: block;
:獨佔一行 -
display: inline-block;
:不獨佔一行
- 遇到僞元素
-
CSS繼承屬性
-
無繼承性的屬性
-
display
:規定元素應該生成的框的類型 -
文本屬性:
-
vertical-align
:垂直文本對齊 -
text-decoration
:添加文本裝飾 -
text-shadow
:文本陰影效果 -
white-space
:空白符的處理 -
unicode-bidi
:設置文本的方向
-
-
盒子模型的屬性:
-
width
、height
-
margin
、margin-top/right/bottom/left
-
border
、border-top/right/bottom/left
-
border-style
、border-top/right/bottom/left-style
-
border-width
、border-top/right/bottom/left-width
-
border-color
、border-top/right/bottom/left-color
-
padding
、padding-top/right/bottom/left
-
-
背景屬性:
background
background-color
background-image
background-repeat
background-position
background-attachment
-
定位屬性:
float
clear
position
top/right/bottom/left
-
min-width/min-height
、max-width/max-height
overflow
clip
z-index
-
生成內容屬性:
content
counter-reset
counter-increment
-
輪廓樣式屬性:
outline-style
outline-width
counter-color
outline
-
-
有繼承性的屬性
-
字體系列屬性
-
font
:組合字體 -
font-family
:字體系列 -
font-weight
:字體粗細 -
font-size
:字體尺寸 -
font-style
:字體風格 -
font-variant
:小寫字母轉換爲大寫,字體尺寸更小 -
font-stretch
:對當前font-family
進行伸縮變形。所有主流瀏覽器不支持。 -
font-size-adjust
:爲某個元素規定一個aspect
值,保持首選字體的x-height
-
-
文本系列屬性
-
text-indent
:文本縮進 -
text-align
:文本水平對齊 -
line-height
:行高 -
word-spacing
:字間距 -
letter-spacing
:字符間距 -
text-transform
:控制文本大小寫 -
direction
:文本書寫方向 -
color
:文本顏色
-
- 元素可見性:
visibility
-
表格佈局屬性
caption-side
border-collapse
border-spacing
empty-cells
table-layout
-
列表佈局屬性
list-style-type
list-style-image
list-style-position
list-style
- 生成內容屬性:
quotes
- 光標屬性:
cursor
-
頁面樣式屬性
page
page-break-inside
windows
orphans
-
CSS3核心模塊
過渡動畫
-
transition
:過渡動畫-
transition-property
:過渡屬性all[attr]
-
transition-duration
:過渡時間 -
transition-delay
:延遲時間 -
transition-timing-function
:運行類型-
ease
:(逐漸變慢)默認值 -
linear
:勻速 -
ease-in
:加速 -
ease-out
:減速 -
cubic-bezier
:貝塞爾曲線
-
-
過渡動畫效果思考步驟:
- 找到過渡屬性
- 找到過渡屬性起始值和結束值
- 在合適的位置上增加
transition
屬性
2D變換
-
transform
:變形屬性-
rotate()
:旋轉函數-
deg
:度數 -
transform-origin
:旋轉的基點
-
-
skew()
:傾斜函數skewX()
skewY()
-
scale()
:縮放函數 默認值是1scaleX()
scaleY()
-
translate()
:位移函數translateX()
translateY()
-
animation-聲明關鍵幀
-
關鍵幀——
@keyframes
-
類似於
flash
- 定義動畫在每個階段的樣式,即幀動畫
-
關鍵幀的時間單位
- 數字:
0%
、25%
、100%
等(設置某個時間段內任意時間點的樣式) - 字符:
from(0%)
、to(100%)
:
- 數字:
-
格式
-
@keyframes
:動畫名稱 {動畫狀態}
-
-
animation-調用動畫
-
必要屬性
-
animation-name
:動畫名稱(關鍵幀名稱) -
animation-duration
:動畫執行時間
-
-
可選屬性:
-
animation-timing-function
-
linear
:勻速 -
ease
:緩衝 -
ease-in
:由慢到快 -
ease-out
:由快到慢 -
ease-in-out
:由慢到快再到慢 -
ease-bezier(num,num,num,num)
:特定的貝塞爾曲線類型,4個數值需在[0,1]區間內
-
-
animation-delay
:動畫延遲 -
animation-iteration-count
:重複次數 -
animation-direction
:動畫運行的方向normal|reverse|alternate|alternate-reverse
-
animation-play-state
:動畫狀態running|paused
-
animation-fill-mode
:動畫結束後的狀態none|forwards|backwards|both
-
3D變換
-
transform-style: flat|preserve-3d
:3D空間展示 -
perspective
:景深效果 -
transform: persective(800px)
:直接作用在子元素上 -
transform
:新增函數-
translate3d(tx, ty, tz)
:translateX()
translateY()
translateZ()
-
rotate3d(rx, ry, rz, a)
:rotateX()
rotateY()
rotateZ()
-
scale3d(sx, sy, sz)
:sacleX()
sacleY()
sacleZ()
-
圓角 border-radius
-
border-radius
:1-4個數字/1-4個數字- 水平半徑/垂直半徑
- 四個數字方向分別是左上 右上 右下 左下
-
沒有
/
則水平半徑和垂直半徑一樣border-radius: 10px/5px;
- border-radius: 60px 40px 30px 30px/30px 20px 10px 5px
- 例子:圓 橢圓 半圓 扇形
線性漸變 linear-gradient
-
linear-gradient
:([<起點>||<角度>,]?<點>,<點>...) - 只能用在背景上
- 顏色是沿着一條直線軸變化
-
參數
- 起點:開始漸變方向
- 角度:開始漸變角度
- 點:漸變點的顏色和位置
- 重複線性漸變
徑向漸變 radial-gradient
radial-gradient
- 從“一點”向多個方向顏色漸變
-
shape
形狀:ellipse
、circle
或設置水平半徑,垂直半徑 -
size
:漸變的大小,即漸變停止位置:-
closet-side
:最左邊 -
farthest-side
:最遠邊 -
closet-corner
:最近角 -
farthest-corner
:最遠角(默認值)
-
-
position
:關鍵詞|數值|百分比 - 重複的徑向漸變
背景
-
background-origin
-
padding-box
:從padding
區域顯示 -
border-box
:從border
區域顯示 -
content-box
:從content
區域顯示
-
-
background-clip
-
padding-box
:從padding
區域向外裁剪 -
border- box
:從border
區域向外裁剪 -
content-box
:從content
區域向外裁剪 -
text
:文本裁剪
-
-
background-size
-
100% 100%
:百分比 -
10px 10px
:數值 -
contain
:按原始比例收縮,背景圖顯示完整,但不一定鋪滿整個容器 -
cover
:按原比例收縮,背景圖可能顯示不完整,但鋪滿整個容器
-
-
background-attachment
- 背景圖片是滾動/固定
fixed
(固定的) 默認是滾動的
- 背景圖片是滾動/固定
盒子陰影
-
box-shadow
:h v blur spread color inset;-
h
:水平方向偏移 -
v
:垂直方向偏移 -
blur
:模糊半徑 -
spread
:擴展半徑 -
color
:顏色 -
inset
:內陰影,默認是外陰影
-
文本陰影
-
text-shadow
:x y blur color-
x
軸偏移y
軸偏移 模糊度 顏色 - 多層陰影製作文字立體效果,設置多種顏色,中間以逗號隔開
-
-
文字添加邊框
-
text-stroke
:2px blue- 通過設定
1px
的透明邊框,可以讓文字變得平滑 - 顏色設成透明能夠創建鏤空字體
- 通過設定
-
濾鏡
-
-webkit-filter:normal;
:正常 -
-webkit-filter:grayscale(1);
:灰度,取值範圍0-1 -
-webkit-filter:brightness(0);
:亮度,取值範圍0-1 -
-webkit-filter:invert(1);
:反色,取值範圍0-1,0爲原圖,1爲徹底反色 -
-webkit-filter:sepia(0.5);
:疊加褐色,取值範圍0-1 -
-webkit-filter:hue-rotate(30deg);
:色相(按照色相環旋轉,順時針方向)(紅-橙-黃-黃綠-綠-藍綠-藍-藍紫-紫-紫紅-紅)此處爲疊加黃色濾鏡 -
-webkit-filter:saturate(4);
:飽和度,取值範圍0-*,0爲無飽和度,1爲原圖,值越高,飽和度越大 -
-webkit-filter:contrast(2);
:對比度,取值範圍0-*,0爲無對比度(灰色),1爲原圖,值越高對比度越大 -
-webkit-filter:opacity(0.8);
:透明度,取值範圍0-1,0爲全透明,1爲原圖
遮罩
-
mask-image
: -
mask-position
: -
mask-repeat
:
CSS盒子模型
border
邊框
-
三角形箭頭:
- 正方形的任意相鄰兩條邊,然後旋轉一定的角度,得到我們需要的任意方向的箭頭
-
border
、border-width
、border-style
、border-color
-
三角形:
-
border
的3個屬性:border-width/border-style/border-color
,寬度和高度都爲0
,三角形箭頭方向設定顏色,其餘方向顏色設爲透明transparent
-
margin
邊距
-
margin
邊距重疊: 取大值,不是兩者相加之和。 -
margin-top
的傳遞:大盒嵌套小盒,小盒加margin-top
值,傳遞到大盒,導致整體下移。-
解決
margin
的兼容性問題:float: left;
overflow: hidden;
padding-top: 0/1px;
border-top: 1px solid transparent;
-
CSS背景圖像
background
背景
主要屬性:
-
background-color
:背景顏色,簡寫background
- 不能繼承,默認是
transparent
-
inherit
指定背景顏色,從父元素繼承
- 不能繼承,默認是
-
background-image
:背景圖片-
url
:圖片URL地址 -
node
:默認值 背景上未放置圖片 -
inherit
:指定背景圖片從父元素繼承 -
一個元素可以引入多張背景圖片;
- 指定要使用的一個或多個背景圖片,默認情況下,
background-image
放置在元素的左上角,並重復垂直和水平方向
- 指定要使用的一個或多個背景圖片,默認情況下,
- 屬性不能繼承
-
-
background-repeat
:背景重複- 默認重複
background-image
的垂直和水平方向 -
repeat
默認 -
repeat-x
只有水平位置重複 -
repear-y
只有垂直位置重複 -
no-repeat
不重複 -
inherit
從父元素繼承
- 默認重複
-
background-position
:背景定位- 設置背景圖片的起始位置
-
x
、y
水平位置,垂直位置。左上角是0
。單位(px,關鍵字,百分數) - 關鍵字成對出現
left right top bottom center
,僅指定一個關鍵字,其他值將會是center
- 只設定
x
軸方向,默認y
軸爲center
-
inherit
從父元素繼承
-
background-attachment
:背景關聯- 設置背景圖片固定或隨頁面的其餘部分滾動
-
scroll
默認 -
fixed
固定 -
inherit
從父元素繼承
-
background-size
:背景圖像的尺寸大小-
<length>
長度值指定圖像大小。不允許負值 -
<percentage>
百分比指定圖像大小。不允許負值 -
auto
圖像的真實大小 -
cover
將背景圖像等比例縮放到完全覆蓋容器,有可能超出容器 -
contain
等比例所放到寬/高與容器的寬/高相等,背景圖像始終被包含在容器內
-
-
background-origin
:設置背景圖像的參考原點(位置)-
padding-box
:從padding
區域(含padding
)開始顯示背景 -
border-box
:從border
區域(含border
)開始顯示背景 -
content-box
:從content
區域開始顯示背景
-
-
background-clip
:設置對象的背景圖像向外裁剪的區域-
padding-box
:從padding
區域(不含padding
)開始向外裁剪背景 -
border-box
:從border
區域(不含border
)開始向外裁剪背景 -
content-box
:從content
區域開始向外裁剪背景 -
text
:從前景內容的形狀(比如文字)作爲裁剪區向外裁剪,實現使用背景作爲填充色之類的遮罩效果。
-
- 雪碧圖:
background-position: x y
CSS清除浮動
overflow: hidden
-
overflow
溢出隱藏 - 清除浮動
- 解決
margin-top
的傳遞問題
(面試題):
-
單行文本出現省略號(4個必備條件,缺一不可)
-
width
寬度(不寫寬度,默認繼承父元素寬度) -
overflow: hidden;
(溢出隱藏) white-space: nowrap;
-
text-overflow: ellipsis;
文字隱藏的方式,以省略號的方式隱藏
-
-
多行文本出現省略號(必備條件,主要應用在移動端)
-
display: -webkit-box;
彈性盒模型 -
-webkit-box-orient: vertical;
規定元素的排列方式:垂直排列 -
-webkit-line-clamp: 2;
:文字的行數(自定義) -
overflow: hidden;
溢出隱藏
-
-
多個元素在一行顯示的方法
display: inline;
display: inline-block;
float: left/right;
display: inline-block;
元素的特點
- 盒子橫向排列
-
verticle-align
屬性會影響inline-block
元素,值可能會設爲top
- 需要設置每一列的寬度
-
如果HTML源碼中元素間有空格,列與列之間會產生空隙
-
解決方法:
- 如果元素添加了
dispay: inline-block;
,父元素增加一個屬性font-size: 0;
,同時在元素本身增加font-size
屬性進行覆蓋
- 如果元素添加了
-
-
display:inline-block;
在IE6/7下不兼容的解決方法- 增加
display: inline; zoom: 1;
屬性
- 增加
IE7下塊元素兼容display: inline-block;
寫法?
- 直接讓塊元素設置爲內聯對象(設置屬性
display: inline;
),然後觸發塊元素的layout
(如:zoom: 1;
等)。 - 兼容各瀏覽器的代碼如下:
div {display: inline-block; *display: inline; *zoom: 1;}
float
浮動
float
元素的特點
- 在一行顯示
- 設置屬性值爲
left
時,浮動元素依次從父級盒子的左側向右排列 - 自動具有塊級元素的屬性,不需要添加
display: block;
- 脫離文檔流
- 子元素不會繼承浮動屬性
- 浮動元素下面的元素不能識別浮動元素的高度和位置,佔據浮動元素的位置
- 所有的元素都可以使用浮動屬性
文檔流和脫離文檔流
- 文檔流:元素排版佈局過程中,元素自動從左往右,從上往下的流式排列。
- 每個非浮動元素塊級元素獨佔一行,浮動元素按規則浮在行的一端。當前行容量滿則另起一行浮動。
- 內聯元素不會獨佔一行
- 幾乎所有元素(包括塊級、內斂和列表元素)均可生成子行,用於擺放子元素
- 標準文檔流等級:分爲兩個等級,塊級元素和行內元素
- 脫離文檔流:文檔流內的正常元素識別不到這個元素(脫離文檔流的元素相當於平行漂浮於文檔流之上)
float
元素產生的影響
- 父元素設置背景顏色
background-color
不起作用 - 父元素設置內邊距屬性
padding
不會被撐開 - 父元素設置邊框屬性
border
不會被撐開
清除浮動float
清除浮動的方法
- 給浮動元素的父級元素添加固定的高度
height
(不推薦) - 給浮動元素的父級元素添加溢出隱藏屬性
overflow: hidden;
; -
給最後一個浮動元素後面添加一個塊級元素,這個塊級元素帶有
clear: both;
屬性-
clear
清除浮動元素對文檔流內元素的影響(可以讓文檔流內的元素識別到浮動元素的高度) -
left
清除float
爲left
的影響 -
right
清除float
爲right
的影響 -
both
清除float
所有的影響 -
inherit
從父級元素上繼承該屬性值
-
-
clearfix
清除浮動(固定代碼)- 利用僞元素
:after
清除浮動必備條件,缺一不可 -
display: block;
確保元素是一個塊級元素 -
clear: both;
不允許左右兩邊有浮動對象 -
content: '';
僞元素:brfore/:after
自帶的屬性,如果不寫,僞元素不起作用 - 寫全的樣式屬性;不是必備條件
-
height: 0;
防止在低版本瀏覽器中默認height: 1px;
的情況,用height: 0;
去覆蓋 -
font-size: 0;
字體大小 -
overflow: hidden;
溢出隱藏 -
visibility: hidden;
讓所有可見性的元素隱藏
- 利用僞元素
overflow: hidden;
和visibility: hidden;
有什麼區別?
(面試題):如何讓一個元素消失?
-
opacity: 0;
[0-1] 透明度 -
display: none;
隱藏 -
widht/height/line-height + overflow
:寬/高/行高 + 溢出隱藏 -
visibility: hidden;
讓所有可見性的元素隱藏
clear: both;
的特點
- 元素需要是塊級元素
- 元素不能帶有浮動屬性
- 元素必須放在最後一個浮動元素的後面
CSS定位
-
相對定位-
position: relative;
- 沒有脫離文檔流
- 參照物是元素本身位置
- 當
top
和bottom
同時有值的情況下,top
值生效,支持負值 - 當
left
和right
同時有值的情況下,left
值生效,支持負值 - 任何元素都可以設置相對定位屬性
- 相對定位元素位移發生改變,但元素原來的位置還會被佔用,其他元素還是正常識別這個元素原來的位置
-
絕對定位-
position: absolute;
- 脫離文檔流
- 可以設置參照物,參照物必須是其父級元素(直系父級),如果沒有直接父級會一直往上查找直到找到最外層的根元素爲止;
- 有寬度和高度的情況下,
top
和bottom
同時有值,top
生效;left
和right
同時有值,left
生效。 - 沒有寬度和高度的情況下,
top
和bottom
同時設置值的情況下,會將這個盒子拉大,上下值都起作用,左右同理。 - 可以設置層級關係
z-index
屬性,必須要和定位元素(絕對,相對,固定)同時使用,纔會起作用。 - 一個元素定位在另一個元素上或者兩個元素疊加的情況,都可以使用定位(絕對定位)
- 絕對定位一定要設置相對參照物
-
固定定位-
position: fixed;
- 脫離文檔流
- 參照物是瀏覽器的可視窗口
- 任何元素都可以設置固定定位
- 可設置
top/bottom/left/right
四個方位 - 可通過
z-index
改變層級
-
z-index
屬性的特點- 默認是書寫順序在後的定位元素覆蓋順序在前的定位元素
- 可以使用
z-index
屬性修改定位元素的層級關係 - 所有定位元素的
z-index
默認值都一樣 -
z-index
值是數字沒有單位,支持負數 - 一般都是同級元素進行層級的比較
- 當參照物是相對定位或絕對定位的時候,父級元素之間沒有
z-index
值,子元素的z-index
值進行比較