Changing The Box Model (이건 통째로 다시 공부감)

Why Change the Box Model?

The box model has an awkward limitation regarding box dimensions. 

 

Unfortunately, under the current box model, the border thickness and the padding will affect the dimensions of the box. This makes it difficult to accurately size a box. 

 

Box Model: Content-Box

Many properties in CSS have a default value and don’t have to be explicitly set in the stylesheet.

For example, the default font-weight of text is normal, but this property-value pair is not typically specified in a stylesheet.

 

The same can be said about the box model that browsers assume. In CSS, the box-sizing property controls the type of box model the browser should use when interpreting a web page.

The default value of this property is content-box. This is the same box model that is affected by border thickness and padding.

 

// 

 

 

 

출처 : https://www.tabmode.com/homepage/box-sizing.html

초보자를 위한 Windows(윈도우즈), HTML과CSS를 사용한 홈페이지 작성과 엑셀(EXCEL),메일(outlook mail),포토샵(Photoshop)입문 튜토리얼 강좌

 

Box Model: Border-Box

Fortunately, we can reset the entire box model and specify a new one: border-box.

 

This new box model avoids the dimensional issues that exist in the former box model you learned about.

 

In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change.

 

 

 

The New Box Model

In the example above,

the universal selector (*) targets all elements on the web page and sets their box model to the border-box model.