×

DIV+css布局入門

下載文檔

ID：40711950

大小：22.82 KB

頁數(shù)：13頁

時(shí)間：2019-08-06

收藏

資源描述：

《DIV+css布局入門》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、DIV+CSS布局常用的行列布局規(guī)則1.CSS布局常用的方法：float:none

2、left

3、right取值：none:　默認(rèn)值。對(duì)象不飄浮left:　文本流向?qū)ο蟮挠疫卹ight:　文本流向?qū)ο蟮淖筮吽窃鯓庸ぷ鞯模磦€(gè)一行兩列的例子xhtml:?這里是第一列

?這里是第二列

?

4、auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}position:static

5、absolute

6、fixed

7、relative取值：static:　默認(rèn)值。無特殊定位，對(duì)象遵循HTML定位規(guī)則absolute:　將對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù)body對(duì)象。而

8、其層疊通過z-index屬性定義fixed:　未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范relative:　對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置它來實(shí)現(xiàn)一行兩列的例子xhtml:?這里是第一列?這里是第二列CSS:#wrap{position:relative;/*相對(duì)定位*/width:770px

9、;}#column1{position:absolute;top:0;left:0;width:300px;}#column2{position:absolute;top:0;right:0;width:470px;}他們的區(qū)別在哪?顯然，float是相對(duì)定位的，會(huì)隨著瀏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！2.CSS常用布局實(shí)例一列單行一列body{margin:0px;??padding:0px;?text-align:center;?}#conte

10、nt{?margin-left:auto;?margin-right:auto;?width:400px;}兩行一列body{?margin:0px;??padding:0px;??text-align:center;}#content-top{margin-left:auto;??margin-right:auto;width:400px;}#content-end{margin-left:auto;margin-right:auto;?width:400px;?}三行一列body{?margin:0px;

11、padding:0px;?text-align:center;?}#content-top{?margin-left:auto;?margin-right:auto;?width:400px;}#content-mid{margin-left:auto;margin-right:auto;?width:400px;}#content-end{margin-left:auto;margin-right:auto;width:400px;?}兩列單行兩列#bodycenter{width:700px;margin

12、-right:auto;margin-left:auto;overflow:auto;?}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:410px;}兩行兩列#header{???width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter{width:700px;margin-right:auto;margin-left:

13、auto;overflow:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:410px;}三行兩列#header{???width:700px;margin-right:auto;margin-left:auto;?}#bodycenter{width:700px;margin-right