CSS系統學習二（基礎）

學習內容來自w3school

css 列表屬性允許你放置、改變列表項標誌，或者將影象作為列表項標誌。

css **屬性可以幫助您極大地改善**的外觀。

輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。css outline 屬性規定元素輪廓的樣式、顏色和寬度。可以按順序設定如下屬性：

css 框模型 (box model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。把 padding 和 margin 統一地稱為內邊距和外邊距。邊框內的空白是內邊距，邊框外的空白是外邊距

padding 屬性接受長度值或百分比值，但不允許使用負值。

按照上、右、下、左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值。

例子：margin:10px 5px 15px 20px;次序為上、右、下、左

margin:10px 5px 15px; 上、右/左外邊距、下外邊距是 15px

值複製

如果缺少左外邊距的值，則使用右外邊距的值。

如果缺少下外邊距的值，則使用上外邊距的值。

如果缺少右外邊距的值，則使用上外邊距的值。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即「塊框」。

與之相反，span 和 strong 等元素稱為「行內元素」，這是因為它們的內容顯示在行中，即「行內框」。由一行形成的水平框稱為行框（line box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。

display 屬性規定元素應該生成的框的型別。

css 有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。

css position 屬性

規定元素的定位型別。任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

position:absolute;
clip:rect(0px 50px 200px 0px)

設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。

設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。

相對定位是「相對於」元素在文件中的初始位置，而絕對定位是「相對於」最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼「相對於」最初的包含塊。（根據使用者**的不同，最初的包含塊可能是畫布或 html 元素。）

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。

由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素

clear 屬性規定元素的哪一側不允許其他浮動元素。

測試：10.如何改變某個元素的文字顏色？

正確答案：color:

20.如何產生帶有正方形專案的列表？

正確答案：list-style-type: square