Hello, long time no see. This is the first series of CSS Tips that I want to share with you guys.
For now, we'll talk about CSS BOX Model. Okay, you might say that
Hmm, I think there are a lot articles talk about this, so what's the difference?
Wait, imagine if you have a flexible box model to some element, I means that you don't have to put !important
to property value of box-sizing
.
yeah, it will break the standard of better css writing style. and you will lose your time.
Now, let's get started.
First I will answer your question, what's the difference?
Applying Box Model The Right Way
Old Method
Simple, just need 3 lines of code. you can reduce it only 1 line actually. But it's not flexible as I said above.
*,*::before,*::after {
box-sizing: border-box;
}
New Method
This is new method, and I prefer to put the box-sizing: border-box
on root element (html tag) and use global values inherit
if I want to use the same box sizing behavior as the root element.
html {
box-sizing: border-box;
}
*,*::before,*::after {
box-sizing: inherit;
}
// for example i have card component with different box-sizing value
.card {
box-sizing: content-box;
}
That's all, and Thank you. I will write another cool CSS Tips for you guys. I'm also learn about CSS actually.
Bye.
Top comments (0)