html區塊元素: 大多數html元素爲塊級元素或內聯元素
塊級元素： 通常在瀏覽器顯示時會以新行開始（和結束）； 例： <ul> <p> <h1> <table>等
內聯元素： 在顯示時不會以新的一行開始； 例：<strong> <a> <img> <span>等 <span>文本的容器
html的幾種佈局方式：
通常網頁都是用<div>、<table>來進行佈局，CSS渲染整個佈局的樣式使頁面邊的好看
一、流動佈局
塊級元素都會自上而下按順序垂直延伸分佈，默認狀態下塊級元素的寬默認爲100%
塊級元素都會自上而下按順序垂直延伸分佈，默認狀態下塊級元素的寬默認爲100%
內聯元素都會從左到友水平延伸分佈
二、浮動佈局
在默認佈局下，如果我們想讓兩個塊級元素並排顯示，通過float浮動實現，使用後記得清除浮動
在默認佈局下，如果我們想讓兩個塊級元素並排顯示，通過float浮動實現，使用後記得清除浮動
三、層模型
通過設置定位position實現 absolute 絕對定位； relative 相對定位 ； fixed 固定定位等
通過設置定位position實現 absolute 絕對定位； relative 相對定位 ； fixed 固定定位等
目前前端的幾種佈局方式：
一、靜態佈局
特點：不管瀏覽器的尺寸多大，網頁佈局始終按寫代碼式的固定寬高顯示，常規的pc網站都是靜態佈局，
移動端的話另外建設網站單獨設佈局
移動端開發中採用靜態佈局的兩種方式：
（1）、在viewport meta標籤上設置寬的大小width=320，也頁面的各個元素也以像素px爲單位
通過js動態修改標籤initial-scale使得頁面等比縮放，從而剛好佔滿整個屏幕
（1）、在viewport meta標籤上設置寬的大小width=320，也頁面的各個元素也以像素px爲單位
通過js動態修改標籤initial-scale使得頁面等比縮放，從而剛好佔滿整個屏幕
（2）、在viewport meta標籤上設置content"width=640,user-scalabel=no",頁面的各個元素以
像素px爲單位。由於640px超出手機寬度，瀏覽器會自動的縮小頁面至全屏
像素px爲單位。由於640px超出手機寬度，瀏覽器會自動的縮小頁面至全屏
優點：這種佈局方式簡單，亦沒有什麼兼容問題
缺點：不能根據用戶的屏幕大小做出相應變化
二、流式佈局
特點：頁面元素的寬度是按照屏幕的分辨率進行適配調整，簡單說使用百分比%設置，再設置max-width，min-width；
等屬性控制尺寸流動範圍；使整體佈局不變，代表作網格系統
特點：頁面元素的寬度是按照屏幕的分辨率進行適配調整，簡單說使用百分比%設置，再設置max-width，min-width；
等屬性控制尺寸流動範圍；使整體佈局不變，代表作網格系統
缺點：如果屏幕過大，相對原始設計過小或過大的屏幕不能正常顯示，因爲設置的是百分比；但是文字等元素的
大小是以像素px爲單位的，在大屏下顯示的效果會是寬被拉寬，使整個頁面看起來不協調
大小是以像素px爲單位的，在大屏下顯示的效果會是寬被拉寬，使整個頁面看起來不協調
三、自適應佈局
特點：分別爲不同的屏幕分辨定義佈局，即創建多個靜態佈局，每個靜態局部對應一個屏幕的分辨率範圍。改變
屏幕分辨率可以切換不同的靜態佈局，但每個靜態佈局中頁面元素大小不隨窗口的大小而改變。位置發生改變
特點：分別爲不同的屏幕分辨定義佈局，即創建多個靜態佈局，每個靜態局部對應一個屏幕的分辨率範圍。改變
屏幕分辨率可以切換不同的靜態佈局，但每個靜態佈局中頁面元素大小不隨窗口的大小而改變。位置發生改變
四、響應式佈局
概述：隨着CSS3的媒體查詢，出現了響應式佈局，目標：確保每一個頁面在所有的終端都能顯示滿意的效果
通常糅合了流式佈局與自適應佈局 再搭配媒體查詢技術，
根據不同的屏幕分辨率做不同的佈局，且寬根據屏幕的分辨率做出適配的調整
特點：每個屏幕分辨率下面都會有一個佈局樣式，即元素位置大小都會變
優點：適應移動和PC端
缺點：媒體查詢技術有限只能適應主流的寬高；要匹配足夠多的屏幕大小，工作量大，設計版本多
響應式佈局步驟
在head定義:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user- scalable=no">
在head定義:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user- scalable=no">
name="viewport" :名稱=視圖；
width="device-width":頁面寬度=設備寬度
initial-scale：初始縮放比例
maximum-scale：允許用戶的最大縮放比例
minimum-scale：允許用戶的最小縮放比例
user-scale：是否允許用戶可以手動縮放
media query是響應式設計的核心，它能夠跟瀏覽器進行溝通
結構：@media screen and(max-width:980px){
#head{...}
#content{...}
#footer{....}
}
width="device-width":頁面寬度=設備寬度
initial-scale：初始縮放比例
maximum-scale：允許用戶的最大縮放比例
minimum-scale：允許用戶的最小縮放比例
user-scale：是否允許用戶可以手動縮放
media query是響應式設計的核心，它能夠跟瀏覽器進行溝通
結構：@media screen and(max-width:980px){
#head{...}
#content{...}
#footer{....}
}
例：iphone: @media only screen and (width:320px) and (width:768px){}
ipa : @media only screen and (min-width:768px) and (max-width:1024px){}
ipa : @media only screen and (min-width:768px) and (max-width:1024px){}
字體設置： html{font-size：100%;}
完成後可以定義響應式字體
@meta (min-width:640px){body{font-size:1rem}}
@meta (min-width:960px){body{font-size:1.2rem}}
@meta (min-width:1200px){body{font-size:1.5rem}}
@meta (min-width:640px){body{font-size:1rem}}
@meta (min-width:960px){body{font-size:1.2rem}}
@meta (min-width:1200px){body{font-size:1.5rem}}
寬不固定，可以使用百分比： #head{width:100%} #content{width:50%}等
詳情可借鑑http://www.mahaixiang.cn/wzsj/278.html
五、彈性佈局（rem/em佈局）
rem、em的區別：都是順應不同網頁字體大小展現而產生的，em相對是父元素，rem始終相對html大小即頁面根元素
使用em相對佈局相對與使用百分比%佈局更靈活
特點：包裹文字的各元素的尺寸採用em/rem爲單位，而頁面的主要劃分區域仍然使用百分比或像素爲單位
rem、em與px區別：
px：像素，比較精確，不方便左響應式佈局
em： 以父節點font-size大小爲參考點，標準不統一，IE6-8不支持
px：像素，比較精確，不方便左響應式佈局
em： 以父節點font-size大小爲參考點，標準不統一，IE6-8不支持
簡單的div佈局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>html之div層佈局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 80px;
background-color: cadetblue;
}
.content{
width: 100%;
height: 520px;
background-color: white;
}
.footer{
width: 100%;
height: 40px;
background-color: darkgray;
text-align: center;
clear: none;
}
p{
padding-top: 10px;
}
span{
font-family: "微軟雅黑";
font-size: 20px;
margin-left: 10px;
color: white;
}
img{
text-align: right;
vertical-align: middle;
margin-left: 5%;
}
.left{
width: 15%;
height: 100%;
background-color: lightblue;
float: left;
}
.right{
height: 100%;
width: *;
float: right;
}
</style>
</head>
<body>
<div>
<div class="top"><img src="../images/smartphone2.png"/><span>中國某某國際公司</span></div>
<div class="content">
<div class="left"><p>中國某某國際公司</p></div>
<div class="right"></div>
</div>
<div class="footer"><p>中國某某國際公司 © 2018-01-01</p></div>
</div>
</body>
</html>效果圖：
簡單的表格佈局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table表格佈局</title>
</head>
<body>
<table border="0" cellspacing="0">
<tr style="width: 600px;height: 80px;">
<td colspan="2" style="background-color: coral;"><img src="../images/smartphone.png" style="text-align: right; vertical-align: middle;margin-left: 5%;"/><span style="font-size: 20px; margin-left: 10px; color: white;">我的世界</span></td>
</tr>
<tr style="height: 400px;">
<td width="80" style="background-color: cornsilk; vertical-align: top;">
<p>我的世界</p>
</td>
<td width="520"></td>
</tr>
<tr style="background-color: aliceblue;">
<td colspan="2" style="text-align: center;"><p>我的世界 © 2018-1-1</p></td>
</tr>
</table>
</body>
</html>
效果圖：
