css選取器、css繼承關係、css盒子模型

標籤：round   css   :link   過濾   link   設定   enter   font   滑鼠移動   

一、摘要

   總結前端部分css選取器、css繼承關係、css盒子模型等相關知識，並對容易出錯的地方進行分析說明。

二、原因

  在開發前端頁面時如果對css選取器、繼承關係，層疊，以及padding、margin區別和浮動問題理解不到位，會導致不知道什麼時候該用哪種方法來處理問題。此文檔是針對這些問題進行說明。

以下是對相關知識點的總結與分析： 三、選取器 1、基本選取器

（1）* 萬用字元選取器  代表所有元素

 例子： *{ margin：0; padding:0;}     

 （2）標籤選取器 代表網頁中的所有的該標籤

 例子： p{ width：250px; border:1px solid red;}

（3）class選取器  .class名稱  

 例子：  .sub{ width:250px;} 代表所有class名為sub的元素

（4）id選取器   # id名稱

 例子：#uname{ background:red;}代表id名為uname的唯一元素

2、層次選取器

(1)後代選取器  選擇1   選擇2

例子: ul li{color：blue;}

 >選擇1>選擇2  直接子項目選取器

代表li元素的父親元素（父輩）必須是ul

（2）並欄選取器 選取器A，選取器B      

例子:#uname，#upass{ border:1px solid red}    

uname 和upass 都設定一個紅色的邊框

注意:要想操作一個元素就要用上面的選取器先選擇元素 再開始  設定css

3、過濾選取器

（1）基本過濾選取器

:first-letter  第一個字母

:first-line    第一行

（2）子項目過濾選取器

[1]  ul li:first-child    

ul的第一個li元素 （li必須是ul的第一個子項目）

[2]  ul li：nth-child（2）

選擇ul 第二個li元素（li必須是ul的第二個子項目）

[3]  ul li：nth-child（2n）/（2n+1）

選擇ul 的奇數或偶數個li元素

（3）偽類別選取器

   [1]  a:link {color:#FF0000;} / 未訪問的連結 / （只用於a標籤）

[2]  a:visited {color:#00FF00;} / 已訪問的連結 / （只用於a標籤）

[3]  a:hover {color:#FF00FF;}/* 滑鼠移動到連結上

[4]  a:active {color:#0000FF;} / 選定的連結 /

5、屬性選取器

1、選擇包含某一屬性的元素

a[title]{color:red;} 選擇包含title的a標籤

四、css的繼承

 在css中子項目會繼承父親元素的文字屬性

 但是a 不會繼承顏色屬性和文字裝飾屬性

 h不會繼承文字大小屬性和粗細屬性

五、盒子模型 1、 對盒子模型的理解

  [1]盒子模型就是一個有高度和寬度的矩形地區，所有html標籤都 是盒子模型

[1] 標準盒子模型 由 content+padding+border+margin組成

[2] 一個元素的實際寬度  

width（內容）+padding（內邊距）+border（邊框的寬度）

設定的width 只是設定了內容的寬度

[3] 邊框到自己的內容（文字&子項目）的距離可以用

    a、設定該元素的padding （會增加該元素的寬高，只用寫一次）

    b、子項目上面設定margin（不會增加父親元素的大小，所有的子項目都要設定margin

    c、 父親元素的padding+子項目的margin  

                                                            

2、margin寫法

margin 元素的邊框到別的元素（父親元素   兄弟元素）距離

（1）、margin簡寫

上下左右	margin：50px;
上下   左右	margin： 50px  100px
上   左右   下	margin：50px  100px  150px
上  右   下  左（順時針）	margin：50px  100px  150px 250px

 

（2）、指定方位

        margin-left

        margin-right

        margin-top

        margin-bottom

（3）、文本置中

當一個元素有設定寬度  maring-left  maring-right 為auto  

會自動在它的父親元素裡面水平置中(元素不能設定浮動 float)

例如：.container{ width:1000px; margin:0 auto;}

*區分text-align與margin:0 auto;

p{ text-align：center;}/*p 裡面的文字在p的範圍內置中*/

p{ width:250px; margin:0 auto;}/*p 元素寬度為250px  並且整個p元素在它的父親元素的裡面置中*/

 

css選取器、css繼承關係、css盒子模型