The CSS box model is used to describe a Rectangular Box formed by HTML elements. The box model is used to adjust the outer margin, border, inner margin, and content of each element.
Ii. ExampleCSS Box Model <% @ page Language = "C #" autoeventwireup = "true" codefile = "test. aspx. cs" inherits = "test" %> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">body { width:500px; height:300px; padding:200px 200px; margin:10px 10px; border:20px 20px;}.model{ margin:50px 150px; padding:100px 100px; width:600px; } .model1 { margin-left:150px; padding-left:150px; } .model2 { width:200px; height:50px; } .model3 { width:300px; height:100px; }1. width and height
Width: Set the content width of the box model, and height: Set the content height of the box model.
For example, the content of the body box is Px in width, PX in height, PX in padding, and 20px in width.
In the figure, 900x700 represents the size of the entire box. 900x700 = (500 + 200x2) x (300 + 200x2), that is, the overall size of the box is the size occupied by the content plus the size occupied by the padding. Because the width is 500px and the height is 300px, if you put content in the box, it can only occupy X, that is, the padding occupies the size of the box but cannot be placed.
2. box-like model in the box-like ModelFor the positioning of small boxes in a large box, the margin of the small box starts from the content area of the large box, therefore, the outer margin of the small box occupies the area and the content area as the content area of the big box.
Big Box layout:
Built-in small box:
Here, orange is the outer margin, light green is the inner margin, and blue is the content area, the margin + padding + content area of the small box = the content area of the large box (when the content area of the small box is the default value ).
For the padding setting of a small box, the padding area is based on the content area of the small box, that is, the padding area of the small box changes with the content area of the small box.
The outer margin of the small box changes with the content area of the large box as the benchmark.
3. The content area and content area of a large boxThe content area of the small box is not necessarily smaller than that of the content area of the large box. You can set the content area of the small box to be larger than that of the large box. When the content area of a small box is larger than the content area of a large box, the margin of the small box still changes with the content area of the large box. At this time, the left margin of the small box is still correct, the margin on the right expands the configured size to the right, that is, the corresponding distance to the right based on the content area of the large box.
Large Box Layout
Small box layout:
The content area of the large box is set to 500x300, and the content area of the small box is width = 600. Because the content area of the small box is larger than the whole area of the large box, therefore, the top left outer margin of the outer margin is set normally, and the right margin is expanded by Px to the right based on the content area of the large box.
3. background settingsIf you define a background for the box model, the background is displayed in the content area and the padding area, that is, the light blue area on the graph, the background cannot be set for the outer border.Iv. SummaryThe order of the box model is as follows:
Padding sets the distance between the content and the border, just like a buffer. Border specifies the border line and style of the content. Margin sets the distance between one piece of content and the other. When using CSS to define the box-like model, we set the width and height, but set the height and width of the content block, instead of the sum of content, padding, border, and 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
