FAQs on the exercise Review: Changing the Box Model
There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
That box-sizing value can be applied to any element to which a border can be applied. That means all block level elements.
What’s more, it is not very judicious to use the universal selector at all given the amount of resources expended. It selects everything in the HTMLElement group and writes the rule for each node type, regardless whether it exists in the document or not. Better to write selector rules for elements that actually exist. The universal selector is not a silver bullet, but an expensive hotel bill.
* {
box-sizing: border-box;
}
IMHO, this is so not right, but there would not be this selector if there wasn’t a valid use for it. Let your studies reveal it, and learn to use it wisely, or never.
So if the border-box allows borders and padding to leave the box dimensions unaffected, which part of the box gives it this space? Is it the box-content that becomes smaller?
To clarify with an example:
A border box with the dimensions 200px by 300px has a 3px border and a 10px padding. Does the box-content become 26px smaller?
It’s my way of thinking, yes. The universal selector is a resource hog. Even with vastly improved computer speed and memory, resources are resources. We should endeavor to conserve at every turn.
I was wondering, in terms of economizing code, in this case adding a border-box, would you agree (recommend, abhor, etc) to use a class=“border-box” for example and apply at my own discretion.
I get that its up to each coder, however it seems like you have seen a lot code, so I was wondering if this would be an acceptable attempt on your opinion. I’m trying to not be too wild at first, cuz I know I want to work with other people as I advance in this.
We see a universal rule often applied to such properties as ‘border-box’, but for my own part I don’t use universal rules, as a rule. Consider which elements the property will apply to and write a selector rule that selects those elements.
The lesson keeps saying that the box-sizing property controls what type of box model the browser uses to render our web page. Would it be more correct to say that the box-sizing property controls the type of box model of an element?
It would depend where it is declared, in a sense. The property may be inherited so applying it to the outer wrapper would have it apply throughout. If we only declare it on a particular element, then yes, that is all it would affect.
We need an experiment to test and make determinations as to inheritance. Have you set up on REPL.IT, yet? I find that a good sandbox for our purposes.
It appears there is no inheritance of the box-sizing property, but it can be inherited if we declare it.
The box-sizing property has five possible values:
border-box
content-box
inherit
initial
unset
I’m sure this will be well described in the docs. The inherit option is there which means if all our container classes have that value given to their box-sizing property, the entire page would be on one box model.
Some might think that the expedient thing to do is use a universal selector to apply this property, but I disagree. To my mind that selector writes so much superfluous data onto every DOM node, then has to scan it over and over again on every redraw, it is a resource hog in the least. The universal selector may seem like a silver bullet but it is actually an albatross. Select the container classes that the rule must apply to, and be done with it.
Yes, I test most of my code on REPL.IT. My question though was asking about the terminology itself. Which description of the box-sizing property is more correct:
The box-sizing property controls the type of box model the browser uses to render our web page
The box-sizing property controls what type of box model an element (or elements depending on the selector) has
) below.
) to up-vote the contribution!