下雨天，標籤和CSS在一起佈局更配哦，第三天開始我們的佈局之旅之後會無期
盒子模型
首先說到佈局，不得不提的就是盒子模型，盒子的話顧名思義就是我們放東西的容器，和我們生活中所見到的一樣，比如618到的快遞盒子，或者海淘的化妝品收納箱
這些都可以理解爲盒子，那麼前面所學的HTML的元素其實也是一個個的小盒子，那麼元素內的內容就是我們盒子裏面存放的內容
梳理完盒子的關係，那麼就能對應到CSS樣式了，一共有三個分別是，border 盒子的邊框，padding 內填充 , margin 外邊距，那麼通過上圖也看到了，盒子是不是有上下左右四個方向，辣麼代碼中怎麼寫呢
邊框：border 分爲 border-top / border-left / border-right / border-bottom 簡寫呢就是一個 border 表示上下左右，方向有了，那麼還有粗細顏色呢
border-width 邊框粗細
border-style 邊框樣式
dotted 定義點狀邊框。在大多數瀏覽器中呈現爲實線。dashed 定義虛線。在大多數瀏覽器中呈現爲實線。solid定義實線。double定義雙線。雙線的寬度等於 border- width 的值。
border-color 邊框顏色
簡寫版本就是：border ：1px solid red ；
內填充：指的是元素內容和邊框之間的距離，就像化妝品盒子裏面的填充物一樣，顯然填充物也是要佔位置的
padding:10px 當你寫一個值的時候就上右下左，注意順序可不是上下左右
padding:10px 20px 第一個值代表上下 第二個值代表左右
padding:10px 20px 30px 第一值代表上 第二個代表左右 第三個代表下
padding:10px 20px 30px 40px 順序爲上右下左 同直接一個padding一樣
外邊距：指的是元素與元素直接的距離，就是盒子和盒子的距離
margin:10px 當你寫一個值的時候就是上右下左，注意順序
margin: 10px 20px 第一個值代表上下 ，第二個值代表左右
margin:10px 20px 30px 第一個值代表上 第二個代表左右 第三個代表下
margin:10px 20px 30px 40px 順序爲上右下左 同第一個效果一樣
小技巧：以後在使用的時候能使用padding實現的效果都用padding
此處有個坑--->
外邊距和並：外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
再或者當一個元素包着另一個元素的時候，當他們沒有border 或者padding 把外邊距分開，也會合在一起變成連體嬰，分隔的方法呢就是加border or padding
還有就是，只有普通文檔流中塊級元素的垂直外邊距纔會發生外邊距合併。浮動或絕對定位之間的外邊距不會合並。行內元素也不會垂直外邊距合併，爲什麼呢?因爲行內元素的外邊距（margin）和內填充（padding）的上下（top/bottom）都不生效，只有左右（left/right）生效。所以咯 以後佈局的時候注意這個坑，還有要知道這個坑怎麼填平
元素類型
我們的元素按照類型劃分可以分爲：塊級元素、行級元素、行內塊元素
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有：
<img>、<input>
塊級元素的特點：1. 自己獨佔一行 2.可以設置寬高 可以設置top/bottom 距離 3.如果沒有設置寬度，那麼他直接是100%
行級元素的特點：1. 和其他元素在一行 2不可以設置寬高 可以設置top/bottom 距離 3寬度由內容決定
行內塊元素的特點：1. 和其他元素在一行2.可以設置寬高 可以設置top/bottom 距離
元素類型的轉換
通過display可以轉換元素的類型，下面的表格是display可選的值
雖然表格裏的值有很多，but 我們常用的只有四個：
none 元素不顯示 / block 顯示爲塊級元素 / inline顯示爲行級元素 / inline-block 行內塊元素
浮動
沒有一個網頁是那麼正常顯示的，要是有的話那得多醜，浮動的話在網頁佈局中也佔着很重要的位置，浮動的屬性是float可選的只有left/right左浮動還是右浮動，給元素添加完浮動後，元素會脫離當前文檔流，脫離當前文檔流的意思就是不佔位置，那麼底下的元素會跑到上面來，想想你去圖書管，如果桌上空着，你是不是會以爲沒人坐過去，所以底下的元素跑到上面去也很正常。
在網頁佈局中，浮動很重要，網頁佈局大多數的問題都是，爲什麼上不去了，爲什麼下不來了 以後你佈局整個頁面的時候就會感受出來了
那麼有浮動，就會有清除浮動
清除浮動的四種方式：
1. 給父級元素添加height 高度，爲什麼加高度浮動就好了？因爲加高度以後，空出來的位置有元素佔着位置，就像圖書管裏面的桌上放着一本書，那麼你是不是不會坐過去了，因爲顯然有人佔了這個位置
2. 給父級元素添加overflow：hidden
3. 添加空標籤，加clear:both 去做清空浮動
4. 顯然最重要的放在後面，這個也是我們最常用的一種方式 .clearfix:after{ content:"" ; display:block ; clear:both } 通過僞元素的方式清浮動
寫一個公共的css
在網頁佈局當中，我們編寫的CSS文件肯定不會是隻有一個，會有多個CSS文件，包含公共文件，單獨頁面css文件還會有專門負責默認樣式清除的，我們現在來寫一個自己的清除默認樣式的css，這樣在以後的佈局中，直接引用就可以了。
起個名字 reset.css 那麼公共的文件裏面都需要些什麼東西呢？公共文件的作用是幫助我們清除一些元素默認的樣式，如果a標籤的，li 標籤的 還有margin 和padding 清0 ，爲了保證在不同的瀏覽器下面，這些元素都能好好的顯示，來吧 貼代碼
@charset "UTF-8";
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,
fieldset,legend,input,textarea,select
{
margin:0;
padding:0
}
body{
font-size: 14px;
font-family: "微軟雅黑";
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{
content: '';
display:block;
clear: both;
}
img{
border: 0;
}
a{
text-decoration: none;
color:#000000;
}
li{
list-style-type: none;
}
佈局的時候注意事項
1）所有的命名最好都小寫,不能一數字開頭
2）每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整
3）表現與結構完全分離，代碼中不涉及任何的表現元素，如style
4）<h1>到<h5>的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜索引擎的查詢。<h1>在文檔中儘量只用一次。
5）給每一個表格和表單加上一個唯一的、結構標記id，表格只用於顯示數據。
6）儘量使用英文命名原則
7）儘量不縮寫，除非一看就明白的單詞選擇符一般控制在15個字符左右。
最後呢還有一些常用的命名規範如下
相對網頁外層重要部分CSS樣式命名：
外套 wrap ------------------用於最外層
頭部 header ----------------用於頭部
主要內容 main ------------用於主體內容（中部）
左側 main-left -------------左側佈局
右側 main-right -----------右側佈局
導航條 nav -----------------網頁菜單導航條
內容 content ---------------用於網頁中部主體
底部 footer -----------------用於底部
網頁公共命名：
#wrapper 頁面外圍控制整體佈局寬度
#container或#content 容器,用於最外層
#layout 佈局
#header 頁頭部分
#foot, #footer 頁腳部分
#nav 主導航
#subnav 二級導航
#menu 菜單
#submenu 子菜單
#sideBar 側欄
#sidebar_a, #sidebar_b 左邊欄或右邊欄
#main 頁面主體
#tag 標籤
#msg #message 提示信息
#tips 小技巧
#vote 投票
#friendlink 友情連接
#title 標題
#summary 摘要
#loginbar 登錄條
#searchInput 搜索輸入框
#hot 熱門熱點
#search 搜索
#search_output 搜索輸出和搜索結果相似
#searchBar 搜索條
#search_results 搜索結果
#copyright 版權信息
#branding 商標
#logo 網站LOGO標誌
#siteinfo 網站信息
#siteinfoLegal 法律聲明
#siteinfoCredits 信譽
#joinus 加入我們
#partner 合作伙伴
#service 服務
#regsiter 註冊
arr/arrow 箭頭
#guild 指南
#sitemap 網站地圖
#list 列表
#homepage 首頁
#subpage 二級頁面子頁面
#tool, #toolbar 工具條
#drop 下拉
#dorpmenu 下拉菜單
#status 狀態
#scroll 滾動
.tab 標籤頁
.left .right .center 居左、中、右
.news 新聞
.download 下載
.banner 廣告條(頂部廣告條)
.products 產品
.products_prices 產品價格
.products_description 產品描述
.products_review 產品評論
.editor_review 編輯評論
.news_release 最新產品
.publisher 生產商
.screenshot 縮略圖
.faqs 常見問題
.keyword 關鍵詞
.blog 博客
.forum 論壇
CSS文件命名：
master.css,style.css 主要的
module.css 模塊
base.css 基本共用
layout.css 佈局，版面
themes.css 主題
columns.css 專欄
font.css 文字、字體
forms.css 表單
mend.css 補丁
print.css 打印
不實戰不知道bug怎麼來的
呦呦呦 佈局到這就差不多了，這麼簡單，看起來好像這樣的，但是其實並不然，佈局的核心我們已經掌握了，但是佈局的問題都是在實戰中出現的，下面來寫一個網頁吧，那個還記得後會無期裏的韓寒麼，韓寒的個人主站是 http://www.wufazhuce.com/
打開網站滿滿的文藝氣息，來吧我們一起來寫出來，按照步驟幾步走。
那麼開始代碼之前你需要一個佈局圖，有了佈局圖會讓你的思路更加清晰
第一步：項目結構搭建
創建CSS / images / js 文件夾 和 index.html 頁面，複製上面編寫的公共reset.css文件到項目中，並新建style.css
第二步：搭建html頁面佈局
<div class="container">
<!-- 頭部 -->
<div class="header"></div>
<!-- 廣告圖/新聞-->
<div class="content clearfix"> </div>
<!--app-->
<div class="app"></div>
<!--底部-->
<div class="footer"></div>
</div>
佈局的時候先搭大塊，不用先寫細節，先大塊再看細節
第三步：從頭部開始第一個模塊
這個地方，背景是一個純色的藍色，上面ONE一個爲logo png格式，在頭部的div中編寫
<div class="header"> <a href="#"> <img src="image/logo.png" /></a> </div>
對應的style.css樣式需要添加
首先給整體最大的div加好寬度並居中，.container{ width:854pxl margin:0 auto } 給頭部div加的樣式爲
.header{
background-color:#01aef0;
height:50px;
margin:10px 0;
text-align:center;
}
第四步：開啓中間的部分 廣告/新聞
通過佈局圖我們可以看出來，中間又是一個左右結構的，先左右兩個div 添加浮動
<div class="banner fl"><img src="images/banner.jpg" /></div>
<div class="newslist fr"></div>
然後開始給右側的文字列表加布局
<div class="news fr">
<h4>ONE 文章</h4>
<p class="newsnumber">VOL.1677</p><p class="newstitle">忘情咖啡館-紳士</p>
<ul>
<li><span>VOL.1677</span><a href="#">軟糖超能力| 隨便寫了開心就好</a></li>
<li><span>VOL.1677</span><a href="#">軟糖超能力| 隨便寫了開心就好</a></li>
<li><span>VOL.1677</span><a href="#">軟糖超能力| 隨便寫了開心就好</a></li>
<li><span>VOL.1677</span><a href="#">軟糖超能力| 隨便寫了開心就好</a></li>
<li><span>VOL.1677</span><a href="#">軟糖超能力| 隨便寫了開心就好</a></li>
<li><span>VOL.1677</span><a href="#">軟糖超能力| 隨便寫了開心就好</a></li>
</ul>
</div>
效果圖上面明顯右側有兩塊，很簡單複製一下，ctrl+c 然後ctrl+v
那麼中間部分的CSS
.news{
width:270px;
height:290px;
background-color:#f6f6f6;
margin-bottom:10px;
}
.news h4{
font-size：20px;
background-color:#01aef0;
color:#fff;
padding-left:8px;
height:42px;
line-height:42px;
}
.news .newsnumber{
height:48px;
line-height:48px;
padding-left:8px;
}
.news .newstitle{
height:40px;
line-height:40px;
padding-left:8px;
font-size:16px;
color:#428bd2;
}
.news ul{
padding:0 0 17px 8px;
}
.news ul li{
line-height:26px;
height:26px;
color:#666666;
}
第五步：app模塊
這個地方就比較簡單了，佈局比較簡單
<div class="app">
<h4>App一個</h4>
<p>每天只爲你準備一張圖片、一篇文字和一個問答</p>
<p>韓寒主編和監製 原《獨唱團》主創成員共同製作</p>
<p><img src="images/erweima.png" /><img src="images/erweima.png" /><img src="images/erweima.png" /></p>
<p>- 也可搜索 -</p>
<p>"韓寒一個" 或 "ONE一個"</p>
</div>
對應的CSS部分
.app{
margin-top: 40px;
text-align: center;
}
.app img{
width: 80px;
height: 95px;
}
.app h4{
font-size: 18px;
font-weight: normal;
padding-bottom: 24px;
}
其實APP和底部都是讓文本直接center居中，問題不大
第六步：最後一個底部啦
<div class="footer">
<p>© 2012-2014 「ONE · 一個」</p>
<p><a href="#">關於</a> <a href="#">用戶協議</a> <a href="#">聯繫我們</a></p>
<p><a href="#">一個App工作室</a> <a href="#">亭林鎮工作室</a> <a href="#">最酷ZUICOOL</a></p>
<p>複雜世界裏, 一個就夠了. One is all.</p>
<p>滬ICP備13042400號</p>
</div>
對應的CSS
.footer{
border-top: 1px solid #eeeeee;
padding-top: 24px;
margin-top: 116px;
text-align: center;
}
.footer p{
height: 33px;
line-height: 33px;
}
.footer a{
margin: 0 6px;
color: #428bca;
}
好不容易，終於OK 了
最後總結一下：其實佈局說起來好像很簡單，其中的辛酸只有程序員的你知道，但是隻要你保持一顆三觀很正的心，去寫代碼，你的代碼也會善待你的，注意要養成良好的編程習慣，比如命名，比如佈局標籤正確的嵌套，比如語義化的選擇，開發人員工具的使用，畢竟調試很重要，當然還有很多等等....