CSS3開發文檔

時間 2019-11-09

標籤 css3 css 開發文檔欄目 CSS 简体版

原文原文鏈接

站點：前端開發文檔
原文： CSS選擇器
原文： CSS繼承屬性
原文： CSS3核心模塊
原文： CSS盒子模型
原文： CSS背景圖像
原文： CSS清除浮動
原文： CSS定位

CSS選擇器

並集：對選擇器進行分組，被分組的選擇器能夠分享相同的聲明。用逗號將須要分組的選擇器開分。html
- h1,h2,h3,h4,h5,h6{}
交集：兩種屬性同屬一個元素前端
- p.name{}、p#id{}、.name1.name2{}
後代（派生）：根據元素在位置上的關係定義樣式，使用空格隔開，後代選擇器儘可能不要超過3個，沒必要把每一個層級都列出，只須要寫關鍵點便可node
- li strong {}
子代：只能選擇做爲某元素的子元素，只選擇子代，日後孫子一代不選擇git
- h1 > strong {}
兄弟和相鄰兄弟：選擇緊接在另外一元素後的，而且兩者有相同父元素github
- h1 + p {}
屬性：對帶有指定屬性的HTML元素設置樣式，權重爲10web
- 屬性選擇器：爲帶有title屬性的全部元素設置樣式，[title] {}
- 屬性和值選擇器：爲title="name"的全部元素設置樣式，[title=name] {}
- 設置表單的樣式：input[type="text"] {}
僞類：面試
- :active：被激活的元素
- :focus：有鍵盤輸入焦點的元素
- :hover：鼠標懸停
- :link：未被訪問的連接
- :visited：已被訪問的連接
- :first-child：元素的第一個子元素
- :lang：帶有指定lang屬性的元素
權重：windows
- 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表單元素
屬性選擇器frontend
- 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繼承屬性

無繼承性的屬性
1. display：規定元素應該生成的框的類型
2. 文本屬性：
  - vertical-align：垂直文本對齊
  - text-decoration：添加文本裝飾
  - text-shadow：文本陰影效果
  - white-space：空白符的處理
  - unicode-bidi：設置文本的方向
3. 盒子模型的屬性：
  - 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
4. 背景屬性：
  - background
  - background-color
  - background-image
  - background-repeat
  - background-position
  - background-attachment
5. 定位屬性：
  - float
  - clear
  - position
  - top/right/bottom/left
  - min-width/min-height、max-width/max-height
  - overflow
  - clip
  - z-index
6. 生成內容屬性：
  - content
  - counter-reset
  - counter-increment
7. 輪廓樣式屬性：
  - outline-style
  - outline-width
  - counter-color
  - outline
有繼承性的屬性
1. 字體系列屬性
  - font：組合字體
  - font-family：字體系列
  - font-weight：字體粗細
  - font-size：字體尺寸
  - font-style：字體風格
  - font-variant：小寫字母轉換爲大寫，字體尺寸更小
  - font-stretch：對當前font-family進行伸縮變形。全部主流瀏覽器不支持。
  - font-size-adjust：爲某個元素規定一個aspect值，保持首選字體的x-height
2. 文本系列屬性
  - text-indent：文本縮進
  - text-align：文本水平對齊
  - line-height：行高
  - word-spacing：字間距
  - letter-spacing：字符間距
  - text-transform：控制文本大小寫
  - direction：文本書寫方向
  - color：文本顏色
3. 元素可見性：visibility
4. 表格佈局屬性
  - caption-side
  - border-collapse
  - border-spacing
  - empty-cells
  - table-layout
5. 列表佈局屬性
  - list-style-type
  - list-style-image
  - list-style-position
  - list-style
6. 生成內容屬性：quotes
7. 光標屬性：cursor
8. 頁面樣式屬性
  - 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()：縮放函數默認值是1
  - scaleX()
  - 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的兼容性問題：
  1. float: left;
  2. overflow: hidden;
  3. padding-top: 0/1px;
  4. 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值進行比較