當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

玩转CSS3(一)----CSS3实现页面布局

發布時間：2023/11/30 CSS 45 豆豆

生活随笔收集整理的這篇文章主要介紹了玩转CSS3(一)----CSS3实现页面布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

請珍惜小編勞動成果，該文章為小編原創，轉載請注明出處。

摘要：

CSS3相對CSS2增加了一些新的布局方式：多欄布局和盒子布局。在這篇文章中，將對CSS2的布局進行簡單的回憶，并總結CSS3的布局方式。

DIV+CSS其實是錯誤的叫法

關于當前的頁面布局，很多人都習慣于叫做DIV+CSS,其實這是一種錯誤的叫法，標準叫法應該叫做XHTML+CSS.
這是為什么呢？傳統的頁面布局采用的是Table布局，即Table+CSS，后來出現了使用DIV的布局方式，所以人們就把它叫做DIV+CSS,而且有些人認為用DIV+CSS制作的頁面才是標準頁面，其實這句話是比較狹隘的。
那什么是標準頁面呢？WEB標準由結構，表現和行為三部分組成。其中結構話標準語言是XHTML和XML,表現化標準語言是CSS。因為XML比較復雜，大多數瀏覽器都沒有完全支持，故不使用XML來實現頁面布局，所以標準的頁面布局應該是符合WEB標準的頁面布局，即XHTML+CSS。
而XHTML中不僅僅只有DIV標簽，還有a,p,ul,li,dl,dt等等標簽，所以即使不使用DIV標簽，制作的頁面也是標準頁面，XHTML的各個標簽都有其功能，并不是說只能用DIV去實現頁面布局（在一本書上有怎么一句話：如果滿屏都是DIV，那也算不上標準頁面了）
所以說，以后我們要盡可能的說XHTML+CSS，而不是DIV+CSS.

CSS2時代的布局方式

簡單點說，CSS2時代是使用float的浮動屬性來實現布局的。 layout.css
/* CSS Document *//*基本信息*/ body{ margin:0px; /*外邊距*/ text-align:center; /*文字居中對齊*/ background:#E1D0BB; /*背景色*/ } /*頁面層容器*/ #container{ width:80%; height:100%; margin-left:10%; margin-right:10%; background:#ABE0F1; } /*頭部*/ #header{ width:100%; height:15%; margin:0px; background:#FF0000; }#logo{ float:left; /*浮動屬性，居左對齊，使其可以在同一行顯示*/ width:60%; height:80%; margin:0px; background:#E18CDD; clear:left; /*取消左側浮動*/ } #banner{ float:right; /*浮動屬性，居右對齊，使其可以在同一行顯示*/ width:38%; height:80%; margin:0px; background:#8376D8; clear:right; /*取消右側浮動*/ } #menu{ width:100%; height:5%; margin:0px; background:#00FF00; } #pageBody{ width:100%; height:70%; margin:0px; background:#00FFFF;} #footer{ width:100%; height:10%; margin:0px; background:#FFFF00; }
layout.html
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>布局</title> <link href="style/layout.css" rel="stylesheet" type="text/css" /> </head><body> <div id="container"><div id="header"><div id="logo">logo</div><div id="banner">banner</div>container</div><div id="menu">menu</div><div id="pageBody"></div><div id="footer">footer</div> </div> </body> </html>

但是，使用float實現布局會有一些缺點，由于各個div是相互獨立的，所以在一個div中加入一些內容后會使得無法對齊，CSS3提供了多欄布局和盒子布局來彌補這種缺點。

多欄布局

layout.css /* CSS Document *//*基本信息*/ body{ margin:0px; /*外邊距*/ text-align:center; /*文字居中對齊*/ background:#E1D0BB; /*背景色*/ } /*頁面層容器*/ #container{ width:80%; height:100%; margin-left:10%; margin-right:10%; background:#ABE0F1; } /*頭部*/ #header{ width:100%; height:15%; margin:0px; background:#FF0000; }#logo{ float:left; /*浮動屬性，居左對齊，使其可以在同一行顯示*/ width:60%; height:80%; margin:0px; background:#E18CDD; clear:left; /*取消左側浮動*/ } #banner{ float:right; /*浮動屬性，居右對齊，使其可以在同一行顯示*/ width:38%; height:80%; margin:0px; background:#8376D8; clear:right; /*取消右側浮動*/ } #menu{ width:100%; height:5%; margin:0px; background:#00FF00; } #pageBody{ width:100%; height:70%; margin:0px; background:#00FFFF; -moz-column-count:4; /*多欄布局：火狐瀏覽器中需要的格式，表示列數*/ -moz-column-gap:10px; /*列之間的間隔*/ -moz-column-rule:1px solid red; /*在列之間加一條紅色的線*/-webkit-column-count:4; /*多欄布局：safari和chrome需要的格式*/ -webkit-column-gap:10px; /*列之間的間隔*/ -webkit-column-rule:1px solid red; /*在列之間加一條紅色的線*/ } #footer{ width:100%; height:10%; margin:0px; background:#FFFF00; }
layout.html <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>布局</title> <link href="style/layout.css" rel="stylesheet" type="text/css" /> </head><body> <div id="container"><div id="header"><div id="logo">logo</div><div id="banner">banner</div>container</div><div id="menu">menu</div><div id="pageBody">內容省略</div><div id="footer">footer</div> </div> </body> </html>
效果圖：

盒子布局

hezi.css /* CSS Document *//*基本信息*/ body{ margin:0px; /*外邊距*/ text-align:center; /*文字居中對齊*/ background:#E1D0BB; /*背景色*/ } /*頁面層容器*/ #container{ display:-moz-box; display:-webkit-box; } #left_side{ width:200px; height:200px; margin:20px; padding:50px; background-color:#FF0000} #center_side{ width:200px; height:200px; margin:20px; padding:50px; background-color:#00FF00 } #right_side{ width:200px; height:200px; margin:20px; padding:50px; background-color:#FFFF00; } #left_side,#center_side,#right_side{ /*實現盒子布局*/ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #down_left{ -moz-box-flex:1; /*可根據內容自動調整大小，實現彈性盒子，此為火狐下的格式*/ -webkit-box-flex:1; padding:20px; margin:20px; background-color:blue; } #down_left{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }hexi.html <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>布局</title> <link href="style/hezi.css" rel="stylesheet" type="text/css" /> </head><body> <div id="container"><div id="left_side">百度</div><div id="center_side">谷歌</div><div id="right_side">淘寶</div><div id="down_left">亞馬遜</div> </div> </body> </html>
效果圖：
如果想要讓盒子垂直分部，可以在將container改為： #container{ display:-moz-box; display:-webkit-box; -moz-box-orient:vertical; /*垂直分布*/ -webkit-box-orient:vertical; }
這里僅給出了大致的布局方式，關于更多的屬性，大家可以閱讀相關的書籍和資料。

轉載于:https://www.cnblogs.com/dingxiaoyue/p/4931792.html

總結

以上是生活随笔為你收集整理的玩转CSS3(一)----CSS3实现页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [Java]向上/下转型Casting
下一篇： html5视频播放