CSS技巧 | 前端開發需要知道的 10 個 CSS 技巧

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"個人覺得 CSS 是每個前端開發人員都必須掌握的基礎，以完成相應的交互和終端設備的響應。在項目開發中，有些容易被忽略的小問題帶來項目後期的膠水代碼。本文總結一些項目開發中CSS的10個小技巧。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1.使用相對單位","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通常我們在項目開發中，使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"px","attrs":{}}],"attrs":{}},{"type":"text","text":"作爲尺寸的單位，而不是使用相對單位，如：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"rem","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"em","attrs":{}}],"attrs":{}},{"type":"text","text":"等。在萬物互聯的時代，最好的方式是相對單位","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"rem","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vh","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vw","attrs":{}}],"attrs":{}},{"type":"text","text":"等現代 CSS 佈局（如 flexbox 和 grid）方式，最大限度的支持各種終端設備。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"絕對單位","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"px","attrs":{}}],"attrs":{}},{"type":"text","text":" ：是一個絕對單位，主要是因爲它是固定的，不會根據任何其他元素的測量而改變。","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"相對單位","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"vw（viewpoint width）","attrs":{}}],"attrs":{}},{"type":"text","text":"：相對於視口的寬度","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"vh（viewpoint height）","attrs":{}}],"attrs":{}},{"type":"text","text":"：相對於視口的高度","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"rem（font size of the root element）","attrs":{}}],"attrs":{}},{"type":"text","text":"：相對於根 ( ) 元素 (默認字體大小通常爲 16px )","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"em（font size of the element）","attrs":{}}],"attrs":{}},{"type":"text","text":"：相對於父元素","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"%","attrs":{}}],"attrs":{}},{"type":"text","text":" ：相對於父元素","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* 不提倡 */\n.wrap {\n font-size: 14px;\n margin: 10px;\n line-height: 24px;\n}\n/* 建議 */\n.wrap {\n font-size: 1.2rem;\n margin: 0.5rem;\n line-height: 1.6em;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2. 代碼複用","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多開發人員在談到CSS時都覺得代碼重複性很高，在項目開發中這不是一個好的做法。好在現在有CSS預處理器（sass/scss、less、stylus、Turbine），能夠讓我們可以更好的規劃CSS代碼，提高其複用性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當然需要提高代碼複用，還是需要一定的CSS的基礎，來設計好代碼結構，如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* 不提倡 */\n.container {\n background-color: #efefef;\n border-radius: 0.5rem;\n}\n\n.sidebar {\n background-color: #efefef;\n border-radius: 0.5rem;\n}\n\n/* 建議 */\n.container,\n.sidebar {\n background-color: #efefef;\n border-radius: 0.5rem;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.CSS重置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每個瀏覽器都有自己的默認樣式，因此，當網頁不包含CSS時，瀏覽器會爲文本添加一些基本的默認樣式、填充、邊距等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以通過使用通用選擇器 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"*","attrs":{}}],"attrs":{}},{"type":"text","text":" 重置 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-sizing","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"font-family","attrs":{}}],"attrs":{}},{"type":"text","text":" 來實現這一點。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"像這樣：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"* {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-family: Arial, Helvetica, sans-serif;\n}\nul,\nli {\n list-style: none;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不過這些問題現在基本都被框架解決了，對於初學者建議可以模仿但不建議一開始就上框架。","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.不使用顏色名稱","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不要使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"red","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"blue","attrs":{}}],"attrs":{}},{"type":"text","text":"等顏色名稱，相反，建議使用顏色的十六進制值。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲什麼呢？因爲當使用像 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"red","attrs":{}}],"attrs":{}},{"type":"text","text":" 這樣的顏色名稱時，在不同的瀏覽器或者設備中顯示會有所不同。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* 不提倡 */\n.container {\n background-color: red;\n}\n\n/* 建議 */\n.container {\n background-color: #ff0000;\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"5.使用簡寫屬性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在CSS中，多用簡寫屬性，少用單獨屬性，具體哪些是簡寫屬性，哪些是單獨屬性，下面列舉一下常見的一些屬性，是以通常項目爲原則。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"簡寫屬性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"background","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"font","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"transition","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"transform","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"list-style","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-radius","attrs":{}}],"attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"單獨屬性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"rotate","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"scale","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"background-color","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"background-image","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"background-position","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding-left","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding-right","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding-top","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-left","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-top","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-right","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-top","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-right","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":" border-left","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-width","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-color","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-style","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* 不提倡 */\n.container {\n background-image: url(bg.png);\n background-repeat: no-repeat;\n background-position: center;\n}\n\n/* 建議 */\n.container {\n background: url(bg.png) no-repeat center;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"6.文本截取","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在項目開發中，有些列表只需要顯示一行文字，有些列表需要顯示固定函數的文字，過去通過字符截取的方式來實現，但存在截取不統一（文本內容不同英文、中文、標點符號等），再加上現在各種終端的適配，不足就被放大了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在最佳的方式是通過CSS來實現，在文本最後增加省略號（","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"…","attrs":{}}],"attrs":{}},{"type":"text","text":"）。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"單行截取","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"元素必須是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block","attrs":{}}],"attrs":{}},{"type":"text","text":" 或 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-block","attrs":{}}],"attrs":{}},{"type":"text","text":"，如果溢出被隱藏，則文本溢出不起作用，並且元素必須具有定義的寬度或最大寬度集。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"p {\n display: inline-block;\n max-width: 300px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"多行截取","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"p {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3; /* 需要顯示的行數 */\n overflow: hidden;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"7.垂直居中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"垂直居中是一個很常見的需求，有很多實現方式，在伸縮容器內的任何東西垂直居中：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".flex-vertically-center {\n display: flex;\n align-items: center;\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"inline","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-block","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"table-cell","attrs":{}}],"attrs":{}},{"type":"text","text":" 塊垂直對齊：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"img {\n /* 只對block有效 */\n display: inline-block;\n vertical-align: middle;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相對容器中垂直居中的絕對元素，下面代碼是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".sub-container","attrs":{}}],"attrs":{}},{"type":"text","text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".container","attrs":{}}],"attrs":{}},{"type":"text","text":"垂直居中：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".container {\n position: relative;\n}\n.sub-container {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"8.水平居中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與垂直對齊類似，不過水平居中更容易一點。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"塊居中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".block-element {\n display: block;\n margin: 0 auto;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"內聯或內聯塊文本居中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".container {\n text-align: center;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在相對容器內水平居中絕對元素：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".container {\n position: relative;\n}\n.sub-container {\n position: absolute;\n top: 50%;\n transform: translateX(-50%);\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"flex 容器內的任何內容水平居中：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".flex-vertically-center {\n display: flex;\n justify-content: center;\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"9.設置下一個或上一個兄弟元素樣式","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對元素前面和後面的元素進行樣式設置，在項目開發中很有用。例如10個按鈕，當前按鈕下一個及下一個的兄弟元素設置不同的顏色。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"html代碼如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"

\n \n \n \n \n \n \n \n \n \n \n

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"css代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".current ~ button {\n background-color: #000;\n color: #ffffff;\n}\n.current {\n background-color: #ff0000;\n}\n.current + button {\n background-color: #333;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f3/f35f49d22dc7cd1d74320d54976679e6.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來設置當前按鈕前面樣式，css代碼如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"button {\n padding: 10px 15px;\n border: 1px solid #444444;\n font-size: 12px;\n background-color: #ff0000;\n color: #000;\n}\n.current {\n background-color: #000;\n color: #fff;\n}\n.current ~ button {\n background: initial;\n}\n.container {\n width: 1000px;\n margin: 50px auto;\n text-align: center;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/00/00193da9d71566f3114978502735acf1.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"10.寬高比","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果想讓盒子容器有一定的寬高比，如視頻播放器尺寸，可以用幾種方法來實現，其中有一種方法最直觀。可以使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"calc","attrs":{}}],"attrs":{}},{"type":"text","text":" 函數設置頂部填充 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":" (height * width) / 100%","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如下，創建一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"720px","attrs":{}}],"attrs":{}},{"type":"text","text":" 寬的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"16 x 9","attrs":{}}],"attrs":{}},{"type":"text","text":" 矩形：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"html代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"

\n

\n

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"css代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".container {\n width: 720px;\n}\n.box {\n padding-top: calc((9 / 16) * 100%);\n background: #efefef;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果如下","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ac/acbefa11b96405125cb81d0c0bb7fc6a.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還可以使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"after","attrs":{}}],"attrs":{}},{"type":"text","text":" 僞元素來創建比例大小。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".box::after {\n content: \"\";\n display: block;\n padding-top: calc((9 / 16) * 100%);\n background: #eee;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的方案會導致裏面所有的元素都必須向上移動或需要使用絕對定位。不過好消息是，CSS增加了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"aspect-ratio","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio","title":"","type":null},"content":[{"type":"text","text":"aspect-ratio","attrs":{}}]},{"type":"text","text":" 爲box容器規定了一個期待的縱橫比，這個縱橫比可以用來計算自動尺寸以及爲其他佈局函數服務。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"總結","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 既有趣又強大，而且還在不斷地成長和改進。","attrs":{}}]}]}