前端時間，我們專案組來了個做前端的小姐姐，木夕，她是學計算機出身的web工程師，但是她和我之前碰到的前端工程師與眾不同的是，她有一晶亮的眸子，明鏡清楚，似乎總在洞察產品可以改進的地方，她淺淺的劉海下包裹著一張圓潤的臉，她笑起來的時候，宛若一朵鮮花，陽光而又燦爛。
她是乙個非常健談的人，能和我們產品經理達成一片。在開產品評審會的時候給我們提供一些自己的建議，由此我們很是喜歡她。
我會將想要實現的互動效果先拿給他看，問下她實現起來是否有難度。每次她會眨眨帶有智慧型光芒的眼睛，笑著說，應該沒問題，我可以實現這個互動效果。一顰一笑之間，自信的神色自然流露，讓人不得不多看她一眼。
有一次，我向她請教前端的知識，讓她給我講講css是什麼。
她婉轉道來，聲音清脆響亮，三言兩語便將什麼是css給我描繪了出來，我趕緊整理了下來。
最早的網頁單單是從html標籤來製作完成的，沒有華麗的外表，有的只是灰白的文字，不太協調的樣式，css便是拯救html來出現的，它可以改變html在瀏覽器展示的外觀，讓它穿上乙個色彩斑斕的衣裳，使其變得更加賞心悅目。簡單的來說，css的出現就是改變了變現單調、色彩慘淡的網頁。
在製作網頁的時候，我們首先要考慮的是頁面上文字的樣式，文字的樣式無外乎是字型、大小、粗細、顏色等方面，就像我們在word文件中對文字樣式的調整。在css中我們用font-family來定義字型型別、font-size來定義字型大小、font-weight來定義字型粗細、font-style來定義字型斜體、color來定義字型顏色。除了以上基本的字型格式設定之外，還有下劃線、刪除線、刪除這些段落樣式，它們都定義了的文字的樣式，讓文字活潑起來。
word中可以對段落樣式進行調整，如下圖所示。同樣的在css中可以可以定義段落的樣式。段落演示主要涉及文字的排版效果，即整個段落的排版效果。文字樣式是單個字型的體現，那麼段落就是真個文章的表達。
段落中使用字首text來區分文字和段落兩類不同性質的屬性，常見的段落樣式有：text-decoration下劃線、刪除線、定劃線；text-transform文字大小寫；text-indent段落首行縮排；text-align文字水平對齊方式；line-height行高；letter-spacing字距；word-spacing詞距。
同樣的道理，css的邊框類似word的邊框設定。在網頁中，邊框無處不在，任何元素都可以設定邊框屬性。那麼邊框的屬性都包含哪些內容呢。我們不難看出，要設定乙個元素的邊框可以從以下三個方面進行設定。
邊框的寬度：border-width
邊框的外觀：border-style
邊框的顏色：border-color
css中，背景樣式包括背景顏色和背景，使用background-color來控制元素的背景顏色。給元素新增背景，一般涉及到一下四個屬性。
background-attachment：定義背景影象是否隨內容的變動而變動
的樣式包括大小、邊框、水平對齊、垂直對齊和文字環繞效果。
邊框用畫素值、屬性值、顏色值來定義，分別對應width、style和color。
水平對齊的屬性值是text-align。
垂直對齊屬性值是vertical-align。
在css中，可以用list-style-type和list-style-image這兩個屬性來定義列表樣式，這些是用來控制列表項符號的樣式。
列表專案符號list-style-type包括有序列表和無序列表，有序列表就是可以用順序進行排列，無序列表的排序樣式前可以用實心圓、空心圓和實心正方形來顯示。
**樣式就是對**的美化的屬性定義，包括**邊框合併、**邊框間距和**標題位置，分別用border-collapse、border-spacing和caption-side來定義。
在css中需要學習乙個重要的理論，那就是css盒子模型。它指的是頁面中的所有元素可以當成乙個box，並且佔據著一定的頁面空間。盒子模型由content（內容）、padding（內邊距）、margin（外邊距）和border（邊框）四個屬性構成。
乙個頁面由若干個盒子構成，每個盒子之間都是聯絡在一起的，在設計網頁的時候需要考慮盒子的四個屬性。
內容區是盒子的主體，它可以是文字、等多種型別，內容區通過width、height和overflow三個屬性來進行設定
內邊距是內容區和邊框間的空隙，它包含了padding-top、padding-bottom、padding-left、padding-right以及綜合了以上4個方向的簡寫內邊距屬性padding。
外邊距是指兩個盒子之間的距離，外邊距的屬性也有5種：margin-top、margin-bottom、margin-left、margin-right以及綜合了以上4個方向的簡寫外邊距屬性margin。
邊框屬性有border-width、border-style、border-color以及綜合了3類屬性的簡寫邊框屬性border
9 其他
還有一些浮動布局和定位布局，這些都是為了讓使用者更精準定位頁面中的任意勻速，方便使用者的操作。
在聽完木夕的講解之後，我對前端css的有了進一步的了解，也對她感激萬分。
木夕說這只是乙個基本的概念介紹，要想多了解css的內容，還是需要多多學習前端用到的技術知識，不過對產品經理來講，多了解一些技術，能夠讀的懂技術語言，能夠在開發工程中和開發人員進行有效溝通那麼就基本夠啦。
css 縱向合併 CSS 知識總結
主要重點 border除錯法 不管寫什麼樣式 一定要寫border 1.文件流 即文件中元素流動的方向，大致分為一下三種inline block，inline，block，其中又分為三種 流動方向，高度，寬度流動方向inline 元素從左到右，直到最右邊才換行 block 元素從上到下，嗎，每乙個都...
產品經理如何了解使用者的需求？
今天特別想跟大家聊聊需求這件 小事 人人都是產品經理這句話說得不無道理，無論你從事哪個行業，都會提到 使用者需求 這個詞 尤其是對網際網路產品經理來說，需求是一切之始，先有了需求，才有了產品經理的一切職責的發揮空間，如果沒有需求，一切都無從談起，產品經理這個職位也就沒有了存在的價值。作為產品經理的你...
想做專案經理？這些工具必須了解
作為乙個專案經理，或有志成為專案經理的程式設計師，工具可以幫我們節省很多時間，用更好的效果推進專案 下面結合我在專案中使用的工具，做乙個總結 專案經理在帶專案過程中必備的一些工具，下面列的一些工具偏技術管理 b 一 office b 1 word 最基礎的辦公軟體，專案內部溝通，專案交付等專案中各類...