html5與css3階段複習題

時間 2020-06-09

標籤 html5 html css3 css 階段複習欄目 HTML5 简体版

原文原文鏈接

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

核心選擇器：id選擇器、class選擇器、標籤選擇器、逗號選擇器、廣泛選擇器

層次選擇器：子代選擇器、後代選擇器、下一個兄弟選擇器、以後全部兄弟選擇器

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

display:none/block 元素隱藏以後，不佔用原來的位置
visibility:hidden/visible 元素隱藏以後，佔用原來的位置

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

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)css3動畫

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

7.選擇器的優先級是什麼？請按權重列出選擇器的前後順序 (5)oop

選擇器優先級：
    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)flex

現象：父子級元素都會有上邊距
解決方法：
            給父級加邊框屬性
           給父級加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~h三、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)

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    html,body,.main{
        width: 100%;
        height: 100%;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .top{
        width: 100%;
        height: 20%;
        background-color: pink;
    }
    .bottom{
        width: 100%;
        height: 80%;
        background-color: yellow;
    }
    .bottom_left{
        width: 15%;
        height: 100%;
        background-color: green;
        float: left;
    }
    .bottom_right{
        width: 85%;
        height: 100%;
        background-color: teal;
        margin-left: 15%;
    }
</style>

</head>
<body>

<div class="main">
    <div class="top"></div>
    <div class="bottom">
        <div class="bottom_left"></div>
        <div class="bottom_right"></div>
    </div>
</div>

</body>
</html>

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