CSS 盒子 顯示模式轉換 選擇器

2021-09-28 23:38:41 字數 1256 閱讀 8907

css盒子三屬性:width  寬度

height   高度

background-color  顏色

顯示模式:塊級顯示模式:設定寬高起作用,自己單獨佔一行,在不設定寬度的情況下,自身寬度和父元素寬度相同

塊元素:div  h1-h6  ul  ol  li  dl  dt  dd  p  hr  form

行內顯示模式:設定寬高不起作用,寬高是靠內容撐開的,一行可以有多個 。

行內元素:span  a  b  strong  i  em  u  ins  s  del

行內塊顯示模式:設定寬高起作用,一行可以有多個

行內塊元素:img  表單元素(除form之外)

顯示模式轉換:轉換成行內塊  display:inline-block;

轉換成塊級:display:block;

標籤選擇器:

標籤名類選擇器:

定義類名稱:以點開頭+類名稱

呼叫類名:用標籤屬性class等於類名稱。

命名規範:不能用數字開頭,可以是字母+數字+下劃線+中劃線。還可以用駝峰命名法,多個單詞組成的類名稱,第乙個單詞所有都小寫,從第二個單詞開始,所有單詞首字母都大寫。

id選擇器:

id名稱是唯一的,不能重複呼叫

定義id名稱:用#開頭+id名稱

呼叫id名稱:用標籤的id屬性定義id名稱

命名規範和類名稱一樣

類選擇器相對於人的姓名,可以重複呼叫  ; id選擇器相當於人的身份證號,是唯一的,不可以重複呼叫

復合選擇器:後代選擇器

後代選擇器:將基礎選擇器結合使用

(選擇器  選擇器)空格表示後代(子子孫孫)

第一種:內嵌式,書寫方便,將css**寫在html檔案中,**相對分離,耦合度相對較低,在講解知識點和開發初期時,可以使用此方式。

第二種:行內式,書寫比內嵌式還方便,將css**寫在htmk標籤之中,**耦合性很高,維護性較差,會造成**冗餘,在特定的場景使用。

第三種:外鏈式,將css**寫在css檔案中,和html檔案絕對分離,**耦合度極低,**維護性很強,在專案開發中和工作中,大部分使用此方式。

語法:

css復合選擇器,標籤顯示模式

理解 理解css復合選擇器分別的應用場景 應用 1.使用後代選擇器給元素新增樣式 2.使用並集選擇器給元素新增樣式 3.使用偽類選擇器 目的 是為了可以選擇更準確更精細的目標元素標籤 概念 後代選擇器又稱為包含選擇器 作用 用來選擇元素組的子孫後代 語法 class h3 作用 子元素選擇器只能選擇...

前端CSS選擇器 盒子 定位

1.2 層次選擇器 1.3 偽類選擇器 1.4 偽元素選擇器 1.5 屬性選擇器 2.盒子 3.定位 選擇器是css3中乙個重要內容,使用選擇器可以大幅度提高開發人員書寫和修改樣式表的效率,減少冗雜的 便於開發。選擇器包括基礎選擇器,層次選擇器,偽類選擇器,偽元素選擇器,屬性選擇器。如果所有的元素都...

CSS復合選擇器與標籤顯示模式

宣告 本人的所有部落格皆為個人筆記,作為個人知識索引使用,因此在敘述上存在邏輯不通順 跨度大等問題,希望理解。分享出來僅供大家學習翻閱,若有錯誤希望指出,感謝!子元素選擇器只能選擇作為某元素 子元素 親兒子,不包含孫子 重孫子之類 的元素。其寫法就是把父級標籤寫在前面,子級標籤寫在後面,中間跟乙個 ...