The box model in CSS

Last Update:2017-08-09 Source: Internet

Author: User

Tags transparent color

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, CSS Box model overview

Essentially, each element in the CSS is surrounded by a box. This box specifies the processing of the element box, in which the center extends outward including the box's dimensions (Width and Height: width and height), padding (padding), border (Boader), and margin (margin). The CSS box model looks like this:

Second, the CSS box model specific description:

As shown in the box model, the area specified by width and height is the area that the actual content can be used in; Then, the content is directly surrounded by

Padding (padding), the inner margin area can display the background color or background picture of the box element, the Edge border (boader) bordering the inner margin, outside the border is the margin (margin), the margin is transparent by default, that is, the background color of the box or the background picture is not visible in the margin, It does not obscure any subsequent elements, but the contents of the parent element can be visualized.

Third, the test of CSS box model:

1, the basic HTML code:

A DIV block is simply set up on the page, which is used as the test box object, where a 200*200 pixel image is added as the content of the div block.

<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
 that supports Chinese
<meta http-equiv=content-type content= "text/html; charset=gb2312 "/>
<!--link external CSS styles--
<style>
The style of/*body * *
Body {
margin:0px;
padding:0px;
Background-color: #4aa54a;
/* page background color is green */
}
/* Style of Box */
#box {
width:200px; /* Box model available width: 200px*/
height:200px; /* Box model available Height: 200px*/
margin:50px 0px 0px 25px; /* Box element margin: Sisu 50px; right outside: 25px*/
padding:30px; /* Box element inner margin, equal to 30px*/
border:20px solid #312184; /* Purple Border */
Background-color: #ffce10; /* box background is earth yellow */
}
/* The picture box style */
IMG {
margin:0px;
padding:0px;
}
</style>
&LT;TITLE&GT;CSS Box Model </title>
<body>
<!--the DIV block ID box as the Test box object--
<div id= "box" >
<!--the content in the div block box is a picture of 200*200px-

</div>
</body>
2.

3. Analysis of results

The background color of the page in the picture is green, the background color of the box is Earth yellow, and the parameters of the box model are shown from the callout information:

A, margin: its upper margin is 50px, the right margin is 25px, transparent color, so you can see the green page;

B, border: Purple single-line border, border width of 20px;

C, the inner margin: 30px of the inner margin, the box of the yellow background can be expanded in, so the display as soil yellow;

D, available areas: the height and width of the available areas are 200*200px, just can accommodate the red picture inside;

4, the contents of the box can be tested in the area

1) Content availability area of the box

The content availability area of a box refers to the size of the area in the box model that can be used to reprint content, for example, a div block can contain image elements or paragraph elements, and so on, the usable area refers to the size of the div box that these elements occupy. The size of the area is defined by the width and height of the box, which is width and height. If the content is larger than the area specified in this dimension, it will not be fully displayed.

2) Testing CSS code modifications

We use a picture size of 200px, so the width and height of the div block is changed to small, width from the original 200 to 150px,height from the original 200 to 180px, while adding the overflow property for Specifies what to do when the content overflows the element box, setting its value to:hidden, that is, when content (which refers to a picture) overflows the element box , the content is trimmed and the rest is not visible. Note that this refers to the outside of the element box , which is the border (Boader). This shows that the content is visible inside the margin, and the outside border (Boader) is hidden. The specific CSS code is as follows:

/* Style of Box */
#box {
width:150px; /* Box model available width: 200px*/
height:180px; /* Box model available Height: 200px*/
margin:50px 0px 0px 25px; /* Box element margin: Sisu 50px; right outside: 25px*/
padding:30px; /* Box element inner margin, equal to 30px*/
border:20px solid #312184; /* Purple Border */
Background-color: #ffce10; /* box background is earth yellow */
}
3) Display

4) Results Analysis

A), the picture can not be completely displayed, the horizontal direction of the part is hidden, this is because the width of the div block 150px plus the internal margin 30px altogether 180px, less than the image of 200px, so not fully displayed;

b), portrait, the picture has been fully displayed, this is because the height of the div block 180px plus the inner margin 30px altogether 210px, is larger than the picture 200px, so can be fully displayed. It shows that the content of overflow is still visible inside the margin;

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More