html5 css3學習(五)之浮動

2021-10-21 02:25:48 字數 1395 閱讀 5903

通過display樣式可以修改元素的型別

可選值

lnline:將乙個元素作為內聯元素顯示

block:將乙個元素設為塊元素顯示

inline-block:將乙個元素轉換為行內塊元素,使元素既有行內元素特點又有塊元素特點,使其既能設定寬高,又不會獨佔一行

none:不顯示元素,並且元素不會在頁面中占有位置

visibility:hidden 隱藏的元素雖然不會在頁面中顯示,但依然會佔據位置,visible是顯示
子元素理論上最大等於父元素內容區大小,如果一旦子元素超過父元素大小,那麼超出的內容為溢位內容,溢位的內容會在外面顯示,可以通過overflow處理

可選值:

visible:不會處理溢位內容

hidden:溢位內容被隱藏

scroll:通過滾動條檢視溢位內容,不論內容是否溢位,均會新增水平垂直滾動條

auto:根據需求新增滾動條

文件流處在網頁最底層,表示的是乙個頁面的位置,我們所建立的元素預設都在文件流中

元素在文件流中的特點:

塊元素:

1、塊元素在文件流中獨佔一行,預設自上向下排列

2、塊元素在文件流中預設寬度是父元素100%

3、塊元素在文件流中預設高度是被子元素撐開

內聯元素:

1、內聯元素在文件流中只佔自身大小,會預設自左向右排列,超出一行,會自動換到下一行

2、在文件流中寬度和高度都被子元素撐開

當元素的高度和寬度的值為auto時,此時指定內邊距不會影響可見框大小,而是自動修改寬度,以適應內邊距

如果想讓元素脫離文件流,使其能夠水平排列,使用float來使元素浮動

可選值:

none:預設值,元素預設在文件流中排列

left:元素會立即脫離文件流,向頁面的左側浮動

right:元素會脫離文件流,向頁面右側浮動

當為元素設定浮動之後,元素會脫離文件流向上或向下浮動,它下面的元素會向上移動,元素浮動後遇到父元素的邊框或者其他浮動元素會停止。

如果浮動元素上面是乙個沒有浮動的塊元素,則浮動元素不會超過塊元素。並且浮動元素不會超過它上面的兄弟元素(在文件中的),最多與其一邊齊。

浮動的元素不會蓋住文字,文字會自動環繞在浮動元素周圍,所以我們可以通過浮動來設定文字環繞的效果

塊元素脫離文件流中,預設寬度和高度都被內容撐開

內聯元素脫離文件流之後會變成塊元素

html5 css3學習(七)之定位

開啟定位 position的值為非static 通過position屬性來設定元素的定位 可選值static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位當元素開啟了定位,可以通過left right botto...

html5 css3學習(十)之表單

表單的作用就是使用者提交資訊給伺服器 使用form標籤建立表單,標籤中的action屬性,屬性指向的是伺服器的位址 提交表單時會提交到action屬性對應的位址。使用input建立提交表項,並且必須指定name屬性以便獲取提交的表項 一些特殊的情況,我們的 只在某些特殊瀏覽器中執行,而不需要在其他瀏...

菜鳥學習HTML5 CSS3(一)

主要內容 1.新的文件型別宣告 dtd 2.新增的html5標籤 3.刪除的html標籤 4.重新定義的html標籤 一 新的文件型別宣告 dtd html 5的dtd宣告為 等也是正確的,因為html語法是不區分大小寫的。在編寫html5文件時,要求指定文件型別,以確保瀏覽器能在html5的標準模...