1. 引入樣式的方式

外部樣式

link

@import

區別

內部樣式

/* 寫在頭部標籤 */
<style>

</style>

行內樣式

2. 三行程式碼畫三角形

.triangle{
    width:0px;
    border:100px solid;
    border-color:transparent transparent transparent red;
}

3.屬性的繼承

可繼承的屬性

文字屬性

font-color: 字型顏色

font-family：字體系列

font-weight：字型的粗細

font-size：字型的大小

font-style：字型的風格

css文字屬性

可繼承 但是字型顏色遇到a標籤，必須給a標籤

text-indent：文字縮排

text-align：文字水平對齊

text-decoration 文字修飾

line-height：行高

word-spacing：單詞之間的間距

letter-spacing：中文或者字母之間的間距

text-transform：控制文字大小寫（就是uppercase、lowercase、capitalize這三個）

列表屬性

可繼承

list-style：列表風格，包括list-style-type、list-style-image等

不可繼承的屬性

背景屬性

邊框屬性

其他屬性

width height float overflow

4. 單行文字超出時 不換行 隱藏 產生省略號

• 給定容器寬度 ：width value
• 強制文字在一行內顯示 不換行 white-space:nowrap
• 溢位的內容隱藏：overflow:hidden
• 溢位時顯示省略號 text-overflow:ellipsis

5. css樣式屬性的層疊（權重）

選擇器

• ID選擇器
  • id表示身份，用#id引用該id，在頁面中元素的id不能衝恢復，id選擇器只能選擇單個元素
• 標籤選擇器
  • 根據標籤名稱，選擇對應的所有標籤
• 類（別）選擇器
  • 選擇擁有該類的多個元素，用.class名引用
• 通用選擇器
  • 針對頁面上所有的標籤都生效

選擇器的權重

• 一般情況下
  • 行內樣式優先生效 > id選擇器 > class類選擇器 > 標籤選擇器 > 通用選擇器
• 樣式衝突的情況下
  • 誰的權重值高（權重之和），誰就先生效
  • 行內樣式權重值為1000
  • ID選擇器權重值為100
  • 類選擇器權重值為10
  • 標籤（元素）擇器權重值為1
  • 萬用字元的權重值為1
  • 通用選擇器權重值為0

偽類的權重是10

技巧：選擇器選擇的範圍越小越精確，優先順序就越高

6. 元素的型別及特點

塊狀元素

特點

• 獨佔一行或一塊區域，豎著排列
• 可以新增寬高
• 可以設定margin和padding值，上下左右都生效
• 可以作為其他元素的父元素

行內元素

特點

• 在預設情況下，元素是挨著排列的
• 在預設情況下，給元素新增寬高是無效的
• 在預設情況下，給元素新增margin和padding值，僅有左右方向生效，上下不生效

行內塊狀元素

特點

• 就是塊狀元素和行內元素的綜合
  • 可以設定寬高的屬性，來自塊狀元素的特點
  • 挨著排列的屬性，來自行內元素
• 與其他元素挨在一起的時候，會有預設間距
• 它有一個專有屬性 vertical-align:top/middle/bottom

可變元素

自己有預設的樣式

7. 元素的顯示與隱藏

使用display:none隱藏元素
使用:hover{display:block} 滑鼠經過時，顯示元素

.boss:hover .box{display:block}
/* 最好後面的元素是前面元素的後代，在父級元素上懸停滑鼠，元素出現 */

opcatity:0
opcatity:1

vsibility：hidden
visibility:visible

8. css可以取負值的屬性

• background-position
• text-indent
• margin-left margin-top
• position的left right bottom top
• transform
• z-index
• text-shadow 文字陰影的水平和垂直方向
• flex佈局的子元素屬性order

注意：padding不可以取負值

9. 圖片向下撐大3畫素的解決辦法

• 給圖片本身新增vertical-align:top/middle/bottom可以解決被撐下來的3px問題 （推薦）
• 左右方向間距的，給圖片加display:block轉為塊級元素 （推薦）
• 左右方向間距的，給圖片或父元素新增浮動float
• 可以給圖片本身或者圖片的父級元素新增float:left （圖片右邊的邊距）
• 給body{}新增font-size為0 （不推薦）

