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

1、css的核心內(nèi)容：標(biāo)準(zhǔn)流、盒子模型、浮動、定位（可以說不理解這些概念絕做不出合適的網(wǎng)頁）1、塊級元素：如：<div></div>2、行內(nèi)元素：如：<span></span>從效果中看塊級元素與行內(nèi)元素的區(qū)別：通過CSS的設(shè)置把行內(nèi)元素轉(zhuǎn)換成塊級元素：標(biāo)準(zhǔn)流：就是標(biāo)簽的排列方式。<div class="style2">我的未來不是夢</div><span id="st" class="style1">欄目一</span><span cl

2、ass="style2">欄目二</span><br /><span class="style3 guaiji">陽光男孩</span><span class="style3 ">欄目三</span>以上是標(biāo)簽的一個排列方式，以下是網(wǎng)頁內(nèi)容的呈現(xiàn)方式，它是以標(biāo)簽的排列方式來呈現(xiàn)的這就是我們對標(biāo)準(zhǔn)流的理解（就象流水，排在前面的標(biāo)簽內(nèi)容前面出現(xiàn)，排后面的標(biāo)簽內(nèi)容后面出現(xiàn)）盒子模型：下面在CSS樣式文件中設(shè)置邊框border：.style1, .style2, .

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

4、ijidisplay: block;以上出現(xiàn)邊框線不平的現(xiàn)象是把行內(nèi)元素轉(zhuǎn)換成塊級元素所產(chǎn)生的不良效果下面設(shè)置外邊距margin.style1, .style2, .style3background-color: #FAFEB1;border-width:2px;border-color:Blue;border-style:solid;padding:5px 0px 5px 10px;margin:4px;.guaijidisplay: block;要注意的是：行內(nèi)元素對于某些樣式的設(shè)置是不起作用的比如：margin下面對內(nèi)容設(shè)置：.style1, .style2, .style3backgr

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

6、rder-color:Blue;border-style:solid;padding:5px 0px 5px 10px;margin:5px;width:200px;height:40px;line-height:40px;vertical-align:middle;float:left;.guaijidisplay: block;頁面效果如下：設(shè)置浮動之后，內(nèi)容的排列已屬于非標(biāo)準(zhǔn)流排列不想對style3進(jìn)行左浮動，可以清除浮動：.style3color: #00bbdd;clear:left;效果如下：定位：下面對欄目一進(jìn)行相對定位，偏移量為top:50px;（即相對于原來的位置進(jìn)行偏移）.style2color: #ff0000;position:relative;top:50px;效果如下：改成絕對定位：.style1color: #0000ff;pos