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

2021-06-22 06:52:17 字數 1324 閱讀 7192

第一天 xhtml css基礎知識

1.整個盒模型在頁面中所佔的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成,而css樣式中width所定義的寬度僅僅是內容部分的寬度。

第二天 一列布局

1. css手冊中說:塊級元素的垂直相鄰外邊距會合併,而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合併。同樣地,浮動元素的外邊距也不會合併。允許指定負的外邊距值,不過使用時要小心(有關塊級元素和行內元素的概念在下一節講到)。

所以上下兩個div如果均指定margin:5px, 則兩個div相距5px,而不是10px,因為塊級元素的垂直相鄰外邊距會合併。

2. 內聯(display:inline;)元素不能設定寬高,因為內聯屬於行布局,其特性是在一行裡進行布局,所以不能被設定寬高,  解決方案參考:

第三天 二列和三列布局

1.在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素;且要指明乙個寬度,否則它會盡可能地窄;另外當可供浮動的空間小於浮動元素時,它會跑到下一行,直到擁有足夠放下它的空間。

2.ie 3畫素bug

2.1現象: 3畫素bug是ie6的乙個著名的bug,當浮動元素與非浮動元素相鄰時,這個3畫素的bug就會出現。即兩者之間會出現3畫素的間隔。

2.3建議: 當兩列固定寬度時,最好把#main也固定寬度且向右浮動,這樣就可以避免ie6的3畫素bug了。

第四天 縱向導航選單及二級彈出選單

1.position:relative; 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素"相對於"它的原始起點進行移動。(再一點,相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其他框)

2.position:absolute; 表示絕對定位,位置將依據瀏覽器左上角開始計算。 絕對定位使元素脫離文件流,因此不佔據空間。普通文件流中元素的布局就像絕對定位的元素不存在時一樣。(因為絕對定位的框與文件流無關,所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高,它顯示的越在上層。)

3.父容器使用相對定位,子元素使用絕對定位後,這樣子元素的位置不再相對於瀏覽器左上角,而是相對于父容器左上角

4.相對定位和絕對定位需要配合top、right、bottom、left使用來定位具體位置,這四個屬性只有在該元素使用定位後才生效,其它情況下無效。另外這四個屬性同時只能使用相鄰的兩個,不能即使用上又使用下,或即使用左,又使用右

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

1.css偽類可以改變鏈結的樣式 2.在 css 定義中,a hover 必須位於 a link 和 a visited 之後,這樣才能生效!在 css 定義中,a active 必須位於 a hover 之後,這樣才能生效!3.以下元素支援accesskey 屬性 以及。4,可以用css的disp...

十天學會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...