「小白，css樣式看的怎麼樣了？」第二天老朱找到小白問道。
小白鬱悶的說道：「過了一遍，不過css樣式太多了，看的有點暈。」
「嗯，過一遍就可以了，我來跟你說一下css怎麼用吧！你還是開啟昨天的文件。」
檢視原始碼
「開啟了！」
「好的！css樣式最常見的就是控制乙個容器（div、p、span、li等這些都是容器）的文字樣式、高寬度、背景、間距、邊框等，比如width:100px就代表這個容器的寬度是100個畫素。寫css樣式的時候你可以直接寫到容器的style屬性上。」
「朱哥，我打斷一下，什麼事容器的屬性呢？」
「你學過物件導向程式設計麼？如果學過你應該知道物件吧！在html標籤裡面，每個標籤都是乙個物件，而物件都有他們自己的屬性、事件和方法，在你之前做的那個最基礎的頁面裡面，id就是div的乙個屬性，至於事件和方法我們以後再說，你現在可以嘗試的往div上面新增乙個style屬性。」
「是這個樣子麼？」
「嗯，是的，你太棒了，另外跟你說個小知識點，style是容器的預設屬性，有時候我們為了方便控制，可能會給容器新增一些自定義的屬性，比如xiaobai='菜鳥'，哈哈，開個玩笑！你先在先給div容器裡面加點文字內容，然後我告你幾個常用的css用法！」
「好了，加上了」。
「ok，現在我告你幾個css裡面常用的樣式控制，你目前只需要記住這幾個樣式就可以足夠你完成絕大多數網頁布局了。第乙個就是容器的高度（width）和寬度（weight），我習慣給他們畫素值，比如style="width：200px;height:100px;"，通過width和height就可以改變容器的高度和寬度，高度和寬度通常情況下只對塊級容器起作用！」
「那什麼是塊級容器呢？」
「網頁裡面最常見的兩種容器一種是塊級元素一種是行內元素，哦對了！很多人都叫div啊p啊這也標籤塊級元素，可是我習慣稱它們為容器或者塊級容器。這個看個人喜好，我只是覺得容器更能體現他們含義，或者更容易通過物件的方式來理解它。回歸正題，塊級容器前後有換行符，用白話講就是每個塊級容器在頁面裡面預設顯示的時候它的左右不能有其他元素，舉個簡單的例子你可以把每個元素看作乙個word中的文字，如果文字前後都有換行符是不是這個樣子的？」
「還有一種就是行內元素，這個更容易理解，行內元素就是前後沒有換行符，比如span就是行內元素。關於行內元素和塊級元素我們後面會詳細分析他們的原理，這個你有個大概印象就可以了。現在我們繼續說css吧！下乙個要記住的就是文字樣式的幾個控制，他們分別是文字的顏色（color）、大小(font-size)、加粗(font-weight)、行距(line-height)，比如讓你文字顏色為紅色(color:#f00)、大小是14px(font-size:14px;)、加粗(font-weight:bold;)、行距(line-height:30px;)就是下面的效果。」
「下乙個要理解的是邊框（border），邊框對應的四個拓展就是上邊框、右邊框、下邊框、左邊框，邊框常用的屬性分別是邊框的寬度、顏色、樣式（實線、虛線、雙實線等等），比如讓乙個div的左邊框寬度6畫素，顏色藍色，實線（border-left:#0000ff 6px solid;）」。
"今天最後乙個是容器的內邊距(padding)和外邊距(margin)，他們也是各有上下左右四個擴充套件，外邊距就是容器外面的距離，比如你是乙個容器，我是乙個容器，咱倆的距離就是外邊距。內邊距可以看作你的表皮的厚度。更簡單點就是乙個箱子我們從外表看他並不知道它能裝多少東西，只有知道他的厚度才能了解。內邊距通俗理解就是厚度。"
「好了就我今天說的這四個方面的css樣式，你自己看書或者去網上看他們的用法，自己練習練習，你應該可以完成這樣乙個頁面布局，明天我看你的**~~」
檢視原始碼
關注老爐傳說我們一起成長
小白H5成長之路3 做H5之前我該準備什麼工具？
早晨上班時候，小白來的很早，他已經迫不及待的開始學習html5了，老朱剛來他就湊了過來，朱哥，我應該從哪兒開始學？你不用著急，先把做html5的工具準備好吧！然後安裝谷歌chrome瀏覽器 小白 為何要安裝chrome瀏覽器呢？ie不能用麼？老朱跟小白說 知道乙個網頁的結構吧？不太清楚，我只知道一般...
《小白H5成長之路23》彈層與浮動導航是怎麼實現的
小白，你最近看css的時候碰到position屬性了麼？碰到了，通過position可以改變容器的定位，我記得官方描述是這樣的 這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。...
《小白H5成長之路15》正確認識網頁中的文字框
小白，你知道文字框麼？知道，就是網頁裡面輸入文字的地方！哦，那你知道表單麼？不知道，表單是什麼啊？文字框就是乙個表單元素，在html語言裡面表單主要用來收集使用者輸入。比如文字框 單選框 核取方塊等等。其他的表單你目前學了也用不到，文字框是表單中最重要的乙個，今天咱聊一聊文字框吧，文字框以後會成為你...