摘要：將超出對(duì)象尺寸的內(nèi)容進(jìn)行裁剪，不會(huì)出現(xiàn)滾動(dòng)條。過(guò)渡效果使用動(dòng)畫使用需要觸發(fā)一個(gè)事件才會(huì)隨著時(shí)間改變其屬性在不需要觸發(fā)任何事件的情況下，也可以顯式的隨時(shí)間變化來(lái)改變?cè)貙傩?，達(dá)到一種動(dòng)畫的效果動(dòng)畫不需要事件觸發(fā)，過(guò)渡需要。

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

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

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

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

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

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

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

4.寫出表單元素的三個(gè)布爾屬性 (5)
reversed 反轉(zhuǎn) open 打開
checked 默認(rèn)選中，用于單選或者多選
disabled 禁止選中狀態(tài)
readonly 只讀
multiple 是否可以多選
selected 默認(rèn)選中下拉框中的某個(gè)值
autofocus 默認(rèn)提醒
required 必須輸入不能為空
controls 顯示控制條
autoplay 自動(dòng)播放
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)先級(jí)是什么？請(qǐng)按權(quán)重列出選擇器的先后順序 (5)

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

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

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

9.說(shuō)明幾種定位，并說(shuō)明它們是否脫離了文檔流、相對(duì)于誰(shuí)來(lái)定位 (5)

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

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

現(xiàn)象：父子級(jí)元素都會(huì)有上邊距
解決方法：
            給父級(jí)加邊框?qū)傩?           給父級(jí)加padding
           給子級(jí)或父級(jí)一方添加浮動(dòng)
           給子級(jí)或父級(jí)一方添加絕對(duì)定位
           給子級(jí)或父級(jí)一方添加display:inline-block;
           給父級(jí)元素添加overflow：hidden;

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

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

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

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

給父級(jí)一個(gè)display：flex； align-items：center；再給子級(jí)添加：margin：0 auto；

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

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

13.清除浮動(dòng)的方式，請(qǐng)從父子級(jí)和兄弟級(jí)兩方面進(jìn)行描述 (10)

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

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

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

15.簡(jiǎn)述css3動(dòng)畫與過(guò)度效果 (5)

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

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

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

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

17.請(qǐng)說(shuō)明一下選擇器的權(quán)重 (5)

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

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

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