英文 | https://javascript.plainenglish.io/4-key-css-properties-explained-in-4-minutes-9567d1b5af86
翻譯 | 小愛
1、Display
指定元素的顯示行為。
它需要許多不同的值，但坦率地說，在大多數情況下你将隻使用 4 個值。
- block：CSS 中的塊級元素，它占用盡可能多的空間，但它們不能放置在同一水準線上。開發人員主要使用塊級元素來簡化布局過程，因為他們能夠改變他們選擇的元素的寬度和高度。
- inline：這是預設值，如果沒有指定任何其他顯示值，元素可以并排放置在與内聯元素相同的水準線上。像<strong>、<em>、<a> 等 HTML 标簽就是内聯元素的好例子，我們無法控制它們的寬度和高度。
- inline-block：你可以将其視為塊元素和内聯元素的組合值，你可以在其中設定它們的寬度和高度，并且元素可以毫無問題地出現在同一水準線上。
- none：使用此值可以從網頁中隐藏元素。您可以在下拉菜單中使用它，當你将滑鼠懸停在導航菜單上時會顯示附加資訊。
2、Float
float 屬性用于定位和格式化内容。
簡單來說，float 屬性管理HTML内容在父容器一側邊緣的位置。
例如，
Float 屬性接受多個屬性，但你将使用其中的 3 個，分别是 right、left 和 none。
3、Background
為元素添加背景效果。
它隻是指 HTML 元素的背景，大多數時候開發人員在多個背景屬性之間感到困惑。但是，如果你對如何在 CSS 中選擇背景有一個清晰的解釋，那麼使用 HTML 元素會容易得多。
你需要了解 4 種主要類型的背景屬性：
background-color：應用元素的背景顔色，并采用十六進制或 RGB 值。
background-image：将圖像應用為背景，并使用路徑 URI 或 URL 來通路圖像資源。
background-repeat：你可以使用這些值，如果寬度超過背景大小，則使應用的背景重複自身。
background-position：可以控制背景相對于HTML元素的位置，這裡需要兩個值，X & Y。X是離左邊的偏移值，Y是離頂部的偏移值。
4、Position
此屬性指定用于元素的定位方法的類型。
如果你想掌握一些布局技巧，這個 CSS 屬性是非常重要的，因為大多數時候開發人員會在 CSS 中定位元素，使用正确的定位值可以輕松完成工作。
大多數情況下，你将使用以下 3 個值：
絕對：絕對定位的元素查找本身具有相對、絕對或固定位置的父後代元素。
相對：具有相對位置的元素将相對于其正常位置進行定位。
固定：具有固定位置的元素相對于視口定位，但是，頂部、底部、左側和右側屬性用于定位元素。
例如;
當子元素被定位為absolute時，我們可以通過top、left、bottom值來控制它在整個body元素中的位置。你可以将其稱為獨立子元素，其中 body 元素是父元素。
但是，當我們為父元素（藍色容器）提供相對位置時，所有具有絕對位置的元素都将落入新的父元素之下。
你可以觀察到，當我們将相對位置值傳遞給父元素時，子元素的高度現在是相對于父元素的。
本文完~
學習更多技能
請點選下方公衆号