1. 程式人生 > >css樣式總結體會

css樣式總結體會

hive 網站 它的 布局 arc 清除浮動 電腦 scroll right

1、內聯及行內元素設margin-top,padding-top沒有效果,因為他們是基於基線對齊的。(需要自己多嘗試下)

background-attachmentfixed 屬性可以讓背景圖在瀏覽器窗口始終固定不變(就好像脫離了該背景圖的標簽),下面的內容滾動上去可以把它覆蓋。

2、有時間研究一下3D的各種動態效果

3關於內層DIV設置margin-top不起作用的解決方案(百度)

4、解決css3遮罩層擋住下面元素事件的方法:簡單解決 pointer-events: none;

5、網頁布局中側邊欄的一些與版心沒有聯系的的模塊一律用定位,不然在網頁變小(小屏幕電腦上)的時候側邊欄的元素會影響版心內容布局的。標準文檔流就不用說了,浮動會有字圍效應的。

6、如果一張大的banner圖(內有文字),在瀏覽器變小的時候回使文字缺少一部分的話,可以把文字和背景分成兩張圖片處理。

7vertical-align: top;屬性是設置在子元素上的,也就是需要東西的的行內元素本身。

8、css3瀏覽器兼容問題就考慮5類:-webkit-;-moz-;-ms;-o-;還有一個是沒有私有前綴的。

9transform-origin:屬性設置原點,是相對於該標簽的左上角哪個點。默認的原點是圖片中心點,也就是transform-origin50% 50% 0

10border-collapse:屬性可以設置表格邊框是否被合並為一個單一的邊框,還是象在標準的 HTML 中那樣分開顯示

11、如果文本的盒子設了彈性盒子模型,文字左右居中,text-align: center;屬性會失效,還得單獨測試一下。

12、css選擇器最好是後代選擇器和類名選擇器的組合,因為如果頁面出現改動,子代,後臺和標簽選擇器組合的耦合性太大了,如果添加模塊,模塊正好是他的子代和或後代,那樣式就會很亂的(因為標簽名同類的太多了)。有一些ul下面的li是同樣的樣式的,這種可以給ul進行類選擇器,後面的li用子代選擇器比較好(用後代選擇器的話,如果li後面嵌套了一個ul>li標簽的話還是會出現耦合的)。

13、css組合選擇器常用:後代、子代、相鄰兄弟(下一個兄弟選擇器)、

普通相鄰兄弟(下面的所有兄弟選擇器)[以上選擇器在ie6以上都支持]

14、頁面布局的時候,模塊之間的左右間距不要嚴格按照設計圖把值定死了,用戶的瀏覽器是不同一的,有大有小的。所以這些間距就是靈活變動適應不同瀏覽器的一個方案。

15、父級元素的寬度太大的情況下,使用定位最好不要使用右邊參考點,不然瀏覽器寬度變小的時候,整個結構就會亂掉。固定就另當別論了。

16、display:inline-block;和浮動的效果好像,因為脫離標準流的元素會隱式的轉化為inline-block類型。但有和顯示的display:inline-block;又有不同,顯示表示的時候就不得不考慮元素的基線對其問題。

17、給元素設高度100%,往上推的父級元素的高度必須是可以確定,不然計算機沒法計算的。如父元素的高度是通清除浮動撐出來的高度,給子元素設100%是無效的,

18、彈性盒子模型,盒子的之間的距離一定的相同的,不過他們之間的具體距離可以通過margin或pading值來改變的。

19、內聯元素(包括行內塊)默認都是基線對齊的,圖片的基線就是圖片的底部。父級元素默認 底邊上一點的距離是基線對齊的地方(這個也只是對內聯元素的子代有意義,塊級元素沒有任何影響)。內聯元素一定是先按照內聯元素對齊規則對齊後,再從上到下排版的。當文字的,圖片的 vertical-align不為基線時或父元素的高度比圖片大的多,則父元素默認 底邊上一點的距離是基線就根本沒有意義了,和沒有一樣。即父級元素默認 底邊上一點的距離是基線只是在內聯子元素是以基線對齊的時候會有效果。

也可以另外一種理解(個人自己的想法,覺的這種解釋更合理。),內聯元素始終是基線對齊的,內聯元素高度最高的那個是決定基線所在的位置的,通過vertical-align可以設置它的基線位置,而其他的內聯元素的vertical-align則是聲明它們要和基準元素的關系,是和基準的頭部對齊 還是基線對齊、又或者是底部對齊。

註意:vertical-align:bottom用在最高的內聯元素則說明是與父元素以底邊對齊的,與基線無關了。

20、父元素高度不是定值時,子元素高度用百分比是沒有效果的。比如,父元素高度是被子元素撐高的,也包括清除浮動撐出來的高度。但是如果是定位元素的話,父元素高度不定,子元素也是單位的話,高度100%確是可以獲得的。

21、banner圖片用img標簽和作為背景圖片,兩者各有優缺點。img只設寬度,圖片會等比例縮放,這樣的話高度就不能固定了;而作為背景,圖片可以始終居中,圖片大小不對改變,但是容器的寬度不夠,會把圖片兩邊給切掉的。如果banner圖的突出看點是在之間部分的話用這種方法還是很不錯的。

22、絕對定位元素,通過設置top、bottom可以決定他的高度;left、right可以決定他的寬度,這樣不用設寬度和高度就可以設置元素的寬度和高度了。iscroll插件就是用的這種方法。

23、標簽內的第一個標簽設margin-top和最後一個標簽設margin-bottom是沒有效果的,他們都會作用到父元素上的。

24、body最好給他設一個最小寬度,因為 有的的時候banner區域不一定在版心區域,可能是通欄。如果沒設這個屬性的話,當縮小的版心後,有版心的也許就不會變化了(下面出現橫向滾動條),但是通欄的還會不斷的縮小。

25、當網站中所有的網頁的頭部是通過php的includ調用的,樣式表也是同一個,如果某一頁的頭部需要有一點不同的樣式的話,可以直接用內聯式的方法在該頁中寫樣式。

26、css3的彈性盒子的高度可以被子元素撐開

css樣式總結體會