文字環繞的使用 CSS入門基礎(017)

2021-10-12 09:57:49 字數 1714 閱讀 3991

今天我們分享關於文字環繞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屬...