CSS知識點梳理（二）

標籤：塊元素   text   box   idt   代碼   src   技術分享   覆蓋   個數   

一、繼承性

特點：

1、外層元素身上的樣式會被內層元素所繼承。

2、如果內層元素與外層元素身上的樣式相同時，外層元素的樣式會被內層元素所覆蓋。

問：是不是所有的樣式都能夠被繼承呢？

答：並不是所有的樣式都能夠被繼承。只有文本與字型樣式屬效能夠被繼承。其它的樣式屬性都不可以被繼承。

 

注意：

         在實際工作中，我們往往會給body標籤設定字型大小以及字型顏色。因為body標籤是最外層的元素，內層的元素會繼承外層的元素的樣式。

二、優先順序

行內樣式>ID選取器>類別選取器>標籤選取器

一般而言，選取器指向的越準確，優先順序就會越高。通常我們會用1來表示標籤選取器的優先順序，用10來表示類別選取器的優先順序，用100來表示ID選取器的優先順序，用1000來表示行內樣式。

 

標籤選取器              1

類別選取器                  10

ID選取器                  100

行內樣式                  1000

 

值越大表示其優先順序越高。

不管是單個選取器還是多個選取器組合它們之前的優先順序都可以通過上面這個公式來進行計算。我們將其值稱之為權重值。權重值越大就表示其優先順序越高。

 

三、!important屬性important在英文中含義是“重要的”意思它主要是用來提升屬性的權重。其屬性的權重值無窮大

文法格式：

屬性:值 !important;

• 正確的寫法

屬性:值 !important;

注意：

1、!important它是提升的屬性的權重，而不是提升選取器的權重！

2、!important它不能提升繼承過來的權重！

四、一個標籤內可以攜帶多個類名

類名：指的是class的屬性值

一個標籤內可以攜帶多個類名，指的是class的屬性值可以有多個，每一個屬性值之間使用空格分隔。

舉例：

         <標籤名  class=”值1  值2   值3”></標籤名>

 

多個類名的優點：

1. 減少CSS的代碼量
2. 多個類名的樣式會疊加到當前元素上面

注意：如果說一個標籤內的多個類名，它們設定的樣式是一樣的話，就會存在樣式的衝突！

五、背景樣式屬性

 

注意：

background-color：用於給元素設定背景顏色  但是前提這個元素要麼有內容，要麼有寬度和高度才可以

 

background-image  用於給元素設定背景圖片  圖片的地址一定放在url(圖片的地址)   但是前提這個元素要麼有內容，要麼有寬度和高度才可以  背景圖片預設是平鋪的

 

background-repeat 是用於設定背景圖片是否平鋪    repeat(是平鋪)、repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪)、no-repeat(不平鋪)

 

background-position 用於設定背景圖片的位置  如果要設定背景圖片的位置 這個屬性就會有兩個值 

 

background-position:水平位置 垂直位置  這兩個位置的表示方式有三種  英文單詞(top left) 固定值(50px 100px) 百分比(50% 20%)   這三種方式可以混合使用 可以同時使用英文單詞或者是固定值或者是百分比

英文單詞的表示方式

水平位置：left(居左)、center(置中)、right(居右)

垂直位置：top(居上)、center(置中)、bottom(居下)

固定值的表示方式

百分比的表示方式

background:簡寫屬性 它可以同時設定多個樣式  比如背景顏色、背景圖片、背景圖片是否平鋪  水平位置 垂直位置  

background：簡寫屬性 其值的個數不定 順序也不定 每一個值之前使用空格分隔

六、浮動

需求：

         能夠實現讓多個元素排在同一行，並且給這些元素設定寬度與高度！

         讓多個元素排在同一行：行內元素的特性

         給這些元素設定寬高：區塊層級元素的特性

在標準文檔流中的元素只有兩種：

元素和行內元素。如果想讓一些元素既要有區塊層級元素的特點也要有行內元素的特點，只能讓這些元素脫離標準文檔流。