10. 子元素新增margin-top，父元素下移的解決辦法

• 給父元素新增overflow:hiden

• 給父元素新增一個上邊框

• 給父元素或者子元素新增浮動（不推薦）；

• 把margin改為padding；

• 觸發BFC

11. 圖片在一塊區域裡做水平垂直居中的實現辦法

給父級元素設定line-height和text-align:center，給圖片設定vertical-align:middle

12.盒模型包含哪些內容

w3c標準盒模型

margin padding border content

13. 定位的屬性值有哪些？各自有什麼特點

• static 預設值，無定位
• absolute 絕對定位，脫離文件流（飄了），定位使用left/right/bottom/bottom，控制自己想去的位置
  • 文件流 給元素新增絕對定位之後，元素會飄起來，別人佔據自己的位置
  • 參照物 第一種情況 在該元素設定絕對定位之後，它的父元素身上沒有任何定位設定的時候，就參照瀏覽器的的第一屏做定位（開啟定位），使用relative最好，當然使用absolute更好
  • 第二種情況 要圍繞父元素做位置移動，就父元素新增定位（最好給相對定位）
  • 層級關係 z-index
• relative 相對定位
  • 文件流 給元素新增position:relative相對定位後，不會脫離文件流，元素沒有飄
  • 參照物 有參照物，相對自己原來的位置做移動
  • 層級關係 z-index
• fixed 固定定位 相對於瀏覽器整個視窗做固定定位
  • 文件流 給元素新增固定定位後，就飄了（脫離文件流）
  • 參照物 即使頁面過大，出現滾動條，仍然相對於瀏覽器視窗做定位
  • 層級關係 z-index
• sticky 粘性定位 主要用來做吸頂效果
  • 沒有飄，沒有脫離文件流
  • 在頁面沒有滾動條的時候，只有left屬性生效
  • 在頁面有滾動條的情況下，left top bottom 方向是生效的，主要是top生效，吸頂效果
  • 層級關係 z-index

14. 小盒子在大盒子中水平垂直居中

純margin

純padding

純定位，子絕父相 子元素設定left和top為具體數值

position定位的 left為50%，top為50% ，高寬配合margin回退自己寬高的-一半

position配合top right bottom left 為0 margin為 auto

position定位配合left top 為50%，transform的translate 回退 -50%

flex實現水平垂直居中

display;flex;
justify-content:center;
align-items:center;

grid網格佈局

15.透明屬性是哪個？它的相容性是什麼

opacity為0 消失

opacity 為1 出現

解決相容性

過濾器

在google中的寫法

• opacity:0.4

相容IE8及以下瀏覽器

• filter:alpha(opacity=40) 0.4要寫成100倍

16 .高度塌陷解決方案

解決方案

• 給父元素新增高

  • 缺點：不適合自適應的佈局

• 直接給父元素新增float

  • 缺點：遇到高度自適應的時候就不好用了

• 給父元素設定overflow:hidden或者auto

  • 缺點：遇到定位就不太好用了（超出隱藏）

• 在浮動元素的下方，加一個非浮動的空盒子，給該盒子新增clear:both清除浮動

  .p1{
      clear:both;
  }
  

  • clear用於清除浮動，有3個值，left/right/both
  • 缺點：頁面中太多的空標籤會造成標籤的冗餘

• 萬能清除法(推薦使用)

  給父元素新增clear公共類名，哪裡需要清除，在哪裡新增類名clear

  .clear:after{
  	content:"";
      display:block;
      height:0;
      clear:both;
      overflow:hidden;
      visibility:hidden;
  }
  
  
  /* 相容IE6 */
  .clear{
  	zoom:1;
  }
  

• 給父元素新增浮動

缺點：需要解決新的浮動問題（不推薦）

• display:table

  缺點：產生未知bug

17. 一屏網頁必須新增什麼

一個頁面不能出現滾動條，寬高同時自適應

一屏網頁：寬高同時100%(body和html)

