This is the 26th day of my participation in Gwen Challenge

What is a box model?

Did you take delivery? Probably took over of, that you affirmation also had opened express of (nonsense), sometimes inn home is the little baby that can give you deck bubble or air bag and so on, let your little baby avoid left and right sides collision.

The box concept of CSS is much easier to understand. Because CSS boxes are so similar to our express packaging.

Baidu down to the picture, hee hee hee

Sample box model diagram of CSS

Take a close look. Ignore the green first, and we’ll talk about that last.

The blue part can be seen as the part of the box (border property), which may be thick or thin, and may not even have a box (surprise or no box);

The yellow part is the padding. Your baby is small, but the box is big, so the padding is big.

And Content is our baby, wide and tall, fat and thin.

Width and height of the box model.

Before we talk about the width and height of the box model, we need to understand one concept.

Although the box model is similar to the delivery box, I actually think it is more similar to the old IE box.

IE’s box model also has these values, but its width and height include the padding and border parts;

That is, no matter how many things are filled to prevent collisions, or how big the baby is, the size of the box remains the same.

In this case, the width and height of the IE box includes the border thickness, padding padding thickness, and the width and height of the content itself.

In addition, here are some common ways to obtain the width and height of the box.

let dom = document.getElementByID('ele')

// Only the width and height of the inline elements can be obtained
dom.style.width/height

// Get the width and height of the real-time operation, the value is accurate, but only supports IE
dom.currentStyle.width/height

// Get the width and height of the real-time operation, the value is accurate
window.getComputeStyle(dom).width/height

// Get the running width and height, but return left, top, width, height by default
dom.getBoundingClientRect().width/height
Copy the code

At the end

HTML+CSS or JS, in fact, there are many concepts, these concepts are actually very simple, but a lot of times are demonized, from another perspective, in fact, it is some basic rules.

Good good study, look at the moon every day.