Home > Developer > JavaScript
Understanding of the box model, the Box Model
A very important concept in CSS is the box model. When CSS processes a webpage, it considers that each element is contained in an invisible box.
It consists of the space (inner margin, padding) around the content area and the outer edge (border, border) of the inner margin) and the Invisible Area (margin, margin) that separates the elements from the adjacent elements outside the border. For example, the width of the element in the browser is inconsistent with the width attribute value (unless there is no padding or border ). The width in CSS indicates the width of the content area in the padding, while the display width in the browser is the total of the content width, the left and right padding, and the left and right border. The display height is similar to that in the browser. If box-sizing: border-box is used, the display width of the element is equal to the value of the width attribute. The content width, padding, and border are all included. For example, it seems that the width of the CSS settings has increased, but in fact, the change is not CSS, but the browser's calculation of the width. Let's look at an example:<!DOCTYPE html>.box{ border: 20px solid rgb(255,189,200); padding: 20px; height: 100px; width: 100px; background: rgb(160,197,232);}Effect:
The width and height are both 180px, that is, 20 + 20 + 100 + 20 + 20 = 180px, And the content area is 100px, plus box-sizing: border-box:
The width and height are 100 PX, while the content area is only 20 PX, that is,-20-20-20-20 = 20px. That is, when the box-sizing: border-box is added, the browser calculates the width set in CSS by the following formula: border-left + padding-left + content + padding-right + border-right, the Calculation of height is changed to: border-top + padding-top + content + padding-bottom + border-bottom total height. Application of border in the box model: Make a small triangle: final effect: Example:<!DOCTYPE html>. Box {border: 100px solid rgb (255,189,200);/* do not add solid when using the: after pseudo class, content can be used to ensure the appearance of */border-top-color: #333; border-left-color: # 7fc; border-bottom-color: # f4c; height: 0px; width: 0px ;}Explanation: In the box model, margin, border, and padding can be divided into four parts: top, bottom, left, and right, which can be separately controlled, when we set the size of the padding and content to 0, and the border gives the width, the image shown in will appear. We can also try the format when the padding and content spaces are given:. Box {border: 100px solid rgb (255,189,200); border-top-color: #333; border-left-color: # 7fc; border-bottom-color: # f4c; padding: 20px;/* Partial padding space */height: 20px;/* Partial content space */width: 20px ;}Effect:
Simple application:
<!DOCTYPE html>.box{ background: #2b2b2b; border-radius: 5px 5px; padding: .5em 0 .9375em .9375em; position: absolute; width: 222px;}.box:after{ border: solid transparent; border-top-color: #2b2b2b; border-width: 15px; content: " "; height: 0; left: 50%; margin-left: -15px; position: absolute; top: 99.9%; width: 0;}li{ color: white;}Effect:
The above is just a rough understanding. If you have any questions, you can raise them and discuss them together!
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