高度塌陷就是，子元素設定浮動之後，父元素沒有設定高度或者父元素需要高度自適應的情況：

子元素設定浮動，高度設定height:auto

18. 五大瀏覽器對應的核心

19. H5有什麼特點？請說出6個h5新增加的標籤

H5的特點

（1）更簡潔、但是在實際開發中要注意書寫規範，利於後期維
護
（2）標籤的語義化
語義化的重要性：
① 當頁面載入失敗的時候，還能夠呈現出清晰的結構
② 有利於SEO優化，利於被搜尋引擎收錄（即便於網路爬蟲
的識別）
③ 在專案開發及維護時，語義化的也很大程度上降低開發
難度，節省成本
（3）語法更寬鬆
（4）多裝置跨平臺
（5）自適應網頁設計

H5的標籤

<header>...<header> 頭部標籤

<footer>...<footer> 尾部標籤

<section>...<section> 內容區塊

<article>...，article> 表示頁面中的獨立內容

<aside>...<aside> 標籤定義其所處內容之外的內容

<nav>...<nav> 導航

<figure>...<figure>表示一段獨立的流內容

<embed>...<embed> embed標籤用於定義巢狀的內容，包括各種媒體

<mark>...<mark>高亮顯示

• 可以改變其高亮顏色

<video>...<video> 視訊標籤

<video src="song.mp3" controls="controls" autoplay=autoplay>
</video>

<audio>...<audio> 音訊標籤

<audio src="song.mp4" controls="controls" autoplay=:autoplay>
</audio>

<datalist>...<datalist> 智慧列表 供其選擇

<p>
    /* list裡的id要和datalist裡的id一致 */
    <input type="text" nmae="a1" list="text">   
</p>

<datalist id="text">
    <option>大班</option>
    <option>班級</option>
    <option>班班</option>
</datalist>

<canvas>...<canvas>canvas可以完成動畫、遊戲、圖表、影象處理等原來需要Flash完成的一些功能

<hgroup>...<hgroup> 標籤被用來對標題元素進行分組。

20. 怪異盒

在IE6及其以下版本里，DOCTYPE缺失會觸發怪異盒模式

• 給元素新增的padding值和border值，不會計算在元素原有的寬高，不會把盒子撐大

  /* 可以讓W3C標準盒模型變成怪異盒模型 */
  box-sizing:border-box;
  
  
  /* 變成W3C標準盒模型 */
  box-sizing:content-box;
  
  

/* 火狐相容 */
-moz-box-sizing:content-box;

/* IE相容 */
-ms-box-sizing:content-box;

/* Opera相容 */
-o-box-sizing:content-box;

  /* Chrome和sarfi相容 */
  -webkit-box-sizing:content-box;
  

21. 什麼是圖片整合技術？css精靈圖有什麼優勢？

優勢

22. css3屬性有哪些特點和優勢？說出8個css3屬性

23. 背景大小屬性裡，那個屬性值不會被剪裁

文字效果

1. text-shadow 文字陰影

.text1{
    text-shadow:5px 5px 5px pink;
}

• h-shadow 水平方位移動的陰影（正值向右，負值向左）
• v-shadow 垂直方位移動的陰影（正值向下，負值向上）
• blur 模糊的距離，只能是正值（可選引數）
• color 陰影的顏色 （可選引數）

2. box-shadow 盒子陰影

陰影是不佔據位置的

div
{
   box-shadow: 1px 1px 11px 4px #888888 inset;
}

單邊盒子陰影

/*  上部 */
.top{
    box-shadow:0 -2px 0 red;
}

/*  右邊 */
.right{
    box-shadow:2px 0 0 green;
}

/*  底部 */
.bottom{
    box-shadow:0 2px 0 blue;
}

/*  左邊 */
.left{
    box-shadow:-2px 0 0 tomato;
}

3.word-break 強制換行

p.test {
    word-break:break-all;
}

4. word-wrap 單詞換行

.box{
    /* 網址換行 */
    word-wrap:break-word;
}

字型

@font-face

背景

1. background-clip 背景裁切

-webkit-background-clip:text;
color:transparent;
/* 或者 */
-webkit-text-fill-color:transparent;

