css簡單佈局
盒子
一、display
我們不能為行內元素設定width、height、 margin-top和margin-bottom。
我們可以通過修改display來修改元素的性 質。
可選值：
block：設定元素為塊元素
inline：設定元素為行內元素
inline-block：設定元素為行內塊元素
none：隱藏元素（元素將在頁面中完全消失）
二、visibility
visibility屬性主要用於元素是否可見。
和display不同，使用visibility隱藏一個元 素，隱藏後其在文件中所佔的位置會依然 保持，不會被其他元素覆蓋。
可選值：
visible：可見的
hidden：隱藏的
三、overflow
當相關標籤裡面的內容超出了樣式的寬度 和高度是，就會發生一些奇怪的事情，瀏覽器會讓內容溢位盒子。
可以通過overflow來控制內容溢位的情況。
可選值：
visible：預設值
scroll：新增滾動條
auto：根據需要新增滾動條
hidden：隱藏超出盒子的內容
四、文件流
文件流指的是文件中可現實的物件在排列時所佔用的位置。
將窗體自上而下分成一行行，並在每行中按從左至右的順序排 放元素，即為文件流。
也就是說在文件流中元素預設會緊貼到上一個元素的右邊，如 果右邊不足以放下元素，元素則會另起一行，在新的一行中繼 續從左至右擺放。
這樣一來每一個塊元素都會另起一行，那麼我們如果想在文件 流中進行佈局就會變得比較麻煩。
五、浮動
所謂浮動指的是使元素脫離原來的文字流，在父元素中浮動起來。
浮動使用float屬性。
可選值：
none：不浮動
left：向左浮動
right：向右浮動
塊級元素和行內元素都可以浮動，當一個行內元素浮動以後將會自動變為一 個塊級元素。
當一個塊級元素浮動以後，寬度會預設被內容撐開，所以當漂浮一個塊級元 素時我們都會為其指定一個寬度。
浮動二
當一個元素浮動以後，其下方的元素會上移。
元素中的內容將會圍繞 在元素的周圍。
浮動會使元素完全脫離文字流，也就是不再在文件中在佔用位置。
元素設定浮動以後，會一直向上漂浮直到遇到父元素的邊界或者其他 浮動元素。
元素浮動以後即完全脫離文件流，這時不會再影響父元素的高度。
也 就是浮動元素不會撐開父元素。
浮動元素預設會變為塊元素，即使設定display:inline以後其依然是個 塊元素。
簡單佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單佈局</title>
<style type="text/css">
/*清除預設樣式*/
*{
margin: 0;
padding: 0;
}
/*設定頭部*/
.header{
/*設定寬度*/
width: 1000px;
/*設定高度*/
height: 150px;
/*設定背景顏色*/
background-color: yellowgreen;
/*設定居中*/
margin: 0 auto;
}
/*設定主體內部*/
.content{
/*設定寬度*/
width: 1000px;
/*設定高度*/
height: 400px;
/*設定背景顏色*/
background-color: orange;
/*設定居中*/
margin: 10px auto;
}
/*設定content中小div的樣式*/
.left{
width: 200px;
height: 100%;
background-color: skyblue;
/*向左浮動*/
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: yellow;
/*向左浮動*/
float: left;
/*設定水平外邊距0*/
margin: 0 10px;
}
.right{
width: 200px;
height: 100%;
background-color: pink;
/*向左浮動*/
float: left;
}
/*設定頁尾*/
.footer{
/*設定寬度*/
width: 1000px;
/*設定高度*/
height: 150px;
/*設定背景顏色*/
background-color: silver;
/*設定居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 頭部div -->
<div class="header"></div>
<!-- 主體內容div -->
<div class="content">
<!-- 左側div -->
<div class="left"></div>
<!-- 中間div -->
<div class="center"></div>
<!-- 右側div -->
<div class="right"></div>
</div>
<!-- 底部資訊div -->
<div class="footer"></div>
</body>
</html>
這是個簡單的佈局，就是盒子套盒子。