css盒子模型實驗報告總結(jié)-html盒子模型和CSS難點總結(jié)

css盒?模型實驗報告總結(jié)_html盒?模型和CSS難點總結(jié)?馬把寫HTML理解為就是盒?的嵌套和堆疊，?切皆盒?。CSS定位和浮動?馬覺得是前端?算難理解的?部分吧，在此總結(jié)復(fù)盤下。HTML盒?模型話不多說，直接上?段代碼(參考來?這?)：div{width:400px;height:100px;border:6pxsolid#949599;margin:20px;padding:20px;}效果(圖?來?這?)：這??常有趣，實際所占的空間是：width=margin-right+border-right+padding-right+width+padding-left+border-left+margin-leftheight=margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom也就是：Width:492=20+6+20+400+20+6+20Height:192=20+6+20+100+20+6+20為什么呢？這就是盒?模型的概念。特別值得注意的是padding的??背景，是的，它的空間是和內(nèi)容空間?樣的，也就是如果內(nèi)容部分是紅?背景，那么padding也是紅?的，直接影響了可見區(qū)域的效果。總結(jié)起來就是，內(nèi)外邊距都是透明的?？梢詠磉@?體驗??具感受?下。因此我們寫HTML時候經(jīng)常做的第?步?作就是先把基本的元素進(jìn)?重置，使其能夠到頂部。?如：body,div,dt,dl,dd,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{margin:0;padding:0;font-family:"HelveticaNeue",;}塊級和內(nèi)聯(lián)元素塊級元素在瀏覽器顯?時，通常會以新?來開始(和結(jié)束)。實例:,,,內(nèi)聯(lián)元素在顯?時通常不會以新?開始。實例:,,,，定義了?檔的區(qū)域，塊級(block-level)?來組合?檔中的?內(nèi)元素，內(nèi)聯(lián)元素(inline)布局的時候注意：ul,ol,dl等的使?可以事半功倍。CSSposition和浮動CSSposition屬性:把元素放置到?個靜態(tài)的、相對的、絕對的、或固定的位置中。脫不脫離?檔流是對定位前原本位置還占不占?檔空間??，脫離?檔流則不占原?檔空間。不脫離則相對原位置定位，脫離則相對于?級元素來定位。相對定位原位置不脫離?檔流(相對于原位置左上?的點)，絕對定位原位置脫離?檔流(相對于?元素的左上?的點)。float是脫離?檔流的，但浮動的元素是?個接?個緊挨著的且滿了就往下，沒有?概念(參考下圖“浮動”)。因此經(jīng)常對某個div(浮動或不浮動)使?clear:both;來清除元素周邊的浮動，使后?的新元素正常換?。clear屬性的值可以是left、right、both或none，它表?框的哪些邊不應(yīng)該挨著浮動框。強(qiáng)制換?。不管脫不脫離?檔流，定位或者浮動的元素都是會對其他元素造成覆蓋的。以下圖?來w3c。圖1中框1原位置不占位，圖2中框1覆蓋了不浮動的框2說明浮動就是?個挨?個，沒有?概念這?清理div是?浮動的，clear的妙?是撐開了原來不浮動的容器div對容器進(jìn)?浮動也是?種解決?案還有css的繼承性也是?個很好玩的東西，哈哈。HTML框架iframe等于新開?個瀏覽器打開src源內(nèi)容。(內(nèi)嵌訪問其他?頁內(nèi)容)例?：注意src屬性。前端?適應(yīng)實現(xiàn)?法?平有限，?馬這?只拋磚引?不做深究，(參考?章)。1、使?meta標(biāo)簽：viewport類似：2、使?css3單位rem使?em來設(shè)置字體??如果要避免在InternetExplorer中?法調(diào)整?本的問題，許多開發(fā)者使?em單位代替pixels。W3C推薦使?em尺?單位。1em等于當(dāng)前的字體尺?。如果?個元素的font-size為16像素，那么對于該元素，1em就等于16像素。在設(shè)置字體??時，em的值會相對于?元素的字體??改變。瀏覽器中默認(rèn)的?本??是16像素。因此1em的默認(rèn)尺?是16像素?？梢允?下?這個公式將像素轉(zhuǎn)換為em：pixels/16=em(注：16等于?元素的默認(rèn)字體??，假設(shè)?元素的font-size為20px，那么公式需改為：pixels/20=em)?機(jī)的可變像素部分?rem寬度?百分?以html的字體寬度(默認(rèn)1rem=16px)為基礎(chǔ)來控制rem代表的像素，?持?響應(yīng)。body默認(rèn)字體的像素不同則像素也不同。html,body{font-size:100%;/*1rem=16px*/}.f3m{

font-size:.3rem;width:0.3rem;}3、使?css3媒體查詢媒體查詢的功能就是為不同的媒體設(shè)置不同的css樣式，這?的“媒體”包括頁?尺?，設(shè)備屏幕尺?等。例如：如果瀏覽器窗??于500px,背景將變?yōu)闇\藍(lán)?：@mediaonlyscreenand(max-width:500px){body{background-color:lightblue;}}4、使?百分?css的百分?值是相對于?級元素的。body默認(rèn)寬度是屏幕寬度(PC中指的是瀏覽器寬度)?孫元素按百分?定位(或指定尺?)就可以了，這只適合布局簡單的頁?，復(fù)雜的頁?實現(xiàn)很困難。在使?百分?布局的時候需要注意的?點：1.你所設(shè)置的百分?，是針對他的?級元素來說的，?不是瀏覽器的寬度。2.當(dāng)你設(shè)置了width：100%時，請避免設(shè)置margin和padding。因為你的div實際寬度將是width+margin+padding從??于外框。3.每??中，如果存在多個div，盡量不要讓他們的總寬度剛好等于100%。原因是，當(dāng)像素數(shù)出現(xiàn)?數(shù)時，瀏覽器是采取四舍五?的?式計算的。?如你的外框是11像素寬，?邊的兩個div的寬帶均設(shè)置為50%，則計算為5.5px,瀏覽器四舍五?的算法得出6px，所以總寬度將變成12px，超出了外框的總寬度。所以我們在設(shè)置的時候盡量不要把總寬度設(shè)置成100%。4.為整個?站設(shè)置最?寬度，為了保證?戶在任何