CSS概述

css

---

Cascading Style Sheet 層疊樣式表

css 選擇器分類

• 標籤選擇器
• id選擇器
• class選擇器
• 後代選擇器（div a）
• 子代選擇器（div > p）
• 相鄰選擇器（div + p）
• 通配符選擇器（*）
• 屬性選擇器
• 僞類選擇器
• 僞元素選擇器::before{}

css3屬性選擇器

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素
[attribute=value]	用於選取帶有指定屬性和值的元素
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素
[attribute|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每一個元素
[attribute$=value]	匹配屬性值以指定值結尾的每一個元素
[attribute*=value]	匹配屬性值中包含指定值的每一個元素

 

css3僞類選擇器

僞類|MDN經常使用：

• :hover
• :focus
• :after 在元素以後添加內容，也能夠用來作清除浮動
• :before 在元素以前添加內容
• :enabled 選擇器匹配每一個已啓用的元素（大多用在表單元素上）
• :disabled 控制表單控件的禁用狀態
• :checked 單選框或複選框被選中
• ::selection 用戶選中的區域
• :empty 通常用來隱藏內部什麼都沒有的元素
• :not(selecter)
• p:first-of-type
• p:last-of-type
• p:only-of-type
• p:nth-of-type(n)
• p:nth-last-of-type(n)
• :nth-child(n)
• :nth-last-child(n)
• p:only-child

僞類和僞元素區別

• 僞類值一種狀態 好比:hover
• 僞元素是一個真實存在的元素，他能夠有樣式有內容

iconfont原理

• 利用編碼讓圖標變爲一個字符
• 引入字體
• 利用before僞元素向頁面中插入一個文字

css定義的權重

• !important優先級最高，但也會被權重高的important所覆蓋
• 行內樣式總會覆蓋外部樣式表的任何樣式（除了!important）
• 單獨使用一個選擇器的時候，不能跨等級使css規則生效
• 若是兩個權重不一樣的選擇器做用在同一元素上，權重值高的css規則生效
• 若是兩個相同權重的選擇器做用在同一元素上，之後面出現的選擇器爲最後規則
• 權重相同時，與元素距離近的選擇器生效

      一句話總結：!important > 行內樣式 > ID選擇器 > (類選擇器|屬性選擇器|僞類選擇器) > 元素選擇器

瀏覽器解析CSS

簡單地說，瀏覽器查找元素是經過找到特定元素後往前解析，這樣作的目的就是加快CSS解析速度，從後往前，排除法

美化checkbox

• 讓本來的勾選框隱藏
• input + label 背景圖沒選中
• input:checked + label 背景圖選中

.checkbox input{
  display: none;
}
.checkbox input + label{
  background:url(./沒選中.png) left center no-repeat;
  background-size:20px 20px;
  padding-left:20px;
}
.checkbox input:checked + label{
  background-image:url(./選中.png);
}

<div class="checkbox">
<input id="handsome" type="checkbox" /> 
<label for="handsome">我很帥</label>
</div>

盒模型

盒模型有兩種：IE怪異盒子模型、W3C標準盒子模型；

盒模型是由：content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)組成的；

標準盒子模型的寬高指的是content區的寬高，IE盒模型的寬高指的是content+padding+border的寬高；

CSS如何設置這兩種盒模型

標準盒模型：

   box-sizing:content-box;

IE盒模型：

   box-sizing:border-box;

BFC

W3C對BFC的定義：

  浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如：inline-block、table-cells、table-captions），以及overflow值不爲「visible」的塊級盒子，都會爲他們的內容建立新的BFC（塊級格式上下文）。

BFC(Block formatting context)直譯爲「塊級格式化上下文」。它是一個獨立的渲染區域，只有Block-level box(塊級框)參與，它規定了內部的 Block-level box 如何佈局，而且與這個區域的外部絕不相干。

BFC的做用

1. 利用BFC避免外邊距摺疊

2. 清除內部浮動（撐開高度）

   1. 原理：觸發父級的BFC屬性，使下面的子級都處於父級的同一個BFC中
3. 避免文字環繞
4. 分屬於不一樣的BFC時，能夠阻止 margin 重疊
5. 多列布局中使用BFC

如何生成BFC（脫離文檔流，知足如下一個或多個條件便可）

• 根元素，即HTML元素（最大的一個BFC）
• float的值不爲 none
• position的值爲 absolute 或 fixed
• overflow的值不爲 visible（默認值。內容不會修剪。會呈如今元素框以外）
• display的值爲 inline-block、table-cell、table-caption

BFC的佈局規則

