css盒模型和元素绘制
轉(zhuǎn)自:http://www.mysjtu.com/page/M0/S438/438952.html
?
?
一、什么是css盒模型？
W3C組織就建議把所有網(wǎng)頁上的對象都放在一個盒(box)中，設(shè)計師可以通過創(chuàng)建定義來控制這個盒的屬性，這些對像包括段落、列表、標(biāo)題、圖片以及層。盒模型主要定義四個區(qū)域：內(nèi)容(content)、邊框距(padding)、邊界(border)和邊距(margin)。margin，background-color，background-image，padding，content，border之間的層次、關(guān)系和相互影響。盒模型的示意圖。
?
?
?
這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶?#xff08;箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內(nèi)容（content）就是盒子里裝的東西；而填充（padding）就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框（border）就是盒子本身了；至于邊界（margin）則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時也為了方便取出嘛。在網(wǎng)頁設(shè)計上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實生活中盒子不同的是，現(xiàn)實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充和邊界只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，可以對每一條邊框定義不同的樣式。我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。
需要注意到是：width和height定義的是Content部分的寬度和高度而不是整個盒子的高度，padding?border?margin的寬度依次加在外面。背景會填充padding和content部分。但是由于瀏覽器設(shè)計上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當(dāng)box為float時，IE6中box左右的margin會加倍。?
W3C定義的平面盒模式如下：?
?
?
二、webkit元素繪制
1.RenderBoxModelObject
????? (1)在RenderBoxModelObject::styleDidChange()函數(shù)里，會根據(jù)requiresLayer()函數(shù)的返回值，來決定是否
創(chuàng)建一個RenderLayer。requiresLayer()函數(shù)的定義為：
????? virtual bool requiresLayer() const { return isRoot() || isPositioned() || isRelPositioned() || isTransparent() || hasOverflowClip() ||
hasTransform() || hasMask() || hasReflection(); }
????? 在其定義中：
????? isRoot()判斷是否為根節(jié)點；
????? isPositioned()判斷是否為absolute定位方式，或者fixed定位方式；
????? isRelPositioned()判斷是否為relative定位方式；
????? isTransparent()對應(yīng)于css屬性的opacity（透明度），只有當(dāng)opacity小于1.0時，返回值才為真。
????? 后面幾個條件為內(nèi)部的條件，與css屬性無關(guān)。
????? 如果要創(chuàng)建一個RenderLayer,就需要上面的requiresLayer()返回為真，所以能夠觸發(fā)創(chuàng)建一個RenderLayer的css屬性為：
position：absolute，relative，fixed（static不能，它為無特殊定位，對象遵循HTML定位規(guī)則）；opacity：小于1 (大于1，isTransparent()
函數(shù)返回假，不會創(chuàng)建RenderLayer；小于0的時候，該函數(shù)也返回真，會創(chuàng)建RenderLayer）。
????? 創(chuàng)建RenderLayer代碼：m_layer = new (renderArena()) RenderLayer(this);
????? (2)在RenderBoxModelObject::styleDidChange()函數(shù)里，創(chuàng)建RenderLayer之后，必須調(diào)用setHasLayer(true)函數(shù)，否則該RenderLayer
不會被渲染，即被視為沒有RenderLayer。
????? (3)在RenderBoxModelObject::styleDidChange()函數(shù)里將新創(chuàng)建的RenderLayer插入RenderLayer樹中去。
代碼： m_layer->insertOnlyThisLayer();
2.RenderLayer
?????? (1)在RenderLayer::updateZOrderLists()函數(shù)里，通過一個for循環(huán)，把RenderBoxModelObject::styleDidChange（）函數(shù)里，插入進(jìn)來的
所有RenderLayer加入到m_posZOrderList。
????? m_posZOrderList的定義為：Vector<RenderLayer*>* m_posZOrderList;
這個函數(shù)的調(diào)用過程如下：
????? #0? 0x42a61f40 in kill () from /lib/libc.so.0
????? #1? 0x42052f14 in pthread_kill () from /lib/libpthread.so.0
????? #2? 0x420534c8 in raise () from /lib/libpthread.so.0
????? #3? 0x4167d438 in QWSSignalHandler::handleSignal ()?? from /opt/lib/libQtGui.so.4
????? #4? <signal handler called>
????? #5? 0x40e1fc78 in WebCore::RenderLayer::updateZOrderLists ()?? from /opt/lib/libQtWebKit.so.4
????? #6? 0x40e1fe7c in WebCore::RenderLayer::updateLayerListsIfNeeded ()?? from /opt/lib/libQtWebKit.so.4
????? #7? 0x40e1ff3c in WebCore::RenderLayer::hitTestLayer ()?? from /opt/lib/libQtWebKit.so.4
????? #8? 0x40e2043c in WebCore::RenderLayer::hitTestLayer ()?? from /opt/lib/libQtWebKit.so.4
????? #9? 0x40e2115c in WebCore::RenderLayer::hitTest ()?? from /opt/lib/libQtWebKit.so.4
????? #10 0x408437c0 in WebCore::Document::prepareMouseEvent ()?? from /opt/lib/libQtWebKit.so.4
????? #11 0x40c8b3e0 in WebCore::EventHandler::prepareMouseEvent ()?? from /opt/lib/libQtWebKit.so.4
????? #12 0x40c96580 in WebCore::EventHandler::handleMouseMoveEvent ()?? from /opt/lib/libQtWebKit.so.4
????? #13 0x40c96c0c in WebCore::EventHandler::mouseMoved ()?? from /opt/lib/libQtWebKit.so.4
????? #14 0x40f4cf38 in WebCore::FrameLoaderClientQt::postProgressFinishedNotification () from /opt/lib/libQtWebKit.so.4
????? #15 0x40c16808 in WebCore::ProgressTracker::finalProgressComplete ()?? from /opt/lib/libQtWebKit.so.4
????? #16 0x40c16954 in WebCore::ProgressTracker::progressCompleted ()?? from /opt/lib/libQtWebKit.so.4
????? #17 0x40bb3518 in WebCore::FrameLoader::checkLoadCompleteForThisFrame ()?? from /opt/lib/libQtWebKit.so.4
????? #18 0x40bbb008 in WebCore::FrameLoader::recursiveCheckLoadComplete ()?? from /opt/lib/libQtWebKit.so.4
????? #19 0x40b9f57c in WebCore::DocumentLoader::removeSubresourceLoader ()? from /opt/lib/libQtWebKit.so.4
????? #20 0x40c2d51c in WebCore::SubresourceLoader::didFinishLoading ()?? from /opt/lib/libQtWebKit.so.4
????? #21 0x40c23498 in WebCore::ResourceLoader::didFinishLoading ()?? from /opt/lib/libQtWebKit.so.4
????? #22 0x40f0bb4c in WebCore::QNetworkReplyHandler::finish ()?? from /opt/lib/libQtWebKit.so.4
????? #23 0x40f0c7f0 in WebCore::QNetworkReplyHandler::qt_metacall ()?? from /opt/lib/libQtWebKit.so.4
????? #24 0x41f03374 in QMetaCallEvent::placeMetaCall ()?? from /opt/lib/libQtCore.so.4
????? #25 0x41f061ac in QObject::event () from /opt/lib/libQtCore.so.4
????? #26 0x41697c30 in QApplicationPrivate::notify_helper ()?? from /opt/lib/libQtGui.so.4
????? #27 0x41698b8c in QApplication::notify () from /opt/lib/libQtGui.so.4
????? #28 0x41eef1b4 in QCoreApplication::notifyInternal ()?? from /opt/lib/libQtCore.so.4
????? #29 0x41ef42d0 in QCoreApplicationPrivate::sendPostedEvents () from /opt/lib/libQtCore.so.4
????? #30 0x00000000 in ?? ()
?
????? (2)在RenderLayer::paintLayer()函數(shù)里，會通過判斷m_posZOrderList是否為空，來決定是否繼續(xù)進(jìn)行渲染。
代碼：
????? if (m_posZOrderList)
????????? for (Vector<RenderLayer*>::iterator it = m_posZOrderList->begin(); it != m_posZOrderList->end(); ++it)
????????????? it[0]->paintLayer(rootLayer, p, paintDirtyRect, paintRestriction, paintingRoot, overlapTestRequests, localPaintFlags);
????? 通過這段代碼，將m_posZOrderList里面所有的RenderLayer都渲染，它遞歸地回調(diào)到了paintLayer()函數(shù)。
????? (3)對于每個RenderLayer,會通過下面代碼，進(jìn)入到RenderObject里面，進(jìn)行具體的渲染。?
??????????? if (!selectionOnly) {
??????????? paintInfo.phase = PaintPhaseFloat;
??????????? renderer()->paint(paintInfo, tx, ty);
??????????? paintInfo.phase = PaintPhaseForeground;
??????????? paintInfo.overlapTestRequests = overlapTestRequests;
??????????? renderer()->paint(paintInfo, tx, ty);??????????? //為瀏覽器內(nèi)容繪制的入口，很重要
??????????? paintInfo.phase = PaintPhaseChildOutlines;
??????????? renderer()->paint(paintInfo, tx, ty);
??????? }
3.RenderBlock
????? (1)在RenderBlock::paint()函數(shù)里，調(diào)用RenderBlock::paintObject()函數(shù)，進(jìn)入RenderObject的繪制。
????? (2)在RenderBlock::paintObject()函數(shù)里，會完成各個階段的繪制，先從背景，再到內(nèi)容，浮動，邊框等。
????? (3)在繪制內(nèi)容時，調(diào)用RenderBlock::paintContents()函數(shù)，它又會調(diào)用RenderBlock::paintChildren()來繪制其子元素。在繪制
子元素函數(shù)里面，通過child->paint()回調(diào)到RenderBlock::paint()函數(shù)。這樣就形成了遞歸調(diào)用，直到把所有需要繪制的元素都繪制
完。從這里也可以看出，是從下層往上層繪制，因為paintContents()是在RenderBlock::paintObject()的第二階段，只有它完成了，
才會繪制其他部分。
函數(shù)調(diào)用關(guān)系：
????? #0? 0x42a60f40 in kill () from /lib/libc.so.0
????? #1? 0x42051f14 in pthread_kill () from /lib/libpthread.so.0
????? #2? 0x420524c8 in raise () from /lib/libpthread.so.0
????? #3? 0x4167c438 in QWSSignalHandler::handleSignal ()? from /opt/lib/libQtGui.so.4
????? #4? <signal handler called>
????? #5? 0x40db3c98 in WebCore::RenderBlock::paint ()? from /opt/lib/libQtWebKit.so.4
????? #6? 0x40db3fdc in WebCore::RenderBlock::paintChildren ()?? from /opt/lib/libQtWebKit.so.4
????? #7? 0x40dc8b2c in WebCore::RenderBlock::paintObject ()?? from /opt/lib/libQtWebKit.so.4
????? #8? 0x40db3c04 in WebCore::RenderBlock::paint ()?? from /opt/lib/libQtWebKit.so.4????????? 重要點，從8到5遞歸調(diào)用。繪制需要重新繪制的元素。
????? #9? 0x40e22ec0 in WebCore::RenderLayer::paintLayer ()?? from /opt/lib/libQtWebKit.so.4
????? #10 0x40e22760 in WebCore::RenderLayer::paintLayer ()?? from /opt/lib/libQtWebKit.so.4
????? #11 0x40e23430 in WebCore::RenderLayer::paint ()?? from /opt/lib/libQtWebKit.so.4
????? #12 0x40cb3fa0 in WebCore::FrameView::paintContents ()?? from /opt/lib/libQtWebKit.so.4
????? #13 0x40f60000 in QWebFramePrivate::renderPrivate ()?? from /opt/lib/libQtWebKit.so.4
????? #14 0x40f90360 in QWebView::paintEvent () from /opt/lib/libQtWebKit.so.4
????? #15 0x416da7fc in QWidget::event () from /opt/lib/libQtGui.so.4
????? #16 0x40f8ff78 in QWebView::event () from /opt/lib/libQtWebKit.so.4
????? #17 0x41696c30 in QApplicationPrivate::notify_helper ()?? from /opt/lib/libQtGui.so.4
????? #18 0x41697b8c in QApplication::notify () from /opt/lib/libQtGui.so.4
????? #19 0x41eee1b4 in QCoreApplication::notifyInternal ()?? from /opt/lib/libQtCore.so.4
????? #20 0x416d83b0 in QWidgetPrivate::drawWidget () from /opt/lib/libQtGui.so.4
????? #21 0x41850394 in QWidgetBackingStore::sync () from /opt/lib/libQtGui.so.4
????? #22 0xbef9c790 in ?? ()
4.表單輸入控件(input)
每個表單輸入控件會在RenderBoxModelObject::styleDidChange()函數(shù)里，創(chuàng)建一個RenderLayer? （因為我們在css默認(rèn)樣式里面，對input使用了opacity屬性）。
(1).對于表單輸入控件，其繪制不是通過RenderBlock::paintObject ()函數(shù)里面第二階段（2. paint contents）的paintContents(paintInfo, tx, ty)
函數(shù)調(diào)用來繪制的，而是通過第一階段（1. paint background, borders etc）的paintBoxDecorations(paintInfo, tx, ty)函數(shù)調(diào)用來繪制。
(2).在RenderBox::paintBoxDecorations ()函數(shù)里，通過? bool themePainted = style()->hasAppearance() && !theme()->paint(this, paintInfo, IntRect(tx, ty, w, h));
?語句，在theme()->paint(this, paintInfo, IntRect(tx, ty, w, h)中，進(jìn)入RenderTheme::paint () 。
(3).在RenderTheme::paint () 函數(shù)里面，繪制各種表單輸入控件。往下面就是調(diào)用QT的圖像繪制函數(shù)。
表單輸入控件。這里是<input type=radio value="">的函數(shù)調(diào)用：
#0? 0x42a59f40 in kill () from /lib/libc.so.0
#1? 0x4204af14 in pthread_kill () from /lib/libpthread.so.0
#2? 0x4204b4c8 in raise () from /lib/libpthread.so.0
#3? 0x41675438 in QWSSignalHandler::handleSignal ()?? from /opt/lib/libQtGui.so.4
#4? <signal handler called>
#5? 0x40e2ca74 in WebCore::RenderObject::isBody ()?? from /opt/lib/libQtWebKit.so.4
#6? 0x40f2b2c8 in WebCore::RenderThemeQt::paintButton ()?? from /opt/lib/libQtWebKit.so.4
#7? 0x40f299a4 in WebCore::RenderThemeQt::paintCheckbox ()?? from /opt/lib/libQtWebKit.so.4
#8? 0x40e6feb4 in WebCore::RenderTheme::paint ()?? from /opt/lib/libQtWebKit.so.4
#9? 0x40dd88a4 in WebCore::RenderBox::paintBoxDecorations ()?? from /opt/lib/libQtWebKit.so.4
#10 0x40dbdb10 in WebCore::RenderBlock::paintObject ()?? from /opt/lib/libQtWebKit.so.4
#11 0x40dac69c in WebCore::RenderBlock::paint ()?? from /opt/lib/libQtWebKit.so.4
#12 0x40e1b28c in WebCore::RenderLayer::paintLayer ()?? from /opt/lib/libQtWebKit.so.4
#13 0x40e1b524 in WebCore::RenderLayer::paintLayer ()?? from /opt/lib/libQtWebKit.so.4
#14 0x40e1b524 in WebCore::RenderLayer::paintLayer ()?? from /opt/lib/libQtWebKit.so.4
#15 0x40e1c2c0 in WebCore::RenderLayer::paint ()?? from /opt/lib/libQtWebKit.so.4
#16 0x40caca60 in WebCore::FrameView::paintContents ()?? from /opt/lib/libQtWebKit.so.4
#17 0x40f58ee0 in QWebFramePrivate::renderPrivate ()?? from /opt/lib/libQtWebKit.so.4
#18 0x40f89098 in QWebView::paintEvent () from /opt/lib/libQtWebKit.so.4
#19 0x416d37fc in QWidget::event () from /opt/lib/libQtGui.so.4
#20 0x40f88ca4 in QWebView::event () from /opt/lib/libQtWebKit.so.4
#21 0x4168fc30 in QApplicationPrivate::notify_helper ()?? from /opt/lib/libQtGui.so.4
#22 0x41690b8c in QApplication::notify () from /opt/lib/libQtGui.so.4
#23 0x41ee71b4 in QCoreApplication::notifyInternal ()?? from /opt/lib/libQtCore.so.4
#24 0x416d13b0 in QWidgetPrivate::drawWidget () from /opt/lib/libQtGui.so.4
#25 0x41849394 in QWidgetBackingStore::sync () from /opt/lib/libQtGui.so.4
#26 0xbedb1790 in ?? ()
(4).對于password，text兩種input輸入控件，會在WebCore/rendering/TextControlInnerElements.cpp文件里，創(chuàng)建一個HTMLDivElement。
代碼：
TextControlInnerElement::TextControlInnerElement(Document* doc, Node* shadowParent)
??? : HTMLDivElement(HTMLNames::divTag, doc)
??? , m_shadowParent(shadowParent)
{
}
它被綁定在對應(yīng)的input上，它們之間是兄弟關(guān)系。這里創(chuàng)建的div,在后面會調(diào)用setHasOverflowClip()函數(shù)來設(shè)置其m_hasOverflowClip。即在RenderBoxModelObject::styleDidChange()函數(shù)里，在“if (requiresLayer())”條件里，requiresLayer()函數(shù)的第五個條件hasOverflowClip()為真，
則就會創(chuàng)建此div對應(yīng)的RenderLayer。
創(chuàng)建div對應(yīng)的RenderObject函數(shù)調(diào)用：
#0? 0x42a5bf40 in kill () from /lib/libc.so.0
#1? 0x4204cf14 in pthread_kill () from /lib/libpthread.so.0
#2? 0x4204d4c8 in raise () from /lib/libpthread.so.0
#3? 0x41677438 in QWSSignalHandler::handleSignal ()? from /opt/lib/libQtGui.so.4
#4? <signal handler called>
#5? 0x40e34c98 in WebCore::RenderObject::RenderObject ()?? from /opt/lib/libQtWebKit.so.4
#6? 0x40de06a8 in WebCore::RenderBoxModelObject::RenderBoxModelObject ()?? from /opt/lib/libQtWebKit.so.4
#7? 0x40dde648 in WebCore::RenderBox::RenderBox ()?? from /opt/lib/libQtWebKit.so.4
#8? 0x40daba90 in WebCore::RenderBlock::RenderBlock ()?? from /opt/lib/libQtWebKit.so.4
#9? 0x40e840b0 in WebCore::TextControlInnerTextElement::createRenderer ()?? from /opt/lib/libQtWebKit.so.4 ( 創(chuàng)建div對應(yīng)的RenderObject)
#10 0x40e849c0 in WebCore::TextControlInnerElement::attachInnerElement ()?? from /opt/lib/libQtWebKit.so.4
#11 0x40e617e8 in WebCore::RenderTextControl::createSubtreeIfNeeded ()?? from /opt/lib/libQtWebKit.so.4????? （重要點）
#12 0x40e6a958 in WebCore::RenderTextControlSingleLine::createSubtreeIfNeeded??? () from /opt/lib/libQtWebKit.so.4
#13 0x40e6ac40 in WebCore::RenderTextControlSingleLine::updateFromElement ()?? from /opt/lib/libQtWebKit.so.4
#14 0x40aa3430 in WebCore::HTMLFormControlElement::attach ()?? from /opt/lib/libQtWebKit.so.4
#15 0x40ab7974 in WebCore::HTMLInputElement::attach ()?? from /opt/lib/libQtWebKit.so.4
#16 0x40adeb94 in WebCore::HTMLParser::insertNode ()?? from /opt/lib/libQtWebKit.so.4
#17 0x40adfa20 in WebCore::HTMLParser::parseToken ()?? from /opt/lib/libQtWebKit.so.4
#18 0x40b01064 in WebCore::HTMLTokenizer::processToken ()?? from /opt/lib/libQtWebKit.so.4
#19 0x40b15bec in WebCore::HTMLTokenizer::parseTag ()?? from /opt/lib/libQtWebKit.so.4
#20 0x40b17c0c in WebCore::HTMLTokenizer::write ()?? from /opt/lib/libQtWebKit.so.4
#21 0x40baf6b8 in WebCore::FrameLoader::write ()?? from /opt/lib/libQtWebKit.so.4
#22 0x40f45fb4 in WebCore::FrameLoaderClientQt::committedLoad ()?? from /opt/lib/libQtWebKit.so.4
#23 0x40ba4b8c in WebCore::FrameLoader::committedLoad ()?? from /opt/lib/libQtWebKit.so.4
#24 0x40b8d904 in WebCore::DocumentLoader::commitLoad ()?? from /opt/lib/libQtWebKit.so.4
#25 0x40c1ce1c in WebCore::ResourceLoader::didReceiveData ()?? from /opt/lib/libQtWebKit.so.4
#26 0x40bf9cb8 in WebCore::MainResourceLoader::didReceiveData ()?? from /opt/lib/libQtWebKit.so.4
#27 0x40c1c6b4 in WebCore::ResourceLoader::didReceiveData ()?? from /opt/lib/libQtWebKit.so.4
#28 0x40f0561c in WebCore::QNetworkReplyHandler::forwardData ()?? from /opt/lib/libQtWebKit.so.4
#29 0x40f067f0 in WebCore::QNetworkReplyHandler::qt_metacall ()?? from /opt/lib/libQtWebKit.so.4
#30 0x41efd374 in QMetaCallEvent::placeMetaCall ()?? from /opt/lib/libQtCore.so.4
#31 0x41f001ac in QObject::event () from /opt/lib/libQtCore.so.4
#32 0x41691c30 in QApplicationPrivate::notify_helper ()?? from /opt/lib/libQtGui.so.4
#33 0x41692b8c in QApplication::notify () from /opt/lib/libQtGui.so.4
#34 0x41ee91b4 in QCoreApplication::notifyInternal ()? from /opt/lib/libQtCore.so.4
#35 0x41eee2d0 in QCoreApplicationPrivate::sendPostedEvents ()?? from /opt/lib/libQtCore.so.4
#36 0x000a9f60 in ?? ()
創(chuàng)建HTMLDivElement函數(shù)調(diào)用：
#0? 0x42a5af40 in kill () from /lib/libc.so.0
#1? 0x4204bf14 in pthread_kill () from /lib/libpthread.so.0
#2? 0x4204c4c8 in raise () from /lib/libpthread.so.0
#3? 0x41676438 in QWSSignalHandler::handleSignal ()?? from /opt/lib/libQtGui.so.4
#4? <signal handler called>
#5? 0x40e836d8 in WebCore::TextControlInnerElement::TextControlInnerElement ()? from /opt/lib/libQtWebKit.so.4
#6? 0x40e83974 in WebCore::TextControlInnerTextElement::TextControlInnerTextElement () from /opt/lib/libQtWebKit.so.4?? (構(gòu)造函數(shù)里創(chuàng)建HTMLDivElement)
#7? 0x40e60f84 in WebCore::RenderTextControl::createSubtreeIfNeeded ()?? from /opt/lib/libQtWebKit.so.4??? （重要點）
#8? 0x40e6a1a0 in WebCore::RenderTextControlSingleLine::createSubtreeIfNeeded?? () from /opt/lib/libQtWebKit.so.4
#9? 0x40e6a488 in WebCore::RenderTextControlSingleLine::updateFromElement ()?? from /opt/lib/libQtWebKit.so.4
#10 0x40aa31e8 in WebCore::HTMLFormControlElement::attach ()?? from /opt/lib/libQtWebKit.so.4
#11 0x40ab772c in WebCore::HTMLInputElement::attach ()?? from /opt/lib/libQtWebKit.so.4
#12 0x40ade94c in WebCore::HTMLParser::insertNode ()?? from /opt/lib/libQtWebKit.so.4
#13 0x40adf7d8 in WebCore::HTMLParser::parseToken ()?? from /opt/lib/libQtWebKit.so.4
#14 0x40b00e1c in WebCore::HTMLTokenizer::processToken ()? from /opt/lib/libQtWebKit.so.4
#15 0x40b159a4 in WebCore::HTMLTokenizer::parseTag ()?? from /opt/lib/libQtWebKit.so.4
#16 0x40b179c4 in WebCore::HTMLTokenizer::write ()?? from /opt/lib/libQtWebKit.so.4
#17 0x40baf470 in WebCore::FrameLoader::write ()?? from /opt/lib/libQtWebKit.so.4
#18 0x40f459d4 in WebCore::FrameLoaderClientQt::committedLoad ()?? from /opt/lib/libQtWebKit.so.4
#19 0x40ba4944 in WebCore::FrameLoader::committedLoad ()?? from /opt/lib/libQtWebKit.so.4
#20 0x40b8d6bc in WebCore::DocumentLoader::commitLoad ()?? from /opt/lib/libQtWebKit.so.4
#21 0x40c1cbd4 in WebCore::ResourceLoader::didReceiveData ()?? from /opt/lib/libQtWebKit.so.4
#22 0x40bf9a70 in WebCore::MainResourceLoader::didReceiveData ()?? from /opt/lib/libQtWebKit.so.4
#23 0x40c1c46c in WebCore::ResourceLoader::didReceiveData ()?? from /opt/lib/libQtWebKit.so.4
#24 0x40f0503c in WebCore::QNetworkReplyHandler::forwardData ()?? from /opt/lib/libQtWebKit.so.4
#25 0x40f06210 in WebCore::QNetworkReplyHandler::qt_metacall ()?? from /opt/lib/libQtWebKit.so.4
#26 0x41efc374 in QMetaCallEvent::placeMetaCall ()?? from /opt/lib/libQtCore.so.4
#27 0x41eff1ac in QObject::event () from /opt/lib/libQtCore.so.4
#28 0x41690c30 in QApplicationPrivate::notify_helper ()?? from /opt/lib/libQtGui.so.4
#29 0x41691b8c in QApplication::notify () from /opt/lib/libQtGui.so.4
#30 0x41ee81b4 in QCoreApplication::notifyInternal ()?? from /opt/lib/libQtCore.so.4
#31 0x41eed2d0 in QCoreApplicationPrivate::sendPostedEvents ()? from /opt/lib/libQtCore.so.4
#32 0x000a9f60 in ?? ()
5.元素具體繪制
圖片，文字，表單輸入控件的繪制，都是通過從RenderBlock::paint () 開始，在RenderBlock::paintObject ()中，調(diào)用RenderBlock::paintContents ()函數(shù)，
來進(jìn)行遞歸地繪制。在RenderBlock::paintContents ()函數(shù)里，有下面代碼：
??????? if (childrenInline())
??????????? m_lineBoxes.paint(this, paintInfo, tx, ty);
??????? else
??????????? paintChildren(paintInfo, tx, ty);
如果是inline,則進(jìn)入具體網(wǎng)頁內(nèi)容的繪制。網(wǎng)頁上面的圖片和文字，都是以inline的方式呈現(xiàn)。即圖片和文字都必須通過”m_lineBoxes.paint(this, paintInfo, tx, ty);“
語句，才能夠顯示在瀏覽器上面，它決定了網(wǎng)頁上面是否能夠正常顯示圖片和文字。
注意：網(wǎng)頁上的文字或空格都會創(chuàng)建一個“#text”節(jié)點。
文本繪制的函數(shù)調(diào)用：
#3? 0x40d0ecb4 in WebCore::GraphicsContext::drawText ()????? from /opt/lib/libQtWebKit.so.4???? （開始繪制文字）
#4? 0x40da44ac in WebCore::paintTextWithShadows ()?? from /opt/lib/libQtWebKit.so.4
#5? 0x40da7a24 in WebCore::InlineTextBox::paint ()
#6? 0x40d9ea28 in WebCore::InlineBox::paint () from /opt/lib/libQtWebKit.so.4?????
#7? 0x40da3c1c in WebCore::InlineFlowBox::paint ()?? from /opt/lib/libQtWebKit.so.4
#8? 0x40e82184 in WebCore::RootInlineBox::paint ()?? from /opt/lib/libQtWebKit.so.4
#9? 0x40e1db34 in WebCore::RenderLineBoxList::paint ()?? from /opt/lib/libQtWebKit.so.4
#10 0x40daccec in WebCore::RenderBlock::paintContents ()? from /opt/lib/libQtWebKit.so.4
#11 0x40dc1698 in WebCore::RenderBlock::paintObject ()? from /opt/lib/libQtWebKit.so.4
#12 0x40dac78c in WebCore::RenderBlock::paint ()?? from /opt/lib/libQtWebKit.so.4
圖片繪制的函數(shù)調(diào)用：
#5? 0x40d11784 in WebCore::GraphicsContext::drawImage ()?? from /opt/lib/libQtWebKit.so.4
#6? 0x40e03570 in WebCore::RenderImage::paintReplaced ()?? from /opt/lib/libQtWebKit.so.4
#7? 0x40e3fb54 in WebCore::RenderReplaced::paint ()?? from /opt/lib/libQtWebKit.so.4
#8? 0x40d9eb4c in WebCore::InlineBox::paint () from /opt/lib/libQtWebKit.so.4
#9? 0x40da3c24 in WebCore::InlineFlowBox::paint ()?? from /opt/lib/libQtWebKit.so.4
#10 0x40e82198 in WebCore::RootInlineBox::paint ()?? from /opt/lib/libQtWebKit.so.4
#11 0x40e1db48 in WebCore::RenderLineBoxList::paint ()?? from /opt/lib/libQtWebKit.so.4
#12 0x40daccb4 in WebCore::RenderBlock::paintContents ()? from /opt/lib/libQtWebKit.so.4
#13 0x40dc1660 in WebCore::RenderBlock::paintObject ()?? from /opt/lib/libQtWebKit.so.4
#14 0x40dac754 in WebCore::RenderBlock::paint ()?? from /opt/lib/libQtWebKit.so.4
表單輸入控件繪制的函數(shù)調(diào)用：
#6? 0x40f2b2c8 in WebCore::RenderThemeQt::paintButton ()?? from /opt/lib/libQtWebKit.so.4
#7? 0x40f299a4 in WebCore::RenderThemeQt::paintCheckbox ()?? from /opt/lib/libQtWebKit.so.4
#8? 0x40e6feb4 in WebCore::RenderTheme::paint ()?? from /opt/lib/libQtWebKit.so.4?? （這里判斷表單輸入控件的類型，然后調(diào)用該類型的繪制函數(shù)）
#9? 0x40dd88a4 in WebCore::RenderBox::paintBoxDecorations ()?? from /opt/lib/libQtWebKit.so.4
#10 0x40dbdb10 in WebCore::RenderBlock::paintObject ()?? from /opt/lib/libQtWebKit.so.4
#11 0x40dac69c in WebCore::RenderBlock::paint ()?? from /opt/lib/libQtWebKit.so.4
總結(jié)
元素的繪制，是由默認(rèn)配置（html4.css）中的display，-webkit-appearance這些css屬性來控制其具體的繪制流程。即這些css屬性變化，他們的繪制也會發(fā)生相應(yīng)的變化。即我們對一些瀏覽器問題的處理，是基于某一種css默認(rèn)配置的處理。所以不要輕易改動css默認(rèn)配置，尤其是與上面的兩條屬性有關(guān)的樣式。
總結(jié)
以上是生活随笔為你收集整理的css盒模型和元素绘制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ELF文件的格式和加载过程
- 下一篇： WebKit 布局的标准和概念