第十章 理解CSS定位於DIV布局

2022-08-10 14:30:14 字數 1973 閱讀 3747

div於span的區別:div是塊級元素。span是行級元素,在它的前後不會換行。span標記不能包含div標記。

盒子模型:content內容 padding間隙 border邊框margin間隔。-top,-right,-bootom,-left.

盒子模型的實際寬度:content+padding+border+margin

注意:在瀏覽器中 width(height)的值都是width(height)+padding

border的主要屬性:color,width,style

注意:在特定情況下給元素設定background-color時,ie作用域content+border,firefox則是content+padding+border

如果同時設定四個方位的值時他們的設定順序是順時針的,padding:10px 20px 30px 40px;即上右下左

注意 rgb 無光則黑,強光則白

margin 表示元素與元素之間的距離

padding 用於控制content和border的距離

想想盒子模型為展覽館的一幅幅畫

content表示花本身

padding表示畫與框的留白

border表示畫框

margin 畫框與畫框的距離

行內元素的margin=兩元素margin之和

塊級元素的margin=兩元素中較大的值。

父子div中,字塊margin將以父塊content為參考

元素的定位float position z-index

float:left right 預設值none。表示向左或向右或不浮動。當設定了元素向左右浮動時,元素會向其父元素的左右靠緊。

css框模型(box model)規定了元素框處理元素內容、內邊距邊框外邊距的方式。

內邊距、邊框和外邊距都是可選的,預設值是零。但是,許多元素將由使用者**樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行,也可以使用通用選擇器對所有元素進行設定:

1 *
在 css 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。

假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素,就需要將內容的寬度設定為 70 畫素,請看下圖:

1

#box

一旦為頁面設定了恰當的 dtd,大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範,元素內容佔據的空間是由 width 屬性設定的,而內容周圍的 padding 和 border 值是另外計算的。不幸的是,ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度,而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是,不要給元素新增具有指定寬度的內邊距,而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。

我們把 padding 和 margin 統一地稱為內邊距和外邊距。邊框內的空白是內邊距,邊框外的空白是外邊距,很容易記吧:)

第十章 浮動和定位

第十章 浮動和定位 1.浮動 float 值 left right none inherit 初始值 none 繼承性 無 應用於 所有元素 說明 1.浮動元素會從文件流中刪除,但依然影響頁面布局。2.乙個元素浮動後,周圍元素會 環繞 該元素,如img。3.浮動元素的外邊距不會與周圍元素的外邊距發生...

第十章 python的css

一種快速定位元素的方法 beautifulsoup scrapy 舉例 解釋 選擇所有元素.class 舉例 intro 解釋 選擇所有class intro 的元素 id 舉例 firstname 解釋 選擇所有id firstname 的元素element 舉例 p 解釋 選擇所有元素 not ...

第十章 函式

使用def關鍵字 定義個數可變的位置形參 定義個數可變的關鍵字形參 定義預設值引數 定義個數可變的位置形參 deffun1 args 結果為乙個元組 print args fun1 10,20,30 10,20,30 定義個數可變的關鍵字形參 deffun2 args 結果為乙個字典 print a...