Essentially, every element in CSS is surrounded by a box. This box specifies the processing of the element box. The expansion from the center to the outside includes the box size (width and height: width and height), the padding (padding), and the border (boader) and margin (margin ). The CSS box model is as follows:
Ii. Detailed description of the CSS box model:As shown in, the area specified by width and height in the box model is the area that can be used by the actual content. Then, the area directly surrounding the content is
Padding. The background color or background image of the box element can be displayed in the padding area. The boader is the border with the padding ); outside the border is the margin (margin), the margin is transparent by default, that is, the background color of the box or the background image is invisible outside the margin, it will not block any subsequent elements, however, the content of the parent element is transparent and visible.
Iii. Test the CSS box model: 1. Basic HTML code:On the page, you can set a div block and use it as the testing box object. 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"> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">2. Set the basic CSS style for the box
1) CSS code(For the setting content, see the code comment)
/* CSS style sheet for [CSS box model] created by [serein_chan] Email: [Serein_Chan@foxmail.com] author blog: [inline */body {margin: 0px; padding: 0px; background-color: # 4aa54a;/* the background color of the page is green */}/* the style of the box */# box {width: 200px;/* The available width of the Box Model: 200px */height: 200px;/* box model available height: 200px */margin: 50px 0px 0px 25px;/* box element margin: 50px; right outer: 25px */padding: 30px;/* the inner margin of the box element. equal values: 30px */Border: 20px solid #312184;/* purple border */background-color: # ffce10; /* The Box background is khaki */}/* the style of the image box */IMG {margin: 0px; padding: 0px ;}2)
3) Result Analysis
In the figure, the background color of the page is green, and the background color of the box is earth yellow. From the annotation information, we can see that the parameters of the box model are:
A. margin: The top margin is 50px, the right margin is 25px, and the color is transparent. Therefore, you can view the green page;
B. Border: A purple single-line border with a Border Width of 20 PX;
C. padding: 30px. The box's khaki background can be expanded, so it is displayed as khaki;
4. Box content zone testD. Available area: the height and width of the available area are 200 * PX, which can accommodate red Images in the area;
1) Available area of the box content
The available area of the box content refers to the area size that can be used to reprint content in the box model. For example, a div block can contain image elements or paragraph elements, the available area means that these elements can occupy the size of the DIV box. The size of this area is specified by the width and height of the box, that is, width and height. If the content is greater than the area specified by this dimension, the display is incomplete.
2) test CSS code modification
The image size we use is 200x200 PX, so we can change the width and height of the DIV block to a smaller value. The width is changed from the original 200 to 150px, and the height is changed from the original to 180px, at the same time, the overflow attribute is added to specify how to handle the content overflow element box. The value is set to "hidden", that is, the content will be trimmed when the content overflows the element box, the remaining content is invisible. Note that this refers to a boader that exceeds the element box ). This shows that the area of the content inside the margin is visible, and the area beyond the boader will be hidden. The specific CSS code is as follows:
/* CSS style sheet for [CSS box model] created by [serein_chan] Email: [Serein_Chan@foxmail.com] author blog: [inline */body {margin: 0px; padding: 0px; background-color: # 4aa54a;/* the background color of the page is green */}/* the style of the box */# box {overflow: hidden; /* The overflow attribute is used to specify how to deal with the content overflow element box. here it will be hidden */width: 150px;/* box model available width: 150px */height: 180px; /* box model available height: 180px */margin: 50px 0px 0px 25px;/* box element margin: 50px upper/lower right: 25px */padding: 30px; /* Inside margin of the box element, equal to 30px */Border: 20px solid #312184;/* purple border */background-color: # ffce10; /* The Box background is khaki */}/* the style of the image box */IMG {margin: 0px; padding: 0px ;}3) display
4) Result Analysis
A) the image is not fully displayed, and the horizontal part is hidden. This is because the width of the DIV block is 150px and the padding is 30px, Which is PX less than that of the image. Therefore, the image is not fully displayed;
B) vertically, the image is completely displayed. This is because the height of the DIV block is 180px and the padding is 30px, Which is 210px larger than 200px, so it can be fully displayed. It indicates that the overflow content is still visible in the padding;
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
