今天我們分享關於文字環繞float的內容。
在網頁布局中,經常會用到**混排。**混排,就是文字環繞進行布局。
在css中,使用浮動屬性float可以設定元素的周圍。
語法:
float:取值;
float屬性取值
屬性值說明
left
元素向左浮動
right
元素向右浮動
預設情況下,元素是不浮動的。上表中的屬性是常用的,另外還有「none」 和「inherit」不常用,也不需要學習的。
示例**:
瀏覽器預覽效果後,會發現段落文字p與在一行,在網頁左側,感覺像是文字環繞著。很長的一段文字,此處省略一萬字……
當float為right時,你會發現在網頁最右側,文字則在左側,感覺漂浮在右側。此處省略一萬字……
在上面的例子中,你發現文字與緊貼在一起,好像沒有距離,使用margin屬性就可以設定它們之間的距離了。
margin指的是外邊距,一般外邊距有四個方向,分別是上外邊距margin-top,右外邊距margin-right,下外邊距margin-bottom,左外邊距margin-left。
語法:
示例**:margin-top:畫素值;
margin-right:畫素值;
margin-bottom:畫素值;
margin-left:畫素值;
關於margin的更詳細內容,我們在以後的css盒子模型中繼續分享。此處省略一萬字……
本章總結:
width:畫素值;
height:畫素值;
簡潔寫法:border-width:畫素值;
border-style:屬性值;
border-color:顏色值;
border: 1px solid black;
text-align:屬性值;
left,左對齊,
center,居中對齊,
right,右對齊,
vertical-align:屬性值;
top,頂部對齊,
middel,中部對齊,
baseline,基線對齊,
bottom,底部對齊,
文字環繞效果:
float:取值;
left,向左浮動,
right,向右浮動。
css基礎入門文字 背景和邊框屬性
1 font size 10px 文字大小 2 color 文字顏色 3 font family 微軟雅黑 文字字型 4 line height 行高 1 background color 背景顏色 2 background repeat no repeat repeat x repeat y 背景...
字型顏色的使用 CSS入門基礎(006)
今天我們接著說字型樣式的內容。color字型顏色 語法 color 顏色值 顏色值可以是乙個關鍵字,也可以是乙個十六進製制的rgb值。關鍵字的顏色值,其實就是比較常用的顏色的一種列舉值,比如 black,黑色 white,白色 green,綠色 blue,藍色 red,紅色 gray,灰色 等等 示...
字型粗細的使用 CSS入門基礎(007)
今天我們接著分享字型的內容。在css中,我們使用font weight屬性來定義字型粗細。字型的粗細和字型的大小是不一樣的,粗細指的是字型的肥瘦,而大小指的是字型的高寬。語法 font weight 粗細值屬性取值有兩種,一種是關鍵字,一種是100 900之間的數值。關鍵字 font weight屬...