第5模塊闖關CSS練習題

1.列舉你知道的css選擇器?

說道css選擇器，大家都知道有許多種，但是真要你去掰着手指頭數一數的話，你可能需要數幾分鍾。其實這么多選擇器，完全可以分為兩類：

1. 標簽選擇器（*是特殊情況），可但標簽，也可上下文多標簽；
2. 屬性選擇器（id和class都是屬性，特殊的屬性）；

2.1.    標簽選擇器

2.1.1 通用選擇 *

　　通用選擇器 * 大家應該都比較熟悉了，最常用的就是 *{margin:0; box-sizing:border-box;}。mragin:0咱們在上一節已經說過，box-sizing:border-box將在后面的盒子模型那塊再詳細描述。

　　例如，我們在檢測bootstrap3的樣式時，也可以看到它用到了 * 選擇器：

　　

 單標簽

 多標簽

　　多標簽選擇器一般和html上下文有關，它有以下集中分類

1. 選擇一個祖先的所有子孫節點，例如 div p{…}
2. 選擇一個父元素的所有子屬節點，例如 div > p{…}
3. 選擇某一個元素緊挨着的兄弟節點，例如 li + li{…}
4. 選擇某一個元素的所有同胞節點，例如 span ~ a{…}
5. 以上各種情況的組合應用（不要組合過於復雜，編碼講求可讀性第一）

 

　　給大家列舉一個比較典型的應用，如下圖

　　

　　上圖中的效果應該比較常見，在各個菜單之間加下划線。我之前的實現是：每個li都加一個border-bottom，在把最后一個li的border-bottom去掉。

　　其實完全沒必要這樣麻煩，下面一個樣式設置即可解決：

　　

　　有點意思吧？

2.2.    屬性選擇器

2.2.1 特殊1：id選擇器

　　基礎知識，不再贅述。

　　按照許多css教程上講的，id選擇器和屬性選擇器是不同的兩個類別，為什么要把id選擇器放在屬性選擇器下面的呢？因為css選擇器是根據html節點的特性來設置的，id也是一個屬性，只是它是一個比較特殊的屬性，每個html節點的id不能重復。

　　由於特殊，而且比較常用，所以就單獨給id選擇器一個“#”，本質上就是一個屬性選擇器。下面兩行代碼的執行效果完全相同：

　　

2.2.2 特殊2：class選擇器

　　基礎知識，不再贅述。

　　class也是一個特殊的屬性，之所以把它放在屬性選擇器下，和上文將的id一樣。

2.2.3 屬性選擇器

　　屬性選擇器有兩種情況：

1. 只通過屬性名選擇：img[title]{…      }
2. 通過屬性名和屬性值選擇：input[type=’text’]{…}

　　這兩個也是比較基礎的，再次也就不再詳細展開了，不了解的朋友可以去看看基礎教程補補課。

3. 偽類和偽元素

　　上文提到了若干種選擇器類型，偽類和偽元素可針對任何一種選擇器使用。

3.1.    偽類

　　偽類分為UI偽類和結構化偽類。

3.1.1 UI偽類

　　UI偽類都比較簡單常用，我下面簡單寫幾句代碼，就不再詳細說了。

　　

 結構化偽類（IE低版本不行）

　　先問大家一個問題：如何實現一個表格間隔顯示背景顏色，如圖：

　　

　　最簡單的方式莫過於使用結構化偽類，一句樣式設置即可實現。

　　

 

　　結構化偽類有如下書寫選項，至於什么意思，從字面意思即可理解：

　　

   偽元素

　　記住，偽元素是一個非常重要的概念！其中，:before和:after 非常常用。

　　首先，咱們先看看:before和:after是怎么回事兒。

　　

　　上圖中，我們可以看到，可以為元素前后添加內容。這里的“內容”還可以寫成unicode編碼的方式，如下圖：

      

　　另外，除了可以添加內容外，你還可以自定義執行內容的樣式，如下圖：

　　

 

2.分別闡述類選擇器和id選擇器的作用?

類選擇器，通過樣式類選擇元素：

示例：

.c1 {
  color: red;
}

id選擇器通過元素的ID值選擇元素：

示例：

#i1 {
  color: red;
}

3、如何重置網頁樣式？
第一種方式
* {margin:0px; padding:0px;}
    
現在眾多的設計師發現，這行代碼雖然簡單，但卻讓網頁解析太慢，呵呵，當然了，自己是業余的，不用太在意。
於是出現了幾種CSS重置方法：

第二種方式
NETTUTS上的 Jeffrey Way寫了篇文章Weekend Quick Tip: Create Your Own Simple Reset.css File
釋出自己用來重置CSS樣式表的方法

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body{line-height: 1;font-size: 88% /* Decide for yourself if you want to include this. */;}
h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}
ul, ol{list-style: none;}
a{color: black;text-decoration: none;}
a:hover
{text-decoration: underline;}
.floatLeft{float: left;padding: .5em .5em .5em 0;}
.floatRight{float: right;padding: .5em 0 .5em .5em;}
    
這個方法適用於大多數的網頁設計。

