九、css設定浮動元素(float)
通過float屬性令元素向左或向右浮動。也就是說，令盒子及其內容浮動到文件（或者是上層盒子）的左邊或者右邊。
value:left、right、none。
html檔案如下：
study測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊study
css檔案如下：
#picture1
#picture2
1.clear屬性：
用於控制浮動元素的後繼元素的行為。
預設時，後繼元素將向上移動，以填補由於前面元素的浮動而空出的可用控制項。
value:left、right、both、none。
原則：如果乙個盒子的clear屬性被設定為both，那麼該盒子的上邊距將始終處於前面的浮動盒子的下 邊距之下。
html檔案如下:
study測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊studystudy測試文字資訊studystudy測試文字資訊
studystudy測試文字資訊study
css檔案如下:
#picture1
#picture2
.both
.left
.right
（9）CSS背景控制
前面已經提到，css將每個元素視為在單獨的框中進行處理，那麼我們可以通過一些屬性改變元素對應的框的背景，以改善網頁樣式。1 background color 為任何元素指定單一背景顏色 該屬性的值可以為顏色名 16進製制編碼或者rgb值。2 background image 將任一元素的背景設定為一...
9 CSS樣式引入
標籤上使用style屬性直接引入css樣式，即內聯樣式。style color red font size 24px 這是乙個段落p body 在頭部標籤內通過設定css樣式，即內部樣式。charset utf 8 網頁標題title pstyle head 這是一段文字p body html 新建...
前端網頁學習9（css盒子）
border 邊框 padding 內邊距 margin 外邊距 content 內容 盒子的長寬實際與內容的長寬相同。三大屬性 邊框顏色，邊框線型，邊框粗細 四個邊可分開設定。邊框定義可以簡寫，且三大屬性無順序要求。四個邊可分開設定。可共同設定意義如下 padding 10px 四個內邊距都是10...