div css學習筆記(十天學會div css)

2021-06-29 12:03:20 字數 2998 閱讀 9775

1.css偽類可以改變鏈結的樣式

2.在 css 定義中,a:hover 必須位於 a:link 和 a:visited 之後,這樣才能生效!

在 css 定義中,a:active 必須位於 a:hover 之後,這樣才能生效!

3.以下元素支援accesskey 屬性:, , ,, , 以及。

4,。可以用css的display:inline將塊級元素改變為內聯元素,也可以用display:block將內聯元素改變為塊元素。

5.浮動元素會生成乙個塊級框,而不論它本身是何種元素;

且要指明乙個寬度,否則它會盡可能地窄;

另外當可供浮動的空間小於浮動元素時,它會跑到下一行,直到擁有足夠放下它的空間。

6.用標籤重定義方式,這樣可以很簡單地把全域性的樣式給統一起來

body,ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd

ulimg

這樣就很簡單把常用標籤的預設樣式給清除掉了,如果需要邊距的話再重新定義,也避免了各個瀏覽器對標籤預設樣式解析差異造成頁面顯示不一樣的問題

20:402014/9/26

7.目前ie6只支援a的偽類,其它標籤的偽類不支援,所以要想在ie6下也顯示正確,需要借助js來實現,我們定義乙個類.current (自己命名,需和js中相同)的屬性為display:block;然後當滑鼠劃過後,用js給當前li新增上這個樣式上,根據css的優先順序:指定的高於繼承的原則,就實現了ie6下的正確顯示。

21:122014/9/26

8.position:relative;這個元素"相對於"它的原始起點進行移動。(再一點,相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其他框)

21:302014/9/26

9.position:absolute;表示絕對定位,位置將依據瀏覽器左上角開始計算。因為絕對定位的框與文件流無關,所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高,它顯示的越在上層。)

21:332014/9/26

10.當浮動後設定左側外邊距時,最左側將顯示為雙倍邊距,比如設定為20,而在ie6下卻顯示40px,解決這個問題只需應用乙個樣式,display:inline.   17:192014/9/27

11.絕對定位的元素在相對定位的元素裡面。14:50 2014/9/28

12.想要把乙個盒子a放在另乙個盒子b裡,並且可以隨意地移動,那麼b要設為相對定位,a就要設為絕對定位,且a要配合left、top等來設定位置.  14:56 2014/9/28

15.文字垂直居中顯示: 在div中定義乙個行高與其高度相同即可。如:

16: 網頁居中顯示:需要設定兩個地方,乙個是body,乙個是外邊框div:

18.清楚浮動:clear:both;

19:三列欄的寫法,左右是窄欄,中間是主要內容

#main

.left

.right時會影響option,

25.width和height是指內容區域的寬高,增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。外邊距可以是負值

26.ie6的width和height是指內容、內邊距和邊框的和,css3中引入了乙個新的屬性:box-sizing,它具有「content-box」和「border-box」兩個值。注意:應盡量迴避這個問題,也就是不要給元素新增具有指定寬度的內邊距,而是嘗試將內邊距或外邊距新增到元素的父元素或子元素

27.外邊距疊加

28.關於行內框:在一行中水平排列,可以使用水平內邊距、邊框、和外邊框調整它們的水平間距。但是垂直內邊距、邊框和外邊距不影響行內框的高度。在行內框上顯示地設定高度和寬度也不會影響。修改行內框尺寸的唯一方法是修改行高或者水平邊框、內邊距或外邊距。

由一行形成的水平框稱為行框,行框的高度總是足以容納它包含的所有行內框。但是設定行高可以增加這個框的高度。

display:inline-block,讓元素像行內元素一樣水平依次排列。但是框的內容仍然符合塊級框的行為。

29.將一些文字新增到乙個塊級元素的開頭時,即使沒有把這些文字定義為塊級元素,它也會被當成塊級元素對待:

sometext

somemore text

這種框成為匿名框

30.相對定位和絕對定位

絕對定位與文件流無關

尺寸的任何改變都會導致絕對定位的框產生重疊

31.ie6不支援固定定位

相對定位和絕對定位都會覆蓋其他元素,用z-index來控制框的疊放順序。

32.浮動框不在文件的普通流中,所以文件的普通流中的塊級框表現得就像浮動框不存在一樣。

清理元素

33.overflow 、css生成內容或js對浮動元素進行清理:

34.背景影象

h1{padding-left:30px;

background-image:url(bullet.gif);

background-repeat:no-repeat;

background-position:left center;

使用百分比定位影象時是將影象上距離左上角的20%的點點位到父元素上距離左上角的20%的位置

h1{padding-left:30px;

background-image:url(bullet.gif);

background-repeat:no-repeat;

background-position:0 50%;

35.圓角邊框 內容

.box{

width:418px;

background:#effce7url(/img/bottom.gif) no-repeat left bottom;

padding-bottom: 1px;

.box h2{

background:url(/img/top.gif)no-repeat left top;

margin-top:0;

padding:20px 20px 0 20px;

.box p{

padding:0 20px;

《十天學會web標準(div css)》學習筆記

第一天 xhtml css基礎知識 1.整個盒模型在頁面中所佔的寬度是由左邊界 左邊框 左填充 內容 右填充 右邊框 右邊界組成,而css樣式中width所定義的寬度僅僅是內容部分的寬度。第二天 一列布局 1.css手冊中說 塊級元素的垂直相鄰外邊距會合併,而行內元素實際上不佔上下外邊距。行內元素的...

十天學會PHP

username password 處理檔案是這樣 require once conn.php session start username post username password post password exec select from admin where username user...

十天學會php之第十天

學習目的 學會用php上傳檔案和發郵件 上傳檔案表單必須加上 enctype multipart form data 和 下面看一下 dest dir uploads 設定上傳目錄 dest dest dir.date ymd f name 我這裡設定檔名為日期加上檔名避免重複 r move upl...