003 css總結

時間 2019-11-11

標籤 css 總結欄目 CSS 简体版

原文原文鏈接

1.題目css

有哪項方式能夠對一個DOM設置它的CSS樣式？
CSS都有哪些選擇器？
CSS選擇器的優先級是怎麼樣定義的？
CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？
超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？
行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？
css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？
px和em的區別。
描述一個」reset」的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？

一：解答css3

1.有哪項方式能夠對一個DOM設置它的CSS樣式瀏覽器

　　外部樣式表，引入一個外部css文件字體

　　內部樣式表，將css代碼放在 <head> 標籤內部網站

　　內聯樣式，將css樣式直接定義在 HTML 元素內部ui

2.CSS都有哪些選擇器url

　　基本選擇器spa

通配符選擇器（＊）
id選擇器（\#ID）
類選擇器（.className）
元素選擇器(E)
後代選擇器（ＥＦ）
子元素選擇器(E>F)
相鄰兄弟元素選擇器(E + F)
羣組選擇器（selector1,selector2,...,selectorN）

　　屬性選擇器.net

　　　　使用CSS3屬性選擇器，你能夠只指定元素的某個屬性，或者你還能夠同時指定元素的某個屬性和其對應的屬性值。code

E[attr]：只使用屬性名，但沒有肯定任何屬性值
E[attr="value"]：指定屬性名，並指定了該屬性的屬性值
E[attr~="value"]：指定屬性名，而且具備屬性值，此屬性值是一個詞列表，而且以空格隔開，其中詞列表中包含了一個value詞，並且等號前面的「〜」不能不寫
E[attr^="value"]：指定了屬性名，而且有屬性值，屬性值是以value開頭的；
E[attr$="value"]：指定了屬性名，而且有屬性值，並且屬性值是以value結束的；
E[attr*="value"]：指定了屬性名，而且有屬性值，並且屬值中包含了value；
E[attr|="value"]：指定了屬性名，而且屬性值是value或者以「value-」開頭的值（好比說zh-cn）;

　　僞類選擇器

　　　　僞類選擇器的形式就是:xxx，好比:hover, :link, :nth。

3.僞類選擇器

　　動態僞類

　　這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"。先來看最多見的錨點僞類。

hover: 用於當用戶把鼠標移動到元素上面時的效果
active: 用於用戶點擊元素那一下的效果（正發生在點的那一下，鬆開鼠標左鍵此動做也就完成了）
focus: 用於元素成爲焦點，這個常常用在表單元素上

　　UI元素狀態僞類

　　主要是針對於HTML中的Form元素操做, IE8不支持":checked",":enabled",":disabled"這三種選擇器。

　　CSS3的:nth選擇器

　　主要注意的是CSS3添加的nth選擇器在IE8下不支持。

fist-child: 選擇某個元素的第一個子元素；
last-child: 選擇某個元素的最後一個子元素；
nth-child(): 選擇某個元素的一個或多個特定的子元素；
其餘：經常使用的就是上面三種了，其餘自行了解。

4.CSS選擇器的優先級是怎麼樣定義的

在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
做爲style屬性寫在元素內的樣式
id選擇器
類選擇器
標籤選擇器
通配符選擇器
瀏覽器自定義或繼承

總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

5.css三大特性

　　繼承：即子類元素繼承父類的樣式;

　　優先級：是指不一樣類別樣式的權重比較;

　　層疊：是說當數量相同時，經過層疊(後者覆蓋前者)的樣式。

6.CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內

　　最基本的：

　　　　設置display屬性爲none，或者設置visibility屬性爲hidden

　　技巧性：

　　　　設置寬高爲0，設置透明度爲0，設置z-index位置在-1000

7.超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

　　被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

8.行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？

　　塊級元素(block)特性：

　　　　老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;

　　　　寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

　　內聯元素(inline)特性：

　　　　和相鄰的內聯元素在同一行;

　　　　寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

　　那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

　　　　答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

9.css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

　　垂直方向：line-height
　　水平方向：letter-spacing

　　url：https://blog.csdn.net/zengyonglan/article/details/52797445

10.px與em

　　px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

　　瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

11.描述一個」reset」的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？

　　Reset樣式的目的就是清除某些瀏覽器的默認樣式,方便css的書寫：例如：*{margin:0;padding:0;list-style:none;}

　　normalize的理念與reset的不一樣，他並非清除瀏覽器的默認樣式，而是儘可能將全部的瀏覽器的默認樣式統一。