CSS box model

CSS box model

Web design is a rectangular box for each element. What is the exact size of the box calculated, see the following figure:






If the user then Firebug (basic and front end will use the Firebug bar - sugar with tomatoes), will be very familiar with the chart below the.

This chart shows the role very well on any box on the page value.






Note that the above two examples, margin is white. Margin rather special, it does not affect the size of the box itself, but it will affect and the other contents of the box, so margin a box model of an important part.

The size of the box itself is calculated:

Width width + padding-left + padding-right + border-left + border-right

Height height + padding-top + padding-bottom + border-top + border-bottom

Value is not the case statement

If you do not declare padding or border, that they or the value is zero (css reset when used), or as the default browser (it may not be zero, especially those who often do not have to reset the form elements)

The default width of the block-level boxes

If you do not declare the width and the box is static or relative positioning, the width will remain 100% width, padding and border will promote inward rather than outward expansion.

However, if you explicitly set the width of the box 100%, then the padding will extend outward.






The lesson here being that the default width of a box isn't really 100% but a less tangible "whatever is left". This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.

Note that the default width of the box is not really 100%, but the rest of the possible values (should be said that the width of the remaining real - sugar with tomatoes). Should understand the special value, because in many cases, it is to set / not set the width is very useful.

The biggest problem I encountered is the textarea (text box) elements, and they need to set the width to the desired "cols" attribute, and can not contain child elements. So usually a clear set textarea width of 100%, but padding, they will extend the width of textarea. Fixed-width environment, usually set to the appropriate pixel width, but widens the situation not so lucky.

The width of the box without absolute positioning

Not set the width of the performance of the absolute positioning of the box a little bit different. They just need to fit the width of the content they contain can be. Therefore, if the box is only one word, the box will be like as wide as the performance of that word. If the two words into the box width will increase accordingly. The situation is going to box the width of the width to 100% of the parent element (the nearest relative positioning of the parent element or browser window), then it will fold line.






On the box, the vertical expansion to accommodate the content contained is natural. Surprising, not only in the performance of different platforms with different text, different browsers handle this issue, there are many quirks.






No width of the floating box

Absolute positioning with no width as the box's performance. The width of the box contained only extended to the width of the content until the width of its parent element (parent element is not necessarily the relative positioning). As these non-vulnerability of the width of the box, we have to learn is the key mission mode when they can not rely, as the overall page layout. If floating a use as a sidebar, and expect that the internal elements (eg images) to be responsible for the width of containing it, you're asking for trouble.

Inline element is a box

Here has focused on block-level element box. It is easy to imagine the block-level elements of the box, but also inline element boxes. They can think for very long, narrow rectangle, they can have the same box as the other margin, padding he border






It looks bad to exercise off some understanding. As shown in the left margin to push the right side of the box, but only the first line effective, because it is the starting point of the box. the normal application of padding in the text of the upper or lower part, when folded it will ignore the row above the row to row padding and high (line-height) required position as a starting point. In order to effect a transparent background look better.

Witnessed what

Composition of the page to see each individual "box" it? Try this line of code into the style sheet for the time being:

* (

border: 1px solid red! important;

)










Recommended links:



Interpretation SERV-U user attributes "Account"



Wizard Audio Players



M2TS Converter



Comments: Haier bid for Maytag out of mountains and rivers to be Epigenetic re-



EVD GB Classic caught in foreign control of position to defend the right to speak



Silicon Valley Women DIFFICULT to seek higher



About Groovy And Grails



Reading the Book of Changes, attention to the team's personality (an interval of Gua)



Microsoft released windows 2000 the game is vista



Firefox Download break 5 million mark will be issued a limited edition of 50 Sets of



News About Hobby



The SMTP user authentication Based on QMail Setup Guide (Part Two)



ASF To MOV



Audio Video Tools Directory



MPG to 3GP