關於CSS的個人理解

2022-08-05 18:15:10 字數 2491 閱讀 5410

層疊樣式表,主要由屬性和屬性值(value)組成。(雖然html、css對**大小寫不敏感,但是屬性和屬性值對**大小寫是敏感的)

由瀏覽器將css和html分別轉化為文件物件,組合為dom文件物件模型,標記語言中的每個元素、屬性、文字片段都是dom樹中的一個節點,再由瀏覽器轉換顯示。

(1)內聯樣式

優先順序最高,但由於會造成**冗餘及**更新任務龐大,一般不採用。

this is my first css example

(2)內部樣式表

this is my first css example

(3)外部樣式表

單獨建立一個.css文件

易於**更新,減少**冗餘。作為新手,這一點也是必須要做到的。

this is my first css example

格式:“property : value”

屬性(property)與屬性值(value)單詞拼寫採用美式標準。

格式:“”

“;”的丟失最易導致錯誤。

格式:“selector ”

(1)層疊(cascade)

1)簡單選擇器

元素選擇器 p

類選擇器 .class

id選擇器 #id

通用選擇器 *

並且選擇器 p.class#id

並列選擇器 p,.class,#id

2)層次選擇器

後代選擇器 parent son,使用空格分割兩個選擇器

子代選擇器 parent>son,使用》分割兩個選擇器

下一個兄弟選擇器 selector+selector,使用+分割兩個選擇器

之後所有兄弟選擇器 selector~selector,使用~分割兩個選擇器

3)屬性選擇器(form表單多用)

selector[property]

selector[property=value]

selector[property*=value]

selector[property^=value]

selector[property$=value]

selector[property~=value]

4)偽類選擇器

子元素:first-child

:nth-child()

:first-of-type

狀態:hover

:active

(順序lvha:link visited hover active)

:focus

5)偽元素選擇器

::after 常用於清除浮動

::before

::first-letter

::first-line

6)特性值:

!important(改變了css方式,儘量繞開!)

放在一段style中(1000)

id(100)

.class或偽類或屬性選擇器(10)

元素選擇器或偽元素選擇器(1)

後者覆蓋前者(按照順序)

(2)繼承

這裡不多敘述…………

(1)正常佈局流

1)div行及元素

2)span塊級元素

(2)浮動佈局

float:left;

float:right;

clear:both;(清除左右浮動,該元素會換行)

*塊級元素一旦浮動之後:

1)脫離了當前文件流,對父級元素失去了支撐的作用,後面的非浮動元素會插入到浮動元素的下面。

2)浮動元素的寬高預設由其內容所決定,但是我們可以為其指定寬高。

3)當浮動元素無法承載子元素的時候,子元素會在下一行顯示。

4)浮動元素的margin無法合併。

*浮動引發的問題:

1)子元素浮動會失去對父元素的支撐

解決方案:在所有子元素的末尾新增一個空元素,該空元素須clear:both;

2)如果為子元素的寬度指定絕對值,並且子元素具有邊框,在縮放瀏覽器的時候會錯位

解決方案:

1.box-sizing:border-box;

2..right

(3)定位佈局

1)靜態定位

2)相對定位

相對於該元素原先位置進行移動

relative:

topright

bottom

left

3)絕對定位

相對於該元素最近的定位父元素位置進行移動

absolute:

topright

bottom

left

4)固定定位

fixed
(4)伸縮盒佈局

display:flex;

css浮動的理解

浮動是指的是css的屬性float。對於設定了浮動的元素,在頁面效果上可以通俗的理解為 這個元素漂起來了 在水上 ,位置發生變化,不按htm...

css樣式表的理解

全拼cascading style sheete 美化html網頁 1分為內聯樣式表 和html聯合顯示 內嵌樣式表 在單獨區域內嵌,必須在...

關於DIV CSS和XHTML CSS的理解

web標準是一系列標準的集合,並不是僅 div css 佈局就可以實現。以css網頁佈局只是標準的基礎之一。 div css 佈局只是一種通...