8.1.2

1【單選題】

在CSS中，為頁面中的某個DIV標簽設置樣式div{width:200px;padding:0? 20px;border:5px；}，則該標簽的實際寬度為（ ）

• A、

  200px

• B、

  220px

• C、

  240px

• D、

  250px

我的答案：D

2【單選題】

下列設置“上邊距：20px、下邊距：30px、左邊距：40px、右邊距：50px”邊距屬性正確的是（? ?）。

• A、

  margin:20px 30px 40px 50px

• B、

  border: 20px 30px 40px 50px

• C、

  margin:20px 50px 30px 40px

• D、

  margin-top:20px 30px 40px 50px

我的答案：C

3【單選題】

將一個盒子的上邊框定義為1像素、藍色、單實線，下列代碼正確的是（ ）。

• A、

  border-top：1px solid #00f;

• B、

  border：1px solid #00f;

• C、

  border-top：1px dashed #00f;

• D、

  border：1px dashed #00f;

我的答案：A

4【多選題】

下列關于網頁布局方式描述正確的是（）

• A、

  網頁布局主要分為固定式布局、流式布局、響應式布局三種形式的布局方式

• B、

  固定式布局是指利用固定的大小寬度去布局網頁的尺寸

• C、

  流式網頁布局可以根據瀏覽器的寬度和屏幕的大小自動調整效果

• D、

  響應式網頁布局是一種糅合了流式布局，再搭配媒體查詢技術使用的網頁布局方式

我的答案：ABCD

5【多選題】

在CSS中，下列選項（ ）屬于BOX模型的屬性。

• A、

  font

• B、

  margin

• C、

  border

• D、

  visible

我的答案：BC

6【多選題】

下列關于border的具體的參數設置描述正確的是（）。

• A、

  ?可以一次只設置一個屬性（如top），也可以按“上à右à下à左”的順序一起設置，各個屬性取值之間用空格分隔

• B、

  當邊框寬度有3個參數時，將按“上à左+右à下”的順序作用到邊框上

• C、

  當邊框寬度有2個參數時，將按“上+下à左+右”的順序作用到邊框上

• D、

  當邊框寬度有1個參數時，四個方向的邊框寬度取值相同

我的答案：ABCD

7【判斷題】

CSS盒模型是指在頁面布局中，為了將頁面元素合理有效地組織在一起，形成的一套完整、行之有效的原則和規范。

我的答案：√

8【判斷題】

CSS盒主要是由margin（外邊距）、border（邊框）、padding（內邊距）和content（內容）四個部分組成，此外，還有高度和寬度兩個輔助屬性。

我的答案：√

9【判斷題】

內容區擁有width、height和overflow三個屬性，其中overflow屬性用來指定溢出內容的處理方式，屬性取值主要有visible、hidden、scroll、auto四種

我的答案：√

10【判斷題】

border（邊框）是指圍繞元素的內容和內邊距的一條或多條線，擁有多種屬性。可以利用這些屬性分別對top（頂部）、right（右邊）、bottom?（底部）、left（左邊）進行設置

我的答案：√

8.2.2

1【單選題】

在CSS中，可以通過float屬性為元素設置浮動，以下選項中不屬于float屬性值的是（? ）。

• A、

  left

• B、

  center

• C、

  right

• D、

  none

我的答案：B

2【單選題】

在CSS中，如果要清除浮動層對文本的影響，下列說法正確的是（? ）。

• A、

  為浮動層增加clear屬性，并設置其屬性為both

• B、

  為浮動層增加clear屬性，并設置其屬性為none

• C、

  為放置文本的標簽增加clear屬性，并設置其屬性為none

• D、

  為放置文本的標簽增加clear屬性，并設置其屬性為both

我的答案：D

3【單選題】

CSS中position:fixed表示（? ）。

• A、

  相對于瀏覽器窗口進行定位

• B、

  相對于它在原文檔流的位置進行定位

• C、

  相對于其上一個已經定位的父元素進行定位

• D、

  相對于父元素進行定位

我的答案：A

4【單選題】

使用float或position屬性布局兩欄或多欄內容時，會因為內容高度不同而使得底部很難對齊，CSS3中（? ）可以解決這個問題。

• A、

  columns

• B、

  columns-gap

• C、

  ?columns-rule

• D、

  columns-span

我的答案：A

5【多選題】

下列關于元素定位描述正確的是（? ）。

• A、

  元素定位主要是通過CSS定位實現網頁元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分

• B、

  相對定位是將元素相對于它在標準文檔流中的位置按指定偏移移動到新位置，移動后元素形狀不變，原本位置所占空間也繼續保留

• C、

  絕對定位是將元素依據最近的已經定位的父元素進行定位，若所有父元素都沒有定位，依據body根元素（瀏覽器窗口）進行定位 ，移動后元素形狀不變，原本位置所占空間不保留

