css的核心內(nèi)容標(biāo)準(zhǔn)流、盒子模型、浮動(dòng)、定位等分析

發(fā)布時(shí)間：2009-12-21 01:50:28 作者：佚名

我要評(píng)論

css的核心內(nèi)容：標(biāo)準(zhǔn)流、盒子模型、浮動(dòng)、定位（可以說不理解這些概念絕做不出合適的網(wǎng)頁）

1、塊級(jí)元素：如：<div></div>
2、行內(nèi)元素：如：<span></span>
從效果中看塊級(jí)元素與行內(nèi)元素的區(qū)別：

通過CSS的設(shè)置把行內(nèi)元素轉(zhuǎn)換成塊級(jí)元素：

標(biāo)準(zhǔn)流：就是標(biāo)簽的排列方式。
<div class="style2">我的未來不是夢(mèng)</div>
<span id="st" class="style1">欄目一</span>
<span class="style2">欄目二</span>
<br />
<span class="style3 guaiji">陽光男孩</span>
<span class="style3 ">欄目三</span>
以上是標(biāo)簽的一個(gè)排列方式，以下是網(wǎng)頁內(nèi)容的呈現(xiàn)方式，它是以標(biāo)簽的排列方式來呈現(xiàn)的

這就是我們對(duì)標(biāo)準(zhǔn)流的理解（就象流水，排在前面的標(biāo)簽內(nèi)容前面出現(xiàn)，排后面的標(biāo)簽內(nèi)容后面出現(xiàn)）

盒子模型：

下面在CSS樣式文件中設(shè)置邊框border：
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
}
.guaiji
{
display: block;
}

以上對(duì)邊框的設(shè)置可以簡寫為：border:2px blue solid;運(yùn)行效果一樣。
下面設(shè)置內(nèi)邊距padding:
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
}
.guaiji
{
display: block;
}

以上出現(xiàn)邊框線不平的現(xiàn)象是把行內(nèi)元素轉(zhuǎn)換成塊級(jí)元素所產(chǎn)生的不良效果
下面設(shè)置外邊距margin
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:4px;
}
.guaiji
{
display: block;
}

要注意的是：行內(nèi)元素對(duì)于某些樣式的設(shè)置是不起作用的比如：margin
下面對(duì)內(nèi)容設(shè)置：
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:5px;
width:200px;
height:70px;
}
.guaiji
{
display: block;
}
頁面效果如下：

以上發(fā)現(xiàn)行內(nèi)元素不起作用，進(jìn)一步說明行內(nèi)樣式對(duì)于某些樣式是不支持的
浮動(dòng)：設(shè)置float:left;即讓下面盒子靠在上面流動(dòng)盒子的左邊緣
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:5px;
width:200px;
height:40px;
line-height:40px;
vertical-align:middle;
float:left;
}
.guaiji
{
display: block;
}
頁面效果如下：

設(shè)置浮動(dòng)之后，內(nèi)容的排列已屬于非標(biāo)準(zhǔn)流排列
不想對(duì)style3進(jìn)行左浮動(dòng)，可以清除浮動(dòng)：
.style3
{
color: #00bbdd;
clear:left;
}
效果如下：

定位：下面對(duì)欄目一進(jìn)行相對(duì)定位，偏移量為top:50px;（即相對(duì)于原來的位置進(jìn)行偏移）
.style2
{
color: #ff0000;
position:relative;
top:50px;
}
效果如下：

改成絕對(duì)定位：
.style1
{
color: #0000ff;
position:absolute;
top:70px;
}
效果如下：

絕對(duì)定位是以其所在標(biāo)簽的父標(biāo)簽進(jìn)行定位，如果其外面沒有別的塊級(jí)元素標(biāo)簽則以<body></body>為父標(biāo)簽進(jìn)行定位