CSS選擇器 樣式 盒模型

2022-08-21 08:42:10 字數 3281 閱讀 6128

#


1.*（通配選擇器）：html,body以及body下用於顯示的標籤


#html和body顏色會被改變，但是div標籤不會發生改變，由於不同的選擇器具有優先順序


#語法：* 


#2.標籤名（標籤選擇器）：該標籤對應的所有該標籤


#在實際開發中，盡量少用或不用標籤名來作為選擇器，標籤名如果作為選擇器的話一般在該標籤為最內層（語義|功能）標籤


#語法：標籤名 


#3. .類名（class選擇器）：對應該類名的所有標籤


#語法：. 


#4. #id名（id選擇器）：對應該id名的所有標籤


#語法：#id名 


#在乙個html檔案中,通常id唯一



#


控制範圍越精確，優先順序越高，所設定的樣式就會覆蓋優先順序低的相同屬性樣式，不同的屬性會疊加。


#優先順序順序： 統配 < 標籤 < class < id < 行間式 < !important


#內聯式和外聯式，相同屬性採用下者覆蓋上者，不同屬性疊加。


#注：!important 書寫在屬性值後;前



#


1.長度


單位：px mm cm em rem vw vh in


#2.顏色


#三種設定方式：


#1.顏色單詞


#2.#000000 ~ ffffff （#abc == #aabbcc）


#3.rgb(0~255,0~255,0~255) | rgba(0~255,0~255,0~255,0~1)



#


三種方式：


#1.display:inline;


#同行顯示，只支援部分css樣式（不支援寬高），寬高有文字內容撐開


#2.display:block;


#異行顯示，支援所有css樣式，設定了寬高就採用設定的值，寬高也有預設的特性


#3.display:inline-block;


#同行顯示，支援所有的css樣式，設定了寬高就採用設定的值


#標籤的顯示方式就是用display屬性控制



#


1.單標籤（主功能）


#br|hr|img|meta|link，功能具體，不需要內容，設定為單標籤，單標籤結束符在標籤尾部，可以省略


#2.雙標籤（主內容）


#h1|p|span|div，具有子標籤，包含內容，設定為雙標籤，雙標籤首尾分離



#


因為頁面架構就是由標籤一層層巢狀關係形成


#巢狀關係的規則：


#1.inline-block型別不建議巢狀任意標籤，可以巢狀標籤，但是inline-block布局會受內部的文字影響（文字底端對齊），所以如果巢狀其他型別標籤時，一定要結合vertical-align屬性操作，左右還有乙個空格間距。因此系統的inline-block都設計成單標籤


#vertical-align屬性


#baseline:文字底端對齊（預設）


#top:標籤頂端對齊


#middle:標籤中線對齊


#bottom:標籤底部對齊


#2.inline型別只巢狀inline型別的標籤，inline巢狀block和inline-block,不起任何作用，只能巢狀inline


#3.block型別可以巢狀任意型別標籤


#注：hn和p只建議巢狀inline型別標籤


#問題：block如何同行顯示？？



#


盒模型組成部分：


#1.margin:外邊距，控制盒子的位置（布局），通過左（margin-left）和上（margin-top）控制自身位置，通過右（margin-right）和下（margin-bottom）影響兄弟盒子位置（劃區域）


#2.border:邊框，樣式/寬度/顏色 （solid實線 dashed虛線 dotted點狀線）


#3.padding:內邊距，從顯示角度控制文字的顯示區域


#4.content:內容區域，由寬*高組成#注：


#1.margin和padding:起始為上，順時針依次賦值，不足邊取對邊


#2.要做到文字內移，設定padding，如果又想顯示區域不變，相應減少content



#


1.上下兩個盒子的margin-bottom和margin-top功能相同，同時出現，取大值


#2.第乙個有顯示區域的子級會和父級聯動（margin-top重疊），取大值，我們可以通過設定父級的border-top屬性或padding-top屬性，將其分開，就不會聯動了


#3.block設定寬高，一定採用設定的寬高


#4.block預設寬高：


# 1.沒有設定寬，寬自適應父級的寬（子級的border+padding+width=父級的width）


# 2.沒有設定高，高由內容撐開



class="


d1">1


class="


d2">2


class="


d3">3


class="


d4">4


class="


d5">5


class="


d6">6


class="


d7">7


class="


b1">


class="


b2">


class="


s1">1


class="


s2">2


class="


sup">


class="


sub1


">


class="


sub2


">
view code

'''


block:


預設寬高


1.沒有設定寬, 寬自適應父級的寬(子級的border+padding+width = 父級的width)


2.沒有設定高, 高由內容撐開


設定了寬高


一定採用設定的寬高


顯示寬高


border+padding+content


自身布局


margin-top | margin-left


兄弟布局


margin-bottom | margin-right


父級水平居中


margin: 0 auto;


與inline相關的盒子


vertical-align


'''

CSS樣式選擇器

1.css 選擇器 1 標記選擇器 選擇器 用來指定確定標記的樣式 如 類別選擇器 class 類別名稱 如 對應的 class 選擇器 id選擇器 id id選擇器 如 對應的 id選擇器1id 選擇器2 2.集體宣告 對應的 集體宣告 h4集體宣告 h5集體宣告 p1集體宣告 p2集體宣告 p3...

CSS樣式選擇器

樣式選擇器 每一條css樣式宣告 定義 由兩部分組成，形式如下 選擇器類選擇器 以英文圓點開頭，不可以使用數字或中文起名 使用方法 1.使用class 類選擇器名 為標籤設定乙個類，如下 膽小如鼠 2.設定類選擇器css樣式，如下 stress id選擇器 id選擇器類似於類選擇器 1.為標籤設定i...

CSS樣式 選擇器

css的選擇器 1 標籤選擇器 div p a input span h1 divp我是段落 2 類選擇器 class 類選擇器樣式 class stylediv我是div容器 我是div中的段落 3 id選擇器 id id選擇器樣式 id stylep我是div容器 4 並列選擇器 並列選擇器樣式...