摘要：將超出對象尺寸的內容進行裁剪，不會出現滾動條。過渡效果使用動畫使用需要觸發一個事件才會隨著時間改變其屬性在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素屬性，達到一種動畫的效果動畫不需要事件觸發，過渡需要。

1.請列出核心選擇器、層次選擇器有哪些 (5)

核心選擇器：id選擇器、class選擇器、標簽選擇器、逗號選擇器、普遍選擇器

層次選擇器：子代選擇器、后代選擇器、下一個兄弟選擇器、之后所有兄弟選擇器

2.塊級元素的顯示與隱藏，寫出兩種方法，并說明區別 (5)

display:none/block 元素隱藏之后，不占用原來的位置
visibility:hidden/visible 元素隱藏之后，占用原來的位置

3.line-height與text-align，font-size與font-weight分別是設置什么的 (5)

line-height：行高
text-align：文本位置
    center 居中
    left 居左
    right 居右
font-size：字體大小
font-weight：字體粗細
     width

4.寫出表單元素的三個布爾屬性 (5)
reversed 反轉 open 打開
checked 默認選中，用于單選或者多選
disabled 禁止選中狀態
readonly 只讀
multiple 是否可以多選
selected 默認選中下拉框中的某個值
autofocus 默認提醒
required 必須輸入不能為空
controls 顯示控制條
autoplay 自動播放
loop 循環
5.css的引入方式有哪些 (5)

外部導入(link標簽)
style標簽
標簽內部添加style屬性

6.html的核心屬性有哪些？特有屬性有哪些？ (5)

核心屬性：id、class、style、title
特有屬性：a標簽的href、target；img標簽的src、alt

7.選擇器的優先級是什么？請按權重列出選擇器的先后順序 (5)

選擇器優先級：
    1）是否具有!important聲明
    2）選擇器權重
        1000  定義在標簽style屬性中
        100   id選擇器
        10   類選擇器，偽類選擇器，屬性選擇器
        1     元素選擇器,偽元素選擇器
    3）選擇器權重相同時，后者覆蓋前者（就近原則，哪一個樣式離標簽近，哪一個就生效）
順序：
    !important > id選擇器 > 類選擇器=偽類選擇器=屬性選擇器 > 元素選擇器=偽元素選擇器

8.請說出overflow的三種取值，并說明具體含義 (5)

auto：自適應，在需要時剪切內容并添加滾動條。
scroll：將超出對象尺寸的內容進行裁剪，并以滾動條的方式顯示超出的內容（若不設置隱藏滾動條，滾動條一直存在）。
hidden：將超出對象尺寸的內容進行裁剪，不會出現滾動條。

9.說明幾種定位，并說明它們是否脫離了文檔流、相對于誰來定位 (5)

position：static、relative、absolute、fixed
    static：默認值，沒有定位，正常文檔流之中
    relative：元素相對與原本位置的定位，并沒有脫離文檔流
    absolute：給元素設置絕對的定位，脫離文檔流
        1）設置了absolute的元素，如果有祖先級元素設置了position為relative或absolute，則此時元素定位的對象為祖先級元素
        2）設置了absolute的元素，如果沒有祖先級設置position，則此時元素相對與body定位，即瀏覽器視口
    fixed：固定定位，脫離文檔流，相對于瀏覽器視口進行定位

10.父子級的div，父級樣式：width:300px;height:300px;background-color:pink;
子級樣式：width:100px;height:100px;background-color:teal;
若給子元素div添加margin-top會出現什么現象，怎么解決這個現象 (5)

現象：父子級元素都會有上邊距
解決方法：
            給父級加邊框屬性
           給父級加padding
           給子級或父級一方添加浮動
           給子級或父級一方添加絕對定位
           給子級或父級一方添加display:inline-block;
           給父級元素添加overflow：hidden;

11.塊級元素在父元素中水平垂直居中的方法有哪些 (10)

可以給父級使用相對定位，子級使用絕對定位并margin:auto;，將top、left、right、bottom為0

給父級和子級都加絕對定位，再給子級添加top：calc（50% - 子級元素高度一半）left：calc（50% - 子級元素寬度一半）

給父級相對定位,子級絕對定位：left：50%；top：50%；
                              margin-left：-子級元素寬度一半；margin-top：-子級元素高度一半

給父級一個display：flex； align-items：center；再給子級添加：margin：0 auto；

12.盒子模型有哪些，簡述它們的概念、寬度的計算方式，并說明通過什么屬性可以改變盒模型 (10)

內容盒子：content-box   width = content + padding + border
邊框盒子：border-box   width = width
通過box-sizing可以改變盒模型

13.清除浮動的方式，請從父子級和兄弟級兩方面進行描述 (10)

1）、使用額外的標簽clear:both
      在浮動元素下面添加一個空標簽，在這個標簽中設置clear：both；
2）、使用overflow：hidden屬性
      父元素定義overflow:hidden，此時，瀏覽器會自動檢查浮動區域的高度；
3）、使用偽元素:after清除浮動
      .parent:after{
      // 定義元素前后的生成內容，這里是定義元素后的空內容
      content: "";
      display: block;
      clear: both;
      }
      在元素最后定義一個空的內容，然后讓該空的內容來清除浮動；

14.塊級元素與行內元素的特性，并舉例哪些是塊級元素與行內元素 (5)

塊級元素：div、h1~h3、p、ul、html、body
    1) 獨占一行空間
    2) 默認寬度為100%，默認高度由子元素或者內容決定 
    3) 可以為其指定寬高 style="width:;height:;" 
行內元素：a、span、img
    1) 與其他行內元素共享一行空間
    2) 默認寬高由內容決定
    3) 不能為其指定寬和高
    4) 行內元素中不可以嵌套塊元素，但塊元素中可以嵌套行內元素

15.簡述css3動畫與過度效果 (5)

動畫：
    動畫的定義、動畫的使用
過渡：
    CSS3中，我們為了添加某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。
過渡效果使用transition,動畫使用animation

transition需要觸發一個事件才會隨著時間改變其CSS屬性；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果
1）動畫不需要事件觸發，過渡需要。
2）過渡只有一組（兩個：開始-結束）關鍵幀，動畫可以設置多個。

16.如何理解響應式布局 (5)

就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本
方法：
    媒體查詢

17.請說明一下選擇器的權重 (5)

ul.products::after    1 + 10 + 1 = 12
form > input[type="text"]  1 + 1 + 10 = 12
#first p  100 + 1 = 101

18.一個滿屏品字布局如何設計 (5)

19.使用代碼實現圖片輪播 (10)