• 內部的Box會在垂直方向上，一個接一個的放置
• 屬於同一個BFC的兩個相鄰的Box的 margin 會發生重疊
• BFC就是頁面上一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也是如此，文字環繞效果設置float
• BFC的區域不會與 float Box 重疊
• 計算BFC的高度，浮動元素也參與計算

非佈局樣式

• 字體、字重、顏色、大小、行高
• 背景、邊框
• 滾動、換行
• 粗體、斜體、下劃線
• 其餘

行高的構成

• 行高是由 line-box 組成的
• line-box 是由一行裏的 inline-box 組成
• inline-box 中最高的那個，或字體最大的那個決定行高

float

• 元素「浮動」
• 脫離文檔流
• 不脫離文本流
• 位置儘可能靠上，並靠左或靠右

  對本身的影響

• 造成「塊」（BFC）
• 這個塊由本身佈局，寬高由本身決定

  對兄弟元素的影響

• 上面通常貼非浮動元素
• 靠邊貼浮動元素或邊
• 不影響其餘塊級元素的位置
• 影響其餘塊級元素文本

  對父級元素的影響

• 從佈局上「消失」
• 高度塌陷

清除浮動

浮動的元素佈局時，不會佔據父元素的佈局空間，即父元素佈局時不會去管浮動元素，浮動元素有可能超出父元素，對其餘元素形成影響

方法一：在父級內容的最後添加一個空的div，給這個空div添加clear屬性；clear:left(清除左浮動)、clear:right(清除右浮動)、clear:both(清除全部浮動)

方法二：給父級設置overflow:hidden;會觸發BFC

方法三：使用僞元素

.container::after {
  content: " ";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}

對 line-height 的理解

• line-height指一行字的高度，包含了字間距，其實是下一行基線到上一行基線的距離
• 若是一個標籤沒有定義height屬性，那麼其最終表現的高度由line-height決定的
• 一個容器沒有設置高度，那麼撐開容器高度的是line-height而不是容器內的文字內容
• 把line-height值設置爲height同樣大小的值能夠實現單行文字的垂直居中

line-height三種賦值方式區別（帶單位、純數字、百分比）

• 帶單位：px是固定值，而em會參考父元素的font-size值計算自身的行高
• 純數字：會把比例傳遞給後代。例如，父級行高爲1.5，子元素字體爲18px，則子元素行高爲1.5 * 18 = 27px
• 百分比：將計算後的值傳遞給後代

滾動

• visible 滾動條隱藏，文本超出顯示
• hidden 滾動條隱藏，文本超出不顯示
• scroll 滾動條一直顯示，無論文本的多少
• auto 滾動條自動隱藏

文字折行

• overflow-wrap（word-wrap）通用換行控制
  • 是否保留單詞
• word-break 針對多字節文本文字
  • 中文句子也是單詞
• white-space 空白處是否換行

單行文本溢出顯示省略號

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行文本溢出顯示省略號

overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

display:none 和 visibility:hidden 的區別

相同：它們都讓元素不可見

區別：

• display:none 會讓元素消失，且不在保留位置；visibility:hidden 也是讓元素消失，可是會保留本來的位置
• display:none 是非繼承屬性，子節點消失由於是從dom樹上消失形成，因此經過修改子節點的屬性沒法顯示；
  visibility:hidden 是繼承屬性，子節點的消失因爲繼承了 hidden，經過設置 visibility:visible 可讓子節點顯示
• 修改 display 會形成文本重排，而修改 visibility 會形成元素重繪
• 瀏覽器不會讀取 display 的元素內容；但會讀取 visibility 的元素內容

CSS單位

1. px 絕對單位，

2. % 父元素寬度的比例。

   1. 若是對 html 元素設置 font-size 爲百分比值，則是以瀏覽器默認字體大小16px爲參照來計算，如62.5%即等於10px（16px * 62.5% = 10）

3. em 相對單位，不一樣的屬性有不一樣的參照值

   1. 對於字體大小屬性（font-size）來講，em 的計算方式是相對於父元素的字體大小
   2. border、width、height、margin、padding、line-height，在這些屬性中，使用 em 單位的計算方式是參照該元素的 font-size ，1em 等於該元素設置的字體大小。同理若是該元素沒有設置，就依次向父級元素查找，若是都沒有，則使用瀏覽器的默認的字體大小

4. rem 相對與根元素 html 的 font-size 來計算，因此其參照物是固定的

   1. 好處：rem 只須要修改根元素 html 的 font-size 的值就能夠修改所有，可謂牽一髮而動全身

