Home > Developer > JavaScript
Box model of HTML and CSS, cssbox
As the last article in the attribute article, this article describes the key-Box model of HTML and CSS ). the key to understanding the Box model is the margin and padding attributes. Correct understanding of these two attributes is also the key to learning to use css layout.
Note:Why not translate margin and padding? Cause 1: there are no corresponding words in Chinese. Cause 2: even if such words exist, margin and padding must be used when writing css code, if we always use Chinese words to replace them, the concepts of margin and padding will be confusing in actual applications.
If there is a little Html basics, you should understand some basic elements (elements), such as p, h1 ~ H6, br, div, li, ul, img, etc. if these elements are subdivided, they can be classified as top-level elements, block-level elements, and inline elements respectively.
Block-level elements constitute the main and key elements of an html, and any block-level element can be explained using the Box model.
Box Model:Any block-level element consists of content, padding, background (including background color and image), border (border), and margin. the three-dimensional diagram is as follows (Fig. 1 ):
The stereoscopy is derived from: http://www.hicksdesign.co.uk/(Under the Creative Commons License)
The plot is as follows (Fig. 2 ):
Based on the above two figures, I believe you will have an intuitive understanding of the Box model.
The following describes the attributes of margin and padding:
1. Margin:Including margin-top, margin-right, margin-bottom, and margin-left to control the distance between block-level elements. They are transparent and invisible to Fig. the upper right and lower left margin values shown in 2 are both 40px, so the code is:
Margin-top: 40px;
Margin-right: 40px;
Margin-bottom: 40px;
Margin-left: 40px;
Based on the clockwise upper, right, bottom, and left rules, abbreviated
Margin: 40px 40px 40px 40px;
For easier memory, see:
When up and down, the left and right margin values are the same, which can be abbreviated:
Margin: 40px 40px;
The first 40px represents the upper and lower margin values, and the last 40px represents the left and right margin values.
When the upper, lower, and left margin values are the same, the value can be abbreviated:
Margin: 40px;
2. Padding:Including padding-top, padding-right, padding-bottom, and padding-left to control the distance between content and border within the block-level elements, for short, see the description of the margin attribute.
Now, we have a basic understanding of the basic usage of the margin and padding attributes. however, in practice, there are always things that you cannot figure out, and they are more or less related to margin.
Note:When you want to separate the content of two elements in vertically, you can either select padding-top/bottom or margin-top/bottom, we recommend that you use padding-top/bottom as much as possible in Jorux to achieve your goal. This is because there is Collapsing margins in css.
Collapsing margins: the margins folding phenomenon only exists in adjacent or subordinate elements. In vertical margin, text descriptions may be confusing. The following example illustrates the margin-collapsing phenomenon.
For example, write the following code between <body> </body> of an html file:
<Div id = "ID1">
<H1 id = "ID2"> Margins of ID1 and ID2 collapse vertically. <br/> margins of ID1 and ID2 are folded vertically. </Div>
Write in the css file that is external to it:
*{
Padding: 0;
Margin: 0;
}
# ID1 {
Color: # FFF;
Margin-top: 10px;
Margin-bottom: 10px;
}
# ID2 {
Font: normal 14px/1.5 Verdana, sans-serif;
Margin-top: 30px;
Margin-bottom: 30px;
Border: 1px solid # F00;
}
Code explanation:
Based on the above explanation, we should get the following results (Fig. 3 ):
That is, the ID1 margin-top/bottom = AB = ef = 10px;
Margin-top/bottom of ID2 = bc = de = 30px;
However, when you open an html file in a browserExample4(Fig. 4 ):
That is, AB = cd = 30px, and ID1's margin-top/bottom = 10pxCollapsedAnd the margin black background corresponding to ID1 is also collapsed.
Why do they fold:The reason for the above phenomenon is that we didn't declare the height (high) of the element div whose id is ID1 in css, so its height is set to auto (automatic. once its value is set to auto, the browser will regard its height as the distance from border-top to border-bottom of the child element id2. 4, so the margin-top/bottom (30px) of the child element ID2 extends out of the parent element id1. 4. blank area between AB and cd. therefore, the "apricot wall" of the margin-top/bottom factor element of the parent element ID1 is collapsed and disappears.
How to solve the folding problem:Maybe the first method we came up with was to solve the problem based on the cause of the collapse-auto. however, in actual operations, some elements, such as div, h1, and p, cannot be pre-identified, therefore, the folding problem cannot be solved by declaring the height of elements in css files.
We need to add the following code (in red) to the css file ):
# ID1 {
Color: # FFF;
Margin-top: 10px;
Margin-bottom: 10px;
Padding-top: 1px;
Padding-bottom: 1px;
}
Or:
# ID1 {
Color: # FFF;
Margin-top: 10px;
Margin-bottom: 10px;
Border-top: 1px solid #333;
Border-bottom: 1px solid #333;
}
By adding the above Code, the browser can recalculate the ID1 height so that it is the distance between the margin-top/bottom outer edge (outer top/bottom) of the sub-element id2. the distance from "be" in "3.
It seems a little confused. The folding problem is difficult. It was also a problem that plagued me for a long time. In addition, I have not provided sufficient instructions, which makes it more difficult for everyone to learn, jorux apologizes.
To test the effect of the folding problem, the following question is left for readers:
The html file code is (change the css address to your css file storage address ):
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> My first homepage </title>
<Link rel = "stylesheet" href = ".... Css "type =" text/css "media =" screen "/>
</Head>
<Body>
<H1 id = "title">
A title <Div id = "content">
Some text here </div>
</Body>
</Html>
Code of the external css file:
*{
Padding: 0;
Margin: 0;
}
Body {
Font: 14px/1.5 Georgia, serif;
}
H1 # title {
Float: right;
Width: 50%;
Font: 14px/1.5 Georgia, serif;
Margin-top: 0;
Color: # fff;
}
Div # content {
Background-color: #333;
Color: # FFF;
Margin-top: 30px;
Border: 1px solid #333;
}
Save the code as a css file and associate it with the preceding html file. For example, use IE and Firefox to view the result of Example5, the effect in IE is what we want, but we can see that element h1 is embedded in the element div through Firefox. Can you solve the problem that Firefox cannot be normally displayed? If yes, can it be associated with the fold phenomenon you just learned? Please give your answer in the message! (Jorux's explanation will be provided in the message or in the next article.) [END]
Note: This problem is difficult. Please do your best!
Before learning CSS, you should first learn to write HTML. If you do not know anything about HTML (like me ...), See the HTML tutorial.
Introduction to CSS (Cascading Style Sheets)
For example, <p> indicates a paragraph and
With the rapid development of the Internet, HTML is widely used. People who access the Internet certainly want to make webpages more beautiful. Therefore, the limitations of HTML layout and interface effects are increasingly exposed. In order to solve this problem, people also took a lot of detours and used some bad methods. For example, adding a lot of attribute results to HTML makes the code very bloated and changes the text into images, use tables too much for formatting, and use blank images to represent white spaces. Until CSS appears.
CSS is a breakthrough in web page design. It solves the problem of page layout. In this case, HTML tags mainly define the Content of a webpage, and CSS determines how the Content is displayed (Layout ).
CSS is a Cascading Style Sheet in English, which can be translated into a series Style sheet in Chinese.
CSS can be divided into three types by position:
Inline Style)
Internal Style Sheet (Internal Style Sheet)
External Style Sheet (External Style Sheet)
Inline Style)
The Inline Style is written in the Tag. The embedded style is only valid for the Tag.
CODE: [Copy to clipboard] <P style = "font-size: 20pt; color: red"> the text in this Style definition <p> </p> is a 20pt font, the font color is red. </P>
Display example
Internal Style Sheet (Internal Style Sheet)
The internal style sheet is written in the HTML
CODE: [Copy to clipboard] <HTML>
<HEAD>
<STYLE type = "text/css">
H1.mylayout {border-width: 1; border: solid; text-align: center; color: red}
</STYLE>
</HEAD>
<BODY>
<H1 class = "mylayout"> Style is used for this title. </H1>
<H1> Style is not used for this title. </H1>
</BODY>
</HTML>
Display example
The Style Tag is used in the Internal Style table (Internal Sytle Sheet) as follows:
CODE: [Copy to clipboard] <STYLE type = "text/css">
......
</STYLE>
External Style Sheet (External Style Sheet)
If many web pages use the same Styles, how can this problem be solved?
Write the sample (styles(in a CSS file suffixed with .css, and then add the full text in each ......>
In css, in the box model, which of the following conditions does width/height apply to the content area and what conditions does it apply to padding-box?
The standard is:
A div (Block Element) directly defines the width, which is the width of the content in it. After padding, border, and margin are added, the overall width of the entire box is displayed.
The width in IE6 contains padding/border, and the width of the entire box is width + margin.
You don't need to pay attention to anything else,
When writing js, you will pay attention to clientWidth, offsetWidth, and so on:
ClientWidth = padding + content width.
OffsetWidth = border + padding + content width.
IE6 is an amazing solution. If you are a beginner, try to pay attention to w3c standards. You should finish learning and then get compatibility issues.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