2. background-origin背景原點

3. background-size 背景中影象的尺寸

• length percentage cover會在一定程度上裁剪的
• contain 不裁剪 ，保持原圖寬高比例

圓角

border-radius

如果你在 border-radius 屬性中只指定一個值，那麼將生成 4 個 圓角。

但是，如果你要在四個角上一一指定，可以使用以下規則：

• 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
• 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
• 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
• 一個值： 四個圓角值相同(50%)，即正圓

邊框圖片

1. border-image

顏色特性

hsl(色調，飽和度%，亮度%)

hsla(色調，飽和度%，亮度%，透明度)

亮度和飽和度需要加%

漸變

漸變是背景圖

線性漸變

.div:nth-child(1){
    background-image:linear-gradient(yellow,green,blue)
}

• 從下往上漸變 to top

    background-image:linear-gradient(to top,yellow,green,blue)
  

• 從左往右right

   background-image:linear-gradient(to right,yellow,green,blue)
  

• 右上對角漸變to right top

   background-image:linear-gradient(to right top,yellow,green,blue)
  

• 顏色多給一點

  background-image:linear-gradient(to right top,yellow 80%,green,blue)
  

徑向漸變

預設是橢圓

background-image:radial-gradient(circle,yellow 80%,green,blue)

多背景圖

background:url(img/1.png) no-repeat left top,url(img/2.png) no-repeat right top,url(img/3.png) no-repeat left bottom,url(img/4.png) no-repeat right bottom

24. 什麼是BFC?觸發BFC的條件有哪些？

塊級格式化上下文

獨立的渲染區域，需要一定規則觸發

是什麼

觸發條件

overflow的值

特性

25. margin的上下重疊問題怎麼解決？

margin的重疊問題

上下兩個盒子同時給margiin的時候，會發生重疊，重疊的時候取margin最大值

解決辦法

• 給其中一個子元素新增一個父盒子，新增 overflow:hidden/scroll/auto; display:inline-block;float-left/right;等等 讓他倆觸發BFC

26. 兩欄佈局怎麼實現？

BFC的區域不與float浮動的盒子重疊，BFC特性實現兩欄佈局

左列定寬，右列自適應

• 給左邊固定寬 新增浮動，給右邊新增overflow:hidden，會實現兩欄自適應

• 給父級設定display:flex，自適應列設定flex:1，均分剩餘空間

右列定寬，左列自適應

27. 三欄佈局怎麼實現？

分情況

兩側定寬，中間自適應

• 兩側的兩列float，中間列給overflow:hidden，但是自適應列的區塊和右列的區塊，在html中交換順序，即解析順序:left center right
• 兩側的兩列float，中間列給margin-left(對應的是左列寬度)，margin-right（對應的是右列寬度），但是自適應列的區塊和右列的區塊，在html中交換順序，即解析順序:left center right
• 兩側的兩列給position:absolute，父元素給position:relative，但是自適應列的區塊和右列的區塊，在html中交換順序，即解析順序:left center right
• 父級設定dsiplay:flex兩側定寬設定寬度，自適應列設定flex:1均分剩餘空間

左邊兩列定寬，右列自適應

28 .transition和animation之間有什麼共同點和區別？

29. transform:translateX(100px) rotateZ(45deg)和transform:rotateZ(45deg) translateX(100px)實現的效果是一樣的嗎？為什麼？

transform:translateX(100px) rotateZ(45deg)是同時沿x軸偏移100px，同時也沿z軸旋轉45度

transform:rotateZ(45deg) translateX(100px)，是有先後順序的，即先旋轉45度之後，再沿x軸偏移100px

30. 什麼是漸進增強和優雅降級

• 漸進增強
  • 先考慮低版本相容，再慢慢考慮高版本（更推薦）
• 優雅降級
  • 先考慮高版本，再考慮低版本

31. 移動端佈局的方式有哪些

32 .em和rem的區別？

• 共同點:都是相對單位，相對於別的元素的改變而變化的

• 區別:em相對於最近父元素的字號大小、rem相對根元素字號大小

33. 響應式設計的特點（responsive設計特點）