5. vw、vh、vmin、vmax 相對單位，是基於視窗大小（瀏覽器用來顯示內容的區域大小）來計算的

   1. vw：基於視窗的寬度計算，1vw 等於視窗寬度的百分之一
   2. vh：基於視窗的高度計算，1vh 等於視窗高度的百分之一
   3. vmin：基於 vw 和 vh 中的最小值來計算，1vmin 等於最小值的百分之一
   4. vmax：基於 vw 和 vh 中的最大值來計算，1vmax 等於最大值的百分之一

transform變形

與transition、translate名字有點像，可是transition是作過渡動畫，translate是作平移的

• none
  • 定義不進行轉換。
• matrix（n,n,n,n,n,n）
  • 定義2D轉換，使用六個值的矩陣
• translate(x,y)
  • 從其當前位置移動，根據給定的left（x座標）和top（y座標）
• translate3d(x,y,z)
  • 定義3D轉換
• translateX(x)
• translateY(y)
• translateZ(z)
• scale(x[,y]?)
  • 定義2D縮放轉換
• scale3d(x,y,z)
  • 定義3D縮放轉換
• scaleX(x)
• scaleY(y)
• scaleZ(z)
• rotate(angle)
  • 定義2D旋轉，在參數中規定角度
• rotate3d(x,y,z,angle)
  • 定義3D旋轉
• rotateX(angle)
• rotateY(angle)
• rotateZ(angle)
• skew(x-angle,y-angle)
  • 定義沿着 X 和 Y 軸的2D傾斜轉換
• skewX(angle)
• skewY(angle)
• perspective(n)
  • 爲3D轉換元素定義透視視圖

CSS預處理器

• 嵌套
  • 反映層級和約束
• 變量和計算
  • 減小冗餘代碼
• extend 和 mixin
  • 代碼片斷重用
  • mixin 是直接把CSS代碼每一個地方重複寫一份
  • extend 是使用逗號分隔的選擇器來爲多個不一樣的地方使用同一段CSS
• 循環
  • 適用於複雜有規律的樣式
• import
  • CSS模塊化

CSS優化、提升性能的方法

• 多個CSS合併，儘可能減小 http 的請求
• css 雪碧圖
• 抽象提取公共樣式，減小代碼量
• 選擇器優化嵌套，儘可能避免層級過深（用 > 代替 空格）
• 屬性值爲0時，不加單位
• 壓縮css代碼
• 避免使用css表達式
  • 它們要計算成千上萬次而且可能會對你的頁面性能形成影響

link 與 @import 的區別

• link 是 HTML 方式，@import 是 CSS方式
• link 最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC（用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載完成後在顯示新的文檔，形成頁面閃爍）
• link 能夠經過 rel="alternate stylesheet" 指定候選樣式
• 瀏覽器對 link 支持早於@import，可使用 @import 對老瀏覽器隱藏樣式
• @import 必須在樣式規則以前，能夠在css文件中引用其餘文件
• 整體來講，link 優於@import

display有哪些值？說明它們的做用

position有哪些值？

• relative 相對定位，相對於正常位置進行定位
• absolute 絕對定位，相對於值不爲static的父級進行定位
• fixed 固定定位，相對於瀏覽器窗口進行定位
• static 默認值，沒有定位
• inherit 規定從父元素繼承 position 屬性的值

CSS3新特性

• 新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
• 彈性盒模型 display: flex;
• 多列布局 column-count: 5;
• 媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}
• 個性化字體 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
• 顏色透明度 color: rgba(255, 0, 0, 0.75);
• 圓角 border-radius: 5px;
• 漸變 background:linear-gradient(red, green, blue);
• 陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
• 倒影 box-reflect: below 2px;
• 文字裝飾 text-stroke-color: red;
• 文字溢出 text-overflow:ellipsis;
• 背景效果 background-size: 100px 100px;
• 邊框效果 border-image:url(bt_blue.png) 0 10;
• 平滑過渡 transition: all .3s ease-in .1s;
• 動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
• 變形 transform
  • 旋轉 transform: rotate(20deg);
  • 傾斜 transform: skew(150deg, -10deg);
  • 位移 transform: translate(20px, 20px);
  • 縮放 transform: scale(.5);

用純CSS建立一個三角形的原理是什麼？

把border的其餘三條邊設爲透明，這裏要把border-width、border-style、border-color分開寫

.tri { width: 0px; height: 0; border-style: solid; border-width: 100px; border-color: transparent transparent red transparent; }

li 與 li 之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？(也稱幽靈字符)

行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符, 這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲 0，就沒有空格了

