【轉(zhuǎn)】CSS 那么多屬性，而且每個屬性都有多個值怎么記？

xuweijian 發(fā)布于2019-08-30 12:51 / 449人閱讀

摘要：題主說屬性太多，其實就是去控制樣式而已，網(wǎng)頁樣式是借鑒于傳統(tǒng)的報紙等印刷品的排版。常用基礎樣式如圖常用屬性和的取值是基于包含塊離元素最近的塊級祖先元素的寬注意是寬。這些屬性只有用在定位元素除了為值上才有效。

CSS的本質(zhì)可以分為宏觀與微觀兩方面。宏觀上它的存在就是為了控制頁面的顯示樣式。包括布局，顏色，字體等。微觀上則是實現(xiàn)這種控制功能的各種屬性的定義和工作原理。
了解定義就能干活，知道原理才能把活干好。

題主說屬性太多，其實CSS就是去控制樣式而已，網(wǎng)頁樣式是借鑒于傳統(tǒng)的報紙等印刷品的排版。你隨便在身邊找一份報紙或者雜志的一頁，用CSS盡可能的還原出來。整體布局還原出來問題應該不大，但是具體到細節(jié)的時候可能會有很多問題，比如出來的效果總是跟想的不一樣。這個時候就該去看看單個屬性的工作原理，比如margin是用來控制外邊距的但是用%的時候它是怎么計算的最終值呢？當發(fā)現(xiàn)出乎意料的時候就去查一下屬性的定義和值的計算方法。
常用基礎樣式如圖：

Tips：

常用CSS屬性margin和padding的%取值是基于包含塊（離元素最近的塊級祖先元素）的寬,注意是寬。

行內(nèi)元素相關(guān)的內(nèi)容區(qū)、行內(nèi)框、基線這幾個概念很重要。

inline-block是，內(nèi)部被解析為塊級元素，自身被解析為行內(nèi)元素。

background-image可以同時為一個元素設置多個背景圖配合background-position可以組合出神奇的效果。

浮動的元素會消除外邊距重合，浮動的元素會被解析為塊級元素。

top,right,bottom,left,z-index這些屬性只有用在定位元素(除了position為static值)上才有效。

overflow的值設置為scroll，在移動端可以做橫向滑動效果。

除了做表格不要用table布局。

云服務器 GPU云服務器獲取CSS屬性值獲取屬性值 css屬性 orm屬性值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115115.html

相關(guān)文章

【轉(zhuǎn)】CSS 那么多屬性，而且每個屬性都有多個值怎么記？

摘要：題主說屬性太多，其實就是去控制樣式而已，網(wǎng)頁樣式是借鑒于傳統(tǒng)的報紙等印刷品的排版。常用基礎樣式如圖常用屬性和的取值是基于包含塊離元素最近的塊級祖先元素的寬注意是寬。這些屬性只有用在定位元素除了為值上才有效。 CSS的本質(zhì)可以分為宏觀與微觀兩方面。宏觀上它的存在就是為了控制頁面的顯示樣式。包括布局，顏色，字體等。微觀上則是實現(xiàn)這種控制功能的各種屬性的定義和工作原理。了解定義就能干活，...

szysky 2019-08-19 17:53 評論0 收藏0
記大四以來的前端面試

摘要：大四到校就開始了緊張的秋招。在此紀錄一下大四以來的前端面試。面試準備準備簡歷。主要是牛客網(wǎng)，牛客網(wǎng)秋招和春招都有面經(jīng)分享活動，很多拿到大廠的大牛會在上面分享面試經(jīng)驗。這段是調(diào)用函數(shù)的語句，調(diào)用了約好的函數(shù)，并且將數(shù)據(jù)當做參數(shù)傳入。前言大三下學期因為眼睛患了過敏性結(jié)膜炎，只好在家養(yǎng)病，錯過了寶貴的實習時間。大四到校就開始了緊張的秋招。拿到的第一個offer是一家廈門的公司，當時跟技術(shù)...

劉福 2019-08-22 16:59 評論0 收藏0
記大四以來的前端面試

摘要：大四到校就開始了緊張的秋招。在此紀錄一下大四以來的前端面試。面試準備準備簡歷。主要是?？途W(wǎng)，?？途W(wǎng)秋招和春招都有面經(jīng)分享活動，很多拿到大廠的大牛會在上面分享面試經(jīng)驗。這段是調(diào)用函數(shù)的語句，調(diào)用了約好的函數(shù)，并且將數(shù)據(jù)當做參數(shù)傳入。前言大三下學期因為眼睛患了過敏性結(jié)膜炎，只好在家養(yǎng)病，錯過了寶貴的實習時間。大四到校就開始了緊張的秋招。拿到的第一個offer是一家廈門的公司，當時跟技術(shù)...

galois 2019-08-29 15:17 評論0 收藏0
《JavaScript 闖關(guān)記》之 DOM（下）

摘要：節(jié)點具有以下特征的值為的值為元素的標簽名的值為可能是或其子節(jié)點可能是或。添加的這些屬性分別對應于每個元素中都存在的下列標準特性。，有關(guān)元素的附加說明信息，一般通過工具提示條顯示出來。 Element 類型除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現(xiàn) XML 或 HTML 元素，提供了對元素標簽名、子節(jié)點及特...

mudiyouyou 2019-08-20 12:26 評論0 收藏0
《JavaScript 闖關(guān)記》之 DOM（上）

摘要：節(jié)點之間的關(guān)系構(gòu)成了層次，而所有頁面標記則表現(xiàn)為一個以特定節(jié)點為根節(jié)點的樹形結(jié)構(gòu)。此外，包含在列表中的每個節(jié)點相互之間都是同胞節(jié)點。在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。 DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個 API。DOM 描繪了一個層次化的節(jié)點樹，允許開發(fā)人員添加、移除和修改頁面的某一部分。節(jié)點層次 DOM 可以將任何 HTML 或 XM...

mzlogin 2019-08-20 12:17 評論0 收藏0