CSS學習筆記

1.選擇器

作用：選擇頁面的某一個或者某一類元素

1.1基本選擇器

1.1.1 标簽選擇器：選擇一類标簽标簽{}

例如：div{代碼塊}

1.1.2 類選擇器：選擇所有class屬性的标簽，跨标簽 .類名{}

例如：.name{代碼塊}

1.1.3 id選擇器：全局唯一 #id名{}

例如：#name{代碼塊}

優先級：id>class>标簽

1.2層次選擇器

1.2.1 後代選擇器：在某個元素的後面爺爺，爸爸你

body p{代碼塊}

1.2.2 子選擇器：一代，兒子

body>p{代碼塊}

1.2.3 相鄰兄弟選擇器：同輩（隻有一個，相鄰（向下相鄰））

.active+p{代碼塊}

1.2.4 通用選擇器：目前選中元素向下的所有兄弟元素

.active~p{代碼塊}

1.3結構僞類選擇器

選擇 ul 的第一個子元素

ul li:first-child{代碼塊}

選擇 ul 的最後一個子元素

ul li:last-child{代碼塊}

選擇目前p元素的父級元素，選中父級元素的第一個，并且是目前元素才生效

p:nth-child(2){代碼塊}

選中父級元素，下的p元素的第二個，類型。

p:nth-of-type(1){代碼塊}

1.4屬性選擇器（常用）

id+class結合

=絕對等于

*=包含這個元素

^=這個開頭

$=以這個結尾

存在id的元素

a[id]{代碼塊}

id=first的元素

a[id=first]{代碼塊}

class中有links的元素

a[class*="links"]{代碼塊}

選中href中以http開頭的元素

a[href^=http]{代碼塊}

選中以$結尾的元素

a[href $=jpg]{代碼塊}

2.浮動

2.1标準文檔流

塊級元素：獨占一行

h1~h6 p div 清單.....

行内元素：不獨占一行

span a img strong....

行内元素可以被包含在塊級元素中，反之不行

2.2display

block 塊元素

inline 行内元素

inline-block 是塊元素但是可以内聯在一行

none

div{代碼塊；

display:none}

display:block}

display:inline}

display:inline-block }

這個也是一種實作行内元素排列的方式，但是我們很多時候，都是用float

2.3float

1.左右浮動 float

div{代碼塊;

float:left;}

float:right;}

2.4父級邊框塌陷的問題

解決方案

1.增加父級元素的高度

.father{

height:800px;

}

2.增加一個空的div标簽，清除浮動

.clear{

clear:both;

margin:0;

padding:0;

3.overflow

在父級元素中增加一個overflow：hidden;

4.父類添加一個僞類：after

.after:after{

content:" "；

display:block;

小結：

1.浮動元素後面增加空div

簡單，代碼中盡量避免空div

2.設定父級元素的高度

簡單，元素假設有了固定的高度，就會被限制

overflow

簡單，下拉的一些場景避免使用
父類添加一個僞類：after(推薦)

寫法稍微複雜一點

2.5對比

display:方向不可以控制

float:浮動起來的話會脫離标準文檔流，是以要解決父級邊框塌陷問題。

3.定位

3.1相對定位

position:relative;

top:10px；...

相當于原來的位置，進行指定的位移，它還是在标準文檔流中，原來的位置會被保留

3.2絕對定位

position:absolute;

定位：基于某某定位，上下左右

1.沒有父級元素的前提下，相當于浏覽器定位

2.假設父級元素存在定位，我們通常會相當于父級元素進行偏移

3.在父級元素範圍内活動

相當于父級元素或者浏覽器的位置，進行指定的位移，它還是不在标準文檔流中，原來的位置不會被保留

3.3z-index及透明度

z-index:預設是0,最高無限。

圖層低的被圖層高的覆寫。

div{

z-index：0；

透明度：opacity:0.5;

3.4固定定位 fixed

position:fixed;

CSS學習筆記