什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的 IE？

• 響應式設計就是網站可以兼容多個不一樣大小的終端，而不是爲每一個終端作一個特定的版本
• 基本原理是利用 CSS3 媒體查詢，爲不一樣尺寸的設備適配不一樣樣式
• 對於低版本的 IE，可採用 JS 獲取屏幕寬度，而後經過監聽window.onresize 方法來實現兼容

box-sizing 經常使用的屬性有哪些？分別有什麼做用？

• box-sizing: content-box; // 默認的標準(W3C)盒模型元素效果
• box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果
• box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

請列舉幾種隱藏元素的方法

• visibility: hidden; 這個屬性只是簡單的隱藏某個元素，可是元素佔用的空間任然存在
• opacity: 0; CSS3 屬性，設置 0 可使一個元素徹底透明
• position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域以外
• display: none; 元素會變得不可見，而且不會再佔用文檔的空間。
• transform: scale(0); 將一個元素設置爲縮放無限小，元素將不可見，元素原來所在的位置將被保留
• HTML5 屬性,效果和 display:none;相同，但這個屬性用於記錄一個元素的狀態
• height: 0; 將元素高度設爲 0 ，並消除邊框
• filter: blur(0); CSS3 屬性，將一個元素的模糊度設置爲 0

rgba()和opacity的透明效果有什麼不一樣？

• opacity 做用於元素以及元素內的全部內容（包括文字）的透明度
• rgba() 只做用於元素自身的顏色或其背景色，子元素不會繼承透明效果

css 屬性 content 有什麼做用？

content 屬性專門應用在 before/after 僞元素上，用於插入額外內容或樣式

a 標籤上四個僞類的使用順序是怎麼樣的？

link > visited > hover > active 簡稱 lvha(love-ha)

僞類的特殊性（應用優先級）是一樣的，因此後出現的僞類會覆蓋先出現的僞類（同時激活）

在這裏，好比把hover放在active後面，那麼實際你在激活（active）連接的時候就觸發了hover僞類，hover在後面覆蓋了active的顏色，因此始終沒法看到active的顏色

僞元素和僞類的區別和做用？

僞元素:在內容元素的先後插入額外的元素或樣式，可是這些元素實際上並不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，所以，稱爲「僞」元素。例如：

p::before {content:"第一章：";} p::after {content:"Hot!";} p::first-line {background:red;} p::first-letter {font-size:30px;}

僞類: 將特殊的效果添加到特定選擇器上。它是已有元素上添加類別的，不會產生新的元素。例如：

a:hover {color: #FF00FF} p:first-child {color: red}

::before 和 :after 中雙冒號和單冒號有什麼區別？

• 在 CSS 中僞類一直用 : 表示，如 :hover, :active 等
• 僞元素在 CSS1 中已存在，當時語法是用 : 表示，如 :before 和 :after
• 後來在 CSS3 中修訂，僞元素用 :: 表示，如 ::before 和 ::after，以此區分僞元素和僞類
• 因爲低版本 IE 對雙冒號不兼容，開發者爲了兼容性各瀏覽器，繼續使使用 :after 這種老語法表示僞元素
• 綜上所述：::before 是 CSS3 中寫僞元素的新語法； :after 是 CSS1 中存在的、兼容 IE 的老語法

請解釋 CSS sprites，以及你要如何在頁面或網站中實現它

• CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position 能夠用數字能精確的定位出背景圖片的位置。
• CSS Sprites 爲一些大型的網站節約了帶寬，讓提升了用戶的加載速度和用戶體驗，不須要加載更多的圖片。

margin疊加狀況

margin疊加的意思是：當兩個或者更多的垂直外邊距 相遇時，它們將造成一個外邊距，這個外邊距的高度等於兩個發生疊加的外邊距中高度較大者。

1. 當一個元素出如今另外一個元素上面時，第一個元素的底邊外邊距與第二個元素的頂邊外邊距發生疊加。如圖：
   
2. 當一個元素在另外一個元素中時，它們的頂邊距和低邊距也會發生疊加
   
3. 若是一個元素是空元素（即一個元素沒有內容，內邊距和邊框），這種狀況外邊距的頂邊距和低邊距碰在一塊兒也會發生疊加
4. 在上面那種空元素的狀況，若是該空元素與另外一個元素的外邊距碰在一塊兒，也會發生疊加。
   

以上4種外邊距疊加狀況只會發生在普通文檔流的垂直方向。行內框、浮動框、絕對定位框之間的外邊距不會發生疊加，一樣水平方向也不會發生疊加。