第三種方式
一部分人追求徹底抹去瀏覽器影響

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del { text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
第四種方式
還有今天sofish提到的Yahoo的YUI提供的CSS重置文件

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;
font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
這些，沒有誰好誰壞一分，大多數設計師並不推薦第一種方法，因為我國的抄襲美德，現在搜索到的CSS網頁設計技巧，第一位卻一定是這個。

4.對盒模型是怎么理解的？它們的屬性有哪些？
HTML文檔中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其占用空間，
這個模型稱為盒子模型。 盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域）

border邊框的常用值：

 

值	描述
none	無邊框。
dotted	點狀虛線邊框。
dashed	矩形虛線邊框。
solid	實線邊框。

 

5.什么是標准文檔流？

標准文檔流

說白了就是一個“默認”狀態。文檔流指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。

並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。

 

6.浮動盒子的特點？浮動的好處？如何清除浮動？

元素浮動以后可以向左或向右移動，直到它的外邊緣碰到包含它的框或者另外一個浮動元素的邊框為止。元素浮動以后會脫離正常的文檔流，所以文檔的普通流中的框就變現的好像浮動元素不存在一樣。

浮動的好處：

• 在圖片周圍包含文字 
  

• 創建網頁布局 
  

  浮動的缺點：

• 無法撐起父元素。

• 同級別的兄弟元素會圍繞在周圍。

使用偽元素清除浮動:after（推薦使用）

示例

//在css中添加:after偽元素
.parent:after{
    content:"";
    visibility:hidden;
    display:block;
    width:100%;
    height:0;
    clear:both;
}

<div class="parent"> <div class="f"></div> </div>

7.精靈圖的好處是什么？
CSS Sprites 的優點： 
1、減少圖片的字節 
2、減少了網頁的http請求，從而大大的提高了頁面的性能 
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。 
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

8.定位有幾種？闡述一下“父相子絕”定位是怎樣理解的？

如果要對一個子元素使用定位，那么應該是子元素是絕對定位，它的父元素為相對定位。讓子元素 以其父元素為標准來定位。

如果不這么做，子元素就會相對body或瀏覽器定位產生不好的效果。

 

9.什么樣的盒子脫離了文檔標准流？脫離文檔標准流的盒子的特點是怎樣的？

1、浮動

　　浮動是CSS中用到的最多的一個選項，他有三個性質。關於浮動我們要強調一點，永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。

　　1.1 浮動元素脫離標准文檔流

　　　　1.1.1 大概描述：有兩個盒子，一個盒子浮動，一個盒子不浮動。浮動的盒子會脫離標准文檔流，不浮動的盒子會在標准文檔流中成為第一個，所以兩者出現覆蓋現象。

　　　　

　　　　1.1.2 大概描述：一個行內標簽在標准文檔流中是不能設置寬高的，但是使用float使其脫離文檔流之后，就可以對其設置寬高了。所有浮動的標簽不會去區分行內標簽和塊級標簽。也就是說： 一旦一個元素浮動了，那么，將能夠並排了，並且能夠設置寬高了。無論它原來是個div還是個span。

 

　　1.2 浮動的元素互相貼靠　

　　　　以float向左浮動為例：

　　　　如果有足夠空間，那么就會靠着2哥。如果沒有足夠的空間，那么會靠着1號大哥。

　　　　如果沒有足夠的空間靠着1號大哥，自己去貼左牆。

　　　　

　　1.3 浮動元素有“自圍”的效果

　　　　自圍效果就是：浮動的盒子可以遮蓋文檔標准流的第一個盒子，但是不會遮蓋里面的文字，文字會圍繞浮動的盒子顯示。

　　　　在CSS代碼中讓div浮動，p不浮動，那么p中的文字就睡形成這種自圍效果。

<div>
    <img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

　　　　

2、絕對定位

3、固定定位

4、父子關系：兒子就是占用父親內容的寬高，和父親的padding沒有關系。

 

10.z-index的規則是怎樣的？ 11.display屬性值有哪些？分別描述他們的意思？

在這里說明一下 小米的作業 1.不用把整個網頁做完，做到“小米閃購區域即可”

2.其實大家能發現，小米閃購下面的區域結構布局基本類似。

3.前端的課程內容跟python不同，屬性太多，記得東西太多，一旦不小心，可能整個網頁都顯示不出來

這也是對大家有好處，沒點耐心你成不了大事，磨磨自己的性子，對自己以后未來的發展有好大幫助。

答：

z-index用來控制元素重疊時堆疊順序。

適用於：已經定位的元素（即position:relative/absolute/fixed）。

一般理解就是數值越高越靠上，好像很簡單，但是當z-index應用於復雜的HTML元素層次結構，其行為可能很難理解甚至不可預測。因為z-index的堆疊規則很復雜，下面一一道來。

首先解釋一個名詞：

stacking context:翻譯就是“堆疊上下文”。每個元素僅屬於一個堆疊上下文，元素的z-index描述元素在相同堆疊上下文中“z軸”的呈現順序。

z-index取值：

默認值auto：

當頁面新生成一個box時，它默認的z-index值為auto，意味着該box不會自己產生一個新的local stacking context，而是處於和父box相同的堆疊上下文中。

正/負整數

這個整數就是當前box的z-index值。z-index值為0也會生成一個local stacking context，這樣該box父box的z-index就不會和其子box做比較，相當於隔離了父box的z-index和子box的z-index。

接下來從最簡單的不使用z-index的情況開始將，循序漸進。