• D、

  固定定位，其本質是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網頁元素

我的答案：ABCD

6【判斷題】

在CSS當中有三種基本的定位機制：普通流、浮動和絕對定位。其中普通流是默認的一種定位機制,浮動流和絕對定位分別通過float屬性和position屬性來定位。

我的答案：√

7【判斷題】

元素定位主要就是通過CSS定位實現網頁元素的精確定位。元素的定位屬性主要包括定位模式和邊偏兩部分。

我的答案：√

8【判斷題】

相對定位是將元素相對于它在標準文檔流中的位置按指定偏移移動到新位置，移動后元素形狀不變，原本位置所占空間也繼續保留。

我的答案：√

9【判斷題】

固定定位是將元素依據最近的已經定位的父元素進行定位，若所有父元素都沒有定位，則依據body根元素（瀏覽器窗口）進行定位。移動后元素形狀不變，原本位置所占空間不保留。

我的答案：×

10【判斷題】

CSS3?彈性盒是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

我的答案：√

8.3.2

1【單選題】

采用DIV+CSS設計頁面布局的優勢不包括（? ? ）。

• A、

  減少頁面冗余代碼

• B、

  更容易修改和維護

• C、

  容易被搜索引擎收錄

• D、

  可以輕松控制頁面布局

我的答案：B

2【單選題】

下列（? ? ?）不屬于常見的頁面布局的方式。

• A、

  ?流式布局

• B、

  ?固定布局

• C、

  靜態布局

• D、

  彈性布局

我的答案：C

3【單選題】

在CSS中，為頁面中的某個DIV標簽設置樣式div{width:200px;padding:0?20px;?border:5px;}，則該標簽的實際寬度為（????）。

• A、

  200px

• B、

  ??220px

• C、

  240px

• D、

  ?250px

我的答案：D

4【單選題】

如果要使多個DIV并列排列，應使用（? ? ? ）。

• A、

  margin

• B、

  ?float

• C、

  content

• D、

  cle

我的答案：B

5【多選題】

下面情況下，哪些會發生margin屬性的疊加（　　）。

• A、

  元素的頂邊界與前面元素的底邊界發生疊加

• B、

  元素的頂邊界于父元素的頂邊界發生疊加

• C、

  ??元素的頂邊界于底邊界發生疊加

• D、

  空元素中已經疊加的邊界與另一個空元素的邊界發生疊加。

我的答案：ABCD

6【多選題】

關于下列代碼片段分析正確的是（　　）。

? ? <style?type=”text/css”>

? ? ? ?a?{display:inline-block;

? ? ? ? ? ? width:100px;

? ? ? ? ? ?height:30px;

? ? ? ? ? ?border:1px?solid?red;

? ? ? ? ? }

? ? </style>

• A、

  以上代碼用于超鏈接標簽的樣式

• B、

  ?超鏈接將以塊狀方式顯示

• C、

  超鏈接的寬度為100px,高度為30px

• D、

  超鏈接在同一行顯示。

我的答案：ABD

7【判斷題】

一個大div塊里包含一個小的div，設置小的div與大div的左邊距5px樣式的標準寫法是margin-left:5px。

我的答案：×

8【判斷題】

定義盒模型的外間距時不能取負值。

我的答案：×

9【判斷題】

nav標簽通常代表網頁中的導航區塊。

我的答案：√

10【判斷題】

div標簽顯示時將獨占一行。

我的答案：√

8.4.2

1【單選題】

關于CSS3中的columns屬性，下列說法正確的是（? ? ）。

• A、

  用于返回單元格的列號

• B、

  ?僅指定多列布局的列寬度

• C、

  僅指定多列布局的列數

• D、

  指定多列布局的列寬度和列數

我的答案：D

2【單選題】

樣式代碼div{columns-gap:10px}的含義是（? ? ?）。

• A、

  多列布局的列寬度為10px

• B、

  多列布局的列間距為10px

• C、

  列間隔線寬為10px

• D、

  以上都不對

我的答案：B

3【單選題】

若父元素寬度為400px，列間距為20px，則樣式代碼div{columns:auto 4}設置的列寬度為（? ? ?）。

• A、

  100px

• B、

  340px

• C、

  85px

• D、

  80px

我的答案：C

4【單選題】

在多列布局中，column-count屬性用于設置列數，關于它的屬性取值，下列說法正確的是（? ? ? ）。

• A、

  可取為auto

• B、

  可取0

• C、

  可取負值

• D、

  可取任意值

我的答案：A

5【多選題】

