轉自:http://www.mysjtu.com/page/M0/S438/438952.html

?

?

一、什么是css盒模型？
　　W3C組織就建議把所有網頁上的對象都放在一個盒(box)中，設計師可以通過創建定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層。盒模型主要定義四個區域：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。margin，background-color，background-image，padding，content，border之間的層次、關系和相互影響。盒模型的示意圖。

?

?

?

　　這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容（content）就是盒子里裝的東西；而填充（padding）就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框（border）就是盒子本身了；至于邊界（margin）則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充和邊界只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，可以對每一條邊框定義不同的樣式。我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。
　　需要注意到是：width和height定義的是Content部分的寬度和高度而不是整個盒子的高度，padding?border?margin的寬度依次加在外面。背景會填充padding和content部分。但是由于瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當box為float時，IE6中box左右的margin會加倍。?
　　W3C定義的平面盒模式如下：?

?

?

二、webkit元素繪制

1.RenderBoxModelObject

????? (1)在RenderBoxModelObject::styleDidChange()函數里，會根據requiresLayer()函數的返回值，來決定是否
創建一個RenderLayer。requiresLayer()函數的定義為：
????? virtual bool requiresLayer() const { return isRoot() || isPositioned() || isRelPositioned() || isTransparent() || hasOverflowClip() ||
hasTransform() || hasMask() || hasReflection(); }
????? 在其定義中：
????? isRoot()判斷是否為根節點；
????? isPositioned()判斷是否為absolute定位方式，或者fixed定位方式；
????? isRelPositioned()判斷是否為relative定位方式；
????? isTransparent()對應于css屬性的opacity（透明度），只有當opacity小于1.0時，返回值才為真。
????? 后面幾個條件為內部的條件，與css屬性無關。
????? 如果要創建一個RenderLayer,就需要上面的requiresLayer()返回為真，所以能夠觸發創建一個RenderLayer的css屬性為：
position：absolute，relative，fixed（static不能，它為無特殊定位，對象遵循HTML定位規則）；opacity：小于1 (大于1，isTransparent()
函數返回假，不會創建RenderLayer；小于0的時候，該函數也返回真，會創建RenderLayer）。
????? 創建RenderLayer代碼：m_layer = new (renderArena()) RenderLayer(this);

????? (2)在RenderBoxModelObject::styleDidChange()函數里，創建RenderLayer之后，必須調用setHasLayer(true)函數，否則該RenderLayer
不會被渲染，即被視為沒有RenderLayer。

????? (3)在RenderBoxModelObject::styleDidChange()函數里將新創建的RenderLayer插入RenderLayer樹中去。
代碼： m_layer->insertOnlyThisLayer();
2.RenderLayer

?????? (1)在RenderLayer::updateZOrderLists()函數里，通過一個for循環，把RenderBoxModelObject::styleDidChange（）函數里，插入進來的
所有RenderLayer加入到m_posZOrderList。
????? m_posZOrderList的定義為：Vector<RenderLayer*>* m_posZOrderList;
這個函數的調用過程如下：
????? #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()函數里，會通過判斷m_posZOrderList是否為空，來決定是否繼續進行渲染。
代碼：
????? 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都渲染，它遞歸地回調到了paintLayer()函數。

????? (3)對于每個RenderLayer,會通過下面代碼，進入到RenderObject里面，進行具體的渲染。?
??????????? if (!selectionOnly) {
??????????? paintInfo.phase = PaintPhaseFloat;
??????????? renderer()->paint(paintInfo, tx, ty);
??????????? paintInfo.phase = PaintPhaseForeground;
??????????? paintInfo.overlapTestRequests = overlapTestRequests;
??????????? renderer()->paint(paintInfo, tx, ty);??????????? //為瀏覽器內容繪制的入口，很重要
??????????? paintInfo.phase = PaintPhaseChildOutlines;
??????????? renderer()->paint(paintInfo, tx, ty);
??????? }
3.RenderBlock

????? (1)在RenderBlock::paint()函數里，調用RenderBlock::paintObject()函數，進入RenderObject的繪制。

????? (2)在RenderBlock::paintObject()函數里，會完成各個階段的繪制，先從背景，再到內容，浮動，邊框等。

????? (3)在繪制內容時，調用RenderBlock::paintContents()函數，它又會調用RenderBlock::paintChildren()來繪制其子元素。在繪制
子元素函數里面，通過child->paint()回調到RenderBlock::paint()函數。這樣就形成了遞歸調用，直到把所有需要繪制的元素都繪制
完。從這里也可以看出，是從下層往上層繪制，因為paintContents()是在RenderBlock::paintObject()的第二階段，只有它完成了，
才會繪制其他部分。

函數調用關系：
????? #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遞歸調用。繪制需要重新繪制的元素。
????? #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()函數里，創建一個RenderLayer? （因為我們在css默認樣式里面，對input使用了opacity屬性）。

(1).對于表單輸入控件，其繪制不是通過RenderBlock::paintObject ()函數里面第二階段（2. paint contents）的paintContents(paintInfo, tx, ty)
函數調用來繪制的，而是通過第一階段（1. paint background, borders etc）的paintBoxDecorations(paintInfo, tx, ty)函數調用來繪制。

(2).在RenderBox::paintBoxDecorations ()函數里，通過? bool themePainted = style()->hasAppearance() && !theme()->paint(this, paintInfo, IntRect(tx, ty, w, h));
?語句，在theme()->paint(this, paintInfo, IntRect(tx, ty, w, h)中，進入RenderTheme::paint () 。

(3).在RenderTheme::paint () 函數里面，繪制各種表單輸入控件。往下面就是調用QT的圖像繪制函數。

表單輸入控件。這里是<input type=radio value="">的函數調用：
#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文件里，創建一個HTMLDivElement。
代碼：
TextControlInnerElement::TextControlInnerElement(Document* doc, Node* shadowParent)
??? : HTMLDivElement(HTMLNames::divTag, doc)
??? , m_shadowParent(shadowParent)
{
}
它被綁定在對應的input上，它們之間是兄弟關系。這里創建的div,在后面會調用setHasOverflowClip()函數來設置其m_hasOverflowClip。即在RenderBoxModelObject::styleDidChange()函數里，在“if (requiresLayer())”條件里，requiresLayer()函數的第五個條件hasOverflowClip()為真，
則就會創建此div對應的RenderLayer。

創建div對應的RenderObject函數調用：
#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 ( 創建div對應的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 ?? ()

創建HTMLDivElement函數調用：
#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?? (構造函數里創建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 ()中，調用RenderBlock::paintContents ()函數，
來進行遞歸地繪制。在RenderBlock::paintContents ()函數里，有下面代碼：
??????? if (childrenInline())
??????????? m_lineBoxes.paint(this, paintInfo, tx, ty);
??????? else
??????????? paintChildren(paintInfo, tx, ty);
如果是inline,則進入具體網頁內容的繪制。網頁上面的圖片和文字，都是以inline的方式呈現。即圖片和文字都必須通過”m_lineBoxes.paint(this, paintInfo, tx, ty);“
語句，才能夠顯示在瀏覽器上面，它決定了網頁上面是否能夠正常顯示圖片和文字。
注意：網頁上的文字或空格都會創建一個“#text”節點。
文本繪制的函數調用：
#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

圖片繪制的函數調用：
#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

表單輸入控件繪制的函數調用：
#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
總結
元素的繪制，是由默認配置（html4.css）中的display，-webkit-appearance這些css屬性來控制其具體的繪制流程。即這些css屬性變化，他們的繪制也會發生相應的變化。即我們對一些瀏覽器問題的處理，是基于某一種css默認配置的處理。所以不要輕易改動css默認配置，尤其是與上面的兩條屬性有關的樣式。

總結

以上是生活随笔為你收集整理的css盒模型和元素绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。