通過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的標準模...