Home > Developer > JavaScript
CSS learning Summary-box model and css Summary box model
I spent my spare time, learned CSS content, mainly refer to the Wang fupeng blog (http://www.cnblogs.com/wangfupeng1988/tag/css/) and Zhang xinxu's blog CSS part of the content, because the author is not a front-end professional, the CSS attribute mechanism cannot be analyzed like Zhang xinxu's great god. Currently, you can only record and share the summary you understand after viewing and learning, so that CSS can be easily applied in the future.
Shared series directory:
1. CSS learning Summary-Box Model
2. CSS learning Summary-Selector
3. CSS learning Summary-stacked rules
4. CSS learning Summary-position)
5. CSS learning Summary-float)
Content of this chapter:
Knowledge Point 1:
Box Model: The Box Model consists of four parts: element content, padding, border, and margin, the four parts are composed of four parts: top/right/bottom/left.
The image downloaded from w3school is used to view the four components of the box model.
Note: The inmost part of the element box in the figure is the actual content (element). The content directly surrounded is the padding (padding), and the padding shows the background of the element ); the edges of the padding are border; the edges are margin, and the edges are transparent by default, therefore, it does not block any subsequent elements (in fact, the margin of an element is the padding of its parent element ).
When the size of an element on the page is determined, add the declared padding, border, and margin values to the content area. Of course, if an element has no padding, border, or outer margin, its size is only determined by its content. Ignore the overlay effect of the outer margin. The calculation formula is as follows:
Total width = left margin + left border + left padding + width + right padding + right border + right margin
Total height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
Here is an example:
Code introduction:
<Div> many settings on the Internet are described in binary format (id class element)
There are many settings on the Internet, which are currently explained in binary format (id class element)
There are many settings on the Internet, which are currently explained in binary format (id class element)
</Div>
</Div>
The total size calculated for the above elements is:
Total width = 10 + 5 + 10 + 450 + 10 + 5 + 10 = 500px
Total height = 10 + 5 + 10 + 72 + 10 + 5 + 10 = 122px
Knowledge Point 2:
After we have a preliminary understanding of the box model, we have considered these scenarios:
1. Relative positioning or non-positioning (position is static by default)
Code introduction:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/css">
. Box {
Background: black;
Color: White;
Height: 100px;
Padding: 10px;
Border: 20px solid Red;
Margin: 30px;
}
</Style>
</Head>
<Body>
<H2> Static or Relative Box
<Div class = "box"> no position attribute or width is set </div>
</Body>
</Html>
The block width is the extended width of the parent element that is automatically filled with it.
2. Floating float elements and absolute positioning elements (with encapsulation, you can set display: table; to achieve the encapsulation effect, you can set it yourself to see the effect)
Code introduction:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/css">
. Box {
Background: black;
Color: White;
Height: 100px;
Padding: 10px;
Border: 20px solid Red;
Margin: 30px;
Position: absolute;
}
</Style>
</Head>
<Body>
<H2> Absolute or Float Box
<Div class = "box"> no position attribute or width is set </div>
</Body>
</Html>
3. Special: Set the div style to box-sizing: border-box;
Code introduction:
<Div> many settings on the Internet are described in binary format (id class element)
There are many settings on the Internet, which are currently explained in binary format (id class element)
There are many settings on the Internet, which are currently explained in binary format (id class element)
</Div>
</Div>
The detected content width is: border Width + padding width + content width
4. The margin attribute of the Box Model:
If the two elements are put together, the corresponding margin is perpendicular to the largest
Follow Public Account (qzgcsczj)
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
