1. 程式人生 > >CSS定位與CSS屬性選擇器

CSS定位與CSS屬性選擇器

從上週的周任務來看,自己的CSS還是學習的不夠紮實,所以本週的主要任務是學習CSS定位和CSS屬性選擇器。CSS 有三種基本的定位機制:普通流、浮動和絕對定位。一般如果不給元指定特定的地方,元素一般會按照普通流來排列,如果設定了特定的地方則按照下面說法排列。


1.絕對定位:使用left,right,top, bottom四種屬性相對於其最接近的一個最有定位設定的父級物件進行絕對定位,如果父級元素沒有設定位屬性,則相對於body左上角來定位

2.相對定位:使用left,right,top,bottom四種屬性在正常文件流中偏移自身位置

3.浮動:當時用浮動命令時,被浮動物件就會向左或者向右移動直到遇到邊框,在元素浮動後會對下一個元素造成影響,可以用clear來清楚浮動對下一個元素造成的影響

在絕對定位中,如果有元素的重疊則可用z-index來排列先後順序。

CSS屬性選擇器:屬性選擇器可以根據元素的屬性及屬性值來選擇元素。簡單屬性選擇 如果希望選擇有某個屬性的元素,而不論屬性值是什麼,可以使用簡單屬性來進行選擇,以前學習選擇器一直以為只有id和class,現在具體的看了屬性選擇器內容,直到id和class並不是唯一的設定樣式


這個屬性選擇中並沒有明確的標明所選的名稱,但是還是可以修改樣式,感覺就像約等於一樣,將含有所給屬性的類似元素全部選中進行修改,這是之前沒有看到過的,感覺這樣寫可以省掉很多程式碼。

還有就是做了一個關於padding margin的測試


第二個用的padding屬性,將原來規定的框架加寬了,但是margin屬性是將元素向右移動