浮動及定位 字型

2021-10-21 13:54:04 字數 1264 閱讀 8303

float 浮動的相關屬性

對元素(父容器)脫離文件流,對內容半脫離文件流

display 屬性。

該屬性規定了元素應該生成的框的型別。常用屬性:

預設值:inline,此時元素被顯示為行內元素。

block 此時元素被顯示為塊級元素。

inline-block 此時元素被顯示為行內塊元素。

none 此時元素不會被顯示。

float 屬性。

該屬性定義了元素往哪個方向浮動。不論浮動元素是什麼型別的元素,都會生成乙個塊級框,變成行內塊級元素。常用屬性:

none 無浮動。

left 左浮動。

right 右浮動。

inherit 從父元素繼承浮動。

visibility 屬性。

該屬性規定元素是否可見。常用屬性:

預設值:visible 規定元素可見。

hidden 規定元素不可見。

clear 屬性。

規定指定元素的哪一側不允許其他浮動元素。常用屬性:

預設值:none 允許兩側出現浮動元素。

left 在左側不允許浮動元素。

right 在右側不允許浮動元素。

both 在兩側不允許浮動元素。

字型屬性

font 簡寫屬性,能夠在該屬性中宣告所有的字型屬性。如字型樣式、字型粗細、字型大小等。

*font-size 定義元素中的字型大小。

*font-family 定義元素中的字型系列。

font-style 定義元素中的字型樣式。

*font-weight 定義元素中的字型粗細。

font-variant 設定小型的大寫字母字型顯示文字。

背景屬性

background 簡寫屬性,能夠在該屬性中宣告所有的背景屬性。如背景顏色、背景等。

*background-color 設定元素中的背景顏色。

*background-image 設定元素中的背景。

*background-repeat 規定元素是否及如何重複背景。

*background-position 定義元素中背景的定位。

*background-size 定義元素中背景的大小。

background: url("") no-repeat -2px -6px;//背景圖向左移動2px,向上移動6px

清除浮動及定位

版心 可視區 是指網頁中主體內容所在的區域。一般在瀏覽器視窗中水平居中顯示,常見的寬度值為960px 980px 1000px 1200px等。清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。1 額外標籤法 2 父級新增overflow屬性方法 3 使用after偽元素清除浮動 4...

浮動 定位及顯示屬性

1 最初的思想 文字繞排。2 延伸 實現多欄布局。3 清除浮動的方法 1 給父元素設定overflow hidden 2 同時浮動父元素 3 對要清除浮動的元素增加clear both樣式 4 增加新的元素,給該元素設定clear屬性來清除浮動 5 對於浮動的元素增加after偽元素 div1 af...

CSS定位 浮動定位

css定位機制 浮動定位 float屬性 進行浮動定位 left,right clear屬性 清除浮動 left,right,both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...