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

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

核心選擇器：id選擇器、class選擇器、標(biāo)簽選擇器、逗號選擇器、普遍選擇器

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

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

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

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

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

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

外部導(dǎo)入(link標(biāo)簽)
style標(biāo)簽
標(biāo)簽內(nèi)部添加style屬性

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

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

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

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

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

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

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

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

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

現(xiàn)象：父子級元素都會有上邊距
解決方法：
            給父級加邊框?qū)傩?           給父級加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)

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

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

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

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

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

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

動畫：
    動畫的定義、動畫的使用
過渡：
    CSS3中，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個的時候，無需使用Flash動畫或JavaScript。
過渡效果使用transition,動畫使用animation

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

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

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

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

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

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

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