浮動可以讓元素脫離標準文檔流  就可以實現讓多個元素排在同一行 並且可以設定寬高！

浮動它是通過一個浮動屬性來實現

float：這個屬性有兩個值   left(向左浮動) 向左移動 、right(向右浮動)  向右移動

浮動元素的特性：

浮動元素它脫離標準文檔流 它不再佔用空間了

我們可以把浮動元素理解為“漂”

浮動元素它的層級要比標準文檔流裡面的元素層級要高，它會將標準文檔流中的元素給壓蓋住  

浮動元素它會向左或者向右進行浮動(移動)

浮動元素它遇到了父元素的邊框然後就停止了浮動

浮動元素它還會遇到上一個浮動元素後就停止了浮動

浮動元素浮動以後 其父元素不會再包裹著浮動元素

我們將行內元素進行浮動以後 那麼這個行內元素它會變成區塊層級元素

七、清除浮動

注意：

只要有浮動  那麼必須有清除浮動

為什麼要清除浮動？

         因為經過浮動了元素 它會影響到它下面的元素的排版布局  還有浮動元素的父元素沒有將浮動元素包裹著

只要清除了浮動 不會影響到浮動元素的下面進行排版布局  浮動元素的父元素會將浮動元素從視覺上包裹著

清除浮動有以下三種方法：

給浮動元素的父元素設定一個固定的高度   但是這個方法不建議使用  因為一個元素的高度一般情況下不是手動設定的 它應該是由其自身的內容來撐高的！

使用清除浮動的樣式屬性  clear   clear這個屬性是專用於來清除浮動的  這個屬性有三個值  clear:left;清除左浮動  clear:right; 清除右浮動   clear:both;兩者都清除

這個屬性一般是用在最後 一個浮動元素的下面  在最後一個浮動元素的下面建立一個空白的div 這個div什麼都不要放 不要給這個div裡面放置內容  它只做一件事件就是清除浮動

使用overflow:hidden 這個屬性來清除浮動  overflow是一個屬性  

overflow:hidden 它原意是用來將溢出的部分進行隱藏  但是它還可以用於清除浮動

overflow:hidden 它一般主要是用來將列表的浮動給清除。

八、盒子模型

什麼是盒子？

         盒子是用來儲存物品

思考一下：一個盒子是由哪些部分進行組成！

我們可以將一個盒子理解為一個快遞的包裹：

         有內容+有填充物+紙盒子

那我們如何去理解CSS中的盒子呢？ 

在CSS中一個盒子的組成部分：內容(content)+內填充(padding)+邊框(border)+外邊距(margin)

一個盒子中的主要屬性：width、 height、padding、border、margin

 

width：指“寬度”的意思  但是這裡的寬度指的盒子裡面的內容的寬度  而不是盒子的寬度

height：指“高度”的意思  但是這裡的高度指的盒子裡面的內容的高度  而不是盒子的高度

padding：是“內填充”的意思，指的盒子裡面的內容到盒子邊框的距離 

border：是“外邊框”的意思  指的盒子的邊框

margin：是“外邊距”的意思  指的是盒子與盒子之間的間距

 

 

問：請回答如何計算一個盒子的總寬度？

一個盒子的總寬度=盒子裡面內容的寬度+左右兩邊的填充+左右兩邊的邊框線

一個盒子的總高度=盒子裡面內容的高度+上下兩邊的填充+上下兩邊的邊框線

注意：一個盒子的高度一般情況下是不用設定的，因為一個盒子的高度它應該是由其內容來決定的。

 

九、padding

padding是“內填充”的意思 指的是盒子中間的內容到邊框的這一段距離

 

padding是有4個方向的 所以我們能夠分別的描述這4個方向的padding

 

方法有兩種：第一種我們稱之為小屬性，第二種我們稱之為簡寫屬性

小屬性：

 

padding-top：上內填充

padding-right：右內填充

padding-bottom：下內填充

padding-left：左內填充

 

 

 

 