下列屬性中，哪些屬于多列設置的屬性(　　）。

• A、

  column-rule-width

• B、

  column-count

• C、

  column-span

• D、

  column-rule-style

我的答案：ABCD

6【判斷題】

多列布局設置列寬40px，列數為2，若瀏覽器寬度小于80px，則顯示時縮減寬度，仍顯示2列。

我的答案：×

7【判斷題】

目前，并不是所有瀏覽器都支持多列布局的columns-span屬性。

我的答案：√

8【判斷題】

在多列布局設置中“column-gap: normal”規定列間距為一個常規的間隔，W3C建議的值是1px。

我的答案：×

9【判斷題】

在多列布局設置中如果沒有設置columns-rule屬性，則默認其屬性取值為：medium none black。

我的答案：√

10【判斷題】

在多列布局設置中“ columns-span:all”規定橫跨所有列。

我的答案：√

8.5.2

1【單選題】

若將彈性盒中的子元素按序正向從左到右橫排，下列樣式代碼正確的是（? ? ? ）。

• A、

  flex-direction: row

• B、

  flex-direction: row-reverse

• C、

  ?flex-direction: column

• D、

  flex-direction: column-reverse

我的答案：A

2【單選題】

彈性子元素的樣式代碼“ justify-content: space-between”的含義是（? ? ）。

• A、

  子元素位于容器的中心

• B、

  子元素位于各行之間留有空隙的容器內

• C、

  子元素位于各行之前、之間、之后都留有空白的容器內

• D、

  子元素位于容器的開頭

我的答案：B

3【單選題】

若設置彈性盒中子元素縱向的對齊方式，應選擇（? ? ?）屬性。

• A、

  align-content

• B、

  align-self

• C、

  align-items

• D、

  ?justify-content

我的答案：C

4【單選題】

若父元素的寬度為800px，三個子元素的總寬度是400px,三個元素的flex屬性分別設置如下

? ? 元素1為“flex:1? 1? 100px;”

? ? 元素2為“flex:2? 0? 200px;”

? ? 元素3為“flex:1? 1? 100px;”

? ? 則元素1顯示的寬度為（? ? ）。

• A、

  100px

• B、

  200px

• C、

  300px

• D、

  400px

我的答案：B

5【多選題】

彈性盒子分為（? ? ? )布局形式。

• A、

  橫向

• B、

  縱向

• C、

  前向

• D、

  后向

我的答案：AB

6【判斷題】

定義某個選擇器為彈性盒子的屬性為flex。

我的答案：×

7【判斷題】

子元素的屬性“flex-wrap”默認值為nowrap。

我的答案：√

8【判斷題】

order屬性用于定義彈性盒子元素的排列順序。

我的答案：√

9【判斷題】

彈性盒子元素的flex屬性設置為“flex :1 1 100px“代表該元素的寬度為100px，且不會因父元素寬度的變化而變化。

我的答案：×

10【判斷題】

一旦將 display 屬性設置為 flex ，無序列表中的每個列表項將自動變為從左到右橫向排列。（

我的答案：√

8.6.2

1【單選題】

若將網頁元素變成灰色，下列樣式代碼正確的是（? ? ? ）。

• A、

  ?filter: sepia（1）

• B、

  filter: grayscale(0.5)?

• C、

  filter: invert(0.5)

• D、

  filter: blur(0.5)

我的答案：A

2【單選題】

若想調整網頁元素的對比度，下列樣式代碼正確的是（? ? ? ?）。

• A、

  filter: brightness(0.5)

• B、

  filter: saturate(2)

• C、

  filter:contrast(2)

• D、

  filter:opacity(0.5)

我的答案：C

3【單選題】

若對網頁元素進行縮放變換，可以采用（? ? ?）屬性進行恰當的設置來實現。

• A、

  transition

• B、

  ?filter

• C、

  ?background

• D、

  ?transform

我的答案：D

4【單選題】

在下列函數中，可將網頁元素做旋轉變換的是（? ? ? ）。

• A、

  translate（）

• B、

  ?rotate()

• C、

  scale()

• D、

  skew()

我的答案：B

5【多選題】

下列屬性取值中，可作為過渡屬性的速度類型設置的是（? ? ? ? )。

• A、

  skew

• B、

  ?linear

• C、

  ?ellipse

• D、

  ease

我的答案：BD

6【判斷題】

filter: opacity(2)可實現網頁元素的透明效果。

我的答案：×

7【判斷題】

子元素的屬性“flex-wrap”默認值為nowrap

我的答案：√

8【判斷題】

order屬性用于定義彈性盒子元素的排列順序。

我的答案：√

9【判斷題】

彈性盒子元素的flex屬性設置為“flex :1 1 100px“代表該元素的寬度為100px，且不會因父元素寬度的變化而變化。

我的答案：×

10【判斷題】

一旦將 display 屬性設置為 flex ，無序列表中的每個列表項將自動變為從左到右橫向排列。

我的答案：√

總結

以上是生活随笔為你收集整理的太原理工web课程答案——web程序设计课程答案 （第八章 CSS3页面布局）持续发布中——的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。