【編程】編寫 div 塊級元素，設置背景顏色為紅色，使用絕對定位設置，并設置 div 距離左側50%的距離。 【編程】編寫 div 塊級元素，設置 div 中包含圖片的大小，無法顯示出的設置滾動條進行顯示（使用 overflow 設置滾動條）。  【閱讀】關于下列代碼顯示的效果為（） ``` <style> div { width: 200px; height: 200px; border-bottom: solid; } </style> <div>This is some text in a pargraph.</div> ``` 【選擇】關于盒子模型下列說法錯誤的是（）（選擇二項） ``` A. 盒子邊框與內容之間的距離被稱為內邊距（padding） B. 盒子與盒子之間的距離被稱為內邊距（margin） C. 盒子里面裝的東西被稱為內容（content） D. 每個盒子都有自己的邊框，稱為（border） E. 盒子的寬和高指的是盒子本身的寬和高 ``` 【選擇】關于哪項不是盒子模型中有的屬性（）（選擇一項） ``` A. 內邊距（padding） B. 外邊距（margin） C. 內容（content） D. 邊框（border） E. 背景顏色（background） ``` 【編程】在不更改藍色區域大小的情況下，將黃色區域設置為水平垂直居中。  ``` <style> .content { width: 800px; height: 400px; background-color: skyblue; } .top { width: 400px; height: 200px; background-color: yellow; } </style> <div class="content"> <div class="top"></div> </div> ``` 【編程】編寫代碼完成以下效果圖  ``` <style> * { padding: 0; margin: 0; } ul { list-style: none; width: 300px; height: 400px; background-color: pink; padding-top: 40px; } li { width: 200px; height: 50px; background-color: yellow; /* 樣式補充... */ margin-left: 40px; margin-top: 40px; } </style> ``` 【選擇】關于下列行級元素不正確的是（）（選擇一項） ``` A. img B.li C. label D. <br> ``` 【選擇】下列選項中哪個不是float的屬性值（）（選擇一項） ``` A. auto B. left C. right D. none ``` 【選擇】如下圖所示，兩個 div 方塊放置到一行（要求可視范圍內，不重合），應該怎么做（）（選擇一項）  ``` A. 給紅色方塊添加 float: left; 藍色方塊不加 B. 給藍色方塊添加 float: left; 紅色方塊不加 C. 給兩個 div 都添加 float: left; 屬性 D. 給紅色的方塊 padding-left: -500px; ``` 【編程】補全下面代碼，得到以下效果。  ``` <style> .div1 { width: 100px; height: 100px; background: red; /* 此處寫代碼 */ } .div2 { width: 300px; height: 300px; background: blue; /* 此處寫代碼 */ } .div3 { width: 100px; height: 100px; background: green; /* 此處寫代碼 */ float: inherit; } </style> <div class="div1"></div> <div class="div2"> <div class="div3"></div> </div> ``` 【編程】利用浮動來實現圖文混排的效果如下圖所示：  【選擇】如果網頁中某個元素內具有多個帶有浮動屬性的子元素，使得父元素發生塌陷，下列方法中不能解決父元素塌陷問題的是？（選擇一項） ``` A. 給父元素添加 clear: left; B. 給父元素添加高度 C. 在有浮動元素的最后添加一個帶有 clear: both; 屬性的元素 D. 給父元素添加 overflow: hidden; 和 zoom:1; ``` 【選擇】下列哪些參數不是 clear 屬性可用的參數（）（選擇一項） ``` A. clear: left; B. clear: right; C. clear: block; D. clear: inherit; ``` 【編程】如下圖所示，父元素中有兩個紅色的方框子元素，由于浮動的原因使得父元素出現了高度塌陷的問題，父元素變成了一條直線。清除浮動的方式有很多，請運用清除浮動的方式使父元素能夠包住子元素。  ``` <style> .per { width: 300px; height: auto; border: 2px solid #aaa; } .li { width: 100px; height: 100px; background: red; margin: 5px; float: left; } /* 此處寫代碼 */ </style> <div class="per"> <div class="li"></div> <div class="li"></div> <!-- 此處寫代碼 --> </div> ``` 【選擇】關于relative, 說法錯誤的是？（選擇一項） ``` A. 可以通過 top/right/bottom/left 移動元素的位置。 B. 設置相對定位的元素會脫離文檔流 C. relative 可以和浮動一起使用 D. 設置相對定位的元素，子元素設置絕對定位會參照它進行位置偏移。 ``` 【編程】編寫代碼，使得藍色區塊覆蓋紅色區塊并且藍色區塊分別距離頂部和左邊50px。 效果圖如下：  【選擇】如下列代碼所示，運行結果中，名為son的div在頁面的什么位置？（選擇一項） ``` <style> .per { width: 300px; height: 300px; background: red; margin-left: 200px; margin-top: 200px; } .son { width: 100px; height: 100px; background: blue; position: absolute; left: 0px; top: 0px; } </style> <div class="per"> <div class="son"></div> </div> ``` ``` A. son 在網頁的左上角 B. son 在父元素的左上角 C. son 在父元素的右下角 D. son 在網頁的右下角 ``` 【編程】運用絕對定位的知識完成，使div距離網頁右邊為200像素，距離底邊為100像素 。 【編程】運用絕對定位的知識完成，使得藍色方塊位于紅色方塊的正中心。  【閱讀】關于下列代碼說法正確的是（）（選擇一項） ``` <style> div { text-align: center; font-size: 40px; line-height: 100px; margin: 10px; width: 100px; height: 100px; float: left; color: yellow; background-color: red; } </style> <div>1</div> <div>2</div> ``` 【選擇】如下代碼，運行后藍色區塊的顯示位置為（）（選擇一項） ``` <style> .per { width: 300px; height: 300px; background: red; position: absolute; left: 100px; top: 100px; } .son { width: 100px; height: 100px; background: blue; position: fixed; right: 0px; bottom: 0px; } </style> <div class="per"> <div class="son"></div> </div> ``` ``` A. 出現在紅色區塊的左上角 B. 出現在網頁右下角 C. 出現在紅色區塊的右下角 D. 出現在網頁左上角 ``` 【編程】利用固定定位，無論頁面怎么滾動，紅色的div塊都固定在頁面的最上面，并且水平居中顯示。