簡寫屬性：

• padding：這個屬性是有方向的  可以同時表示四個方向  這個屬性的方向是有順序的  順序是順時針方向  也就是：上、右、下、左  這個順序
• padding:20px  表示上右下左這四個方向的內填充都為20像素
• padding:10px 20px; 表示上下為10像素  左右為20像素
• padding:10px 20px 30px;表示上為10 左右為20  下為30
• padding:10px 20px 30px 40px;表示上為10 右為20 下為30 左為40

 

十、margin

margin它表示“外邊距”的意思 它是指盒子與盒子之間的距離

margin它也是有4個方向的 所以我們也能夠通過4個方向對其進行描述

方法有兩種：第一種我們稱之為小屬性，第二種我們稱之為簡寫屬性

小屬性：

margin-top：上外邊距

margin-right：右外邊距

margin-bottom：下外邊距

margin-left：左外邊距

 

簡寫屬性：

• margin：簡寫屬性它是有方向的 這裡的方向是一個順時針的方向  它的方向是的順序是：上、右、下、左
• margin:10px;表示上右下左這四個方向的外邊距都是10像素
• margin:10px 20px;表示上下這兩個方向的外邊距為10像素  左右兩個方向的外邊距為20像素
• margin:10px 20px 30px;表示上外邊距為10像素 左右外邊距為20像素 下外邊距為30像素
• margin:10px 20px 30px 40p;表示上外邊距為10像素 右外邊距為20像素 下外邊距為30像素 左外邊距為40像素

 

十一、margin的注意事件margin有塌陷現象

什麼是margin的塌陷現象

1、在標準的文檔流中 豎直方向的margin值不會疊加 它會取較大的值

 

2、橫著方向是沒有margin的塌陷現象

 

3、浮動元素它是沒有margin的塌陷現象的

margin置中

margin的值可以是auto   auto表示“自動”的意思  當左外邊距與右外邊距的值都是auto時那麼這個盒子就會水平置中

 

注意：

• 使用margin來實現水平置中時 一定要有固定的寬度(給這個盒子設定一個寬度)  只有塊元素可以實現水平置中  行內元素是不能實現置中的

 

• 只有標準文檔流中的盒子才可以使用margin來實現水平置中

 

• margin屬性是用來實現盒子的水平置中 而不是文本的水平置中 
• text-align這個屬性它是用於實現文本的對齊  如果其值為center就表示文本水平置中  但是它不能實現盒子的水平置中

十二、CSS3結構偽類

選取器	功能
E:first-child	匹配第一個孩子
E:last-child	匹配最後一個孩子
E:nth-child(n)	匹配第n個孩子
E:nth-child(2n)或 E:nth-child(even)	匹配偶數的孩子  如：2、4、6…..
E:nth-child(2n+1) E:nth-child(odd)	匹配奇數的孩子  如：1、3、5…..
E:only-child	匹配有且只有一個孩子

 

 

虛擬元素

選取器	功能
:first-letter	操作當前元素中第一個字
:first-line	操作當前元素中第一行文字
::before	在之前插入，在一個盒子內部的最前面
::after	在之後插入，在一個盒子內部的最後面

文本陰影

text-shadow:水平陰影 垂直陰影 模糊距離 陰影顏色

描述：

文字陰影可以有多組值，多組之間用逗號隔開就可以

水平陰影正值陰影在右邊 負值在左邊

垂直陰影正值在下邊，負值在上邊

模糊強度，值越大越模糊

盒子陰影

box-shadow:水平方向陰影 垂直方向陰影 模糊距離 陰影尺寸  陰影顏色 內/外陰影

水平陰影和垂直陰影必須的寫，其餘的是可以省略不寫

盒子陰影可以有多組值，多組之間用逗號隔開就可以

水平陰影正值陰影在右邊 負值在左邊

垂直陰影正值在下邊，負值在上邊

模糊尺寸，值越大越模糊

CSS知識點梳理（二）