1.box model
2. max-width, min-width, max-height, min-height
This just sets 제곧내!
3. margin
There are margin-bottom, margin-left, margin-right, margin-top
3.1 margin collapsing
여러 블록요소돌의 위/아래 margin이 경우에 따라 가장 큰 그기를 가진 margin으로 결합(상쇄)되는 현상:
By adding border or padding values, you could avoid margin collapsing.
4. Padding
Has pretty much the same property as margin.
But except you can’t use negative values for padding.
5. border-style, border-width, border-color
- border-style:
5.1 border shorthand
5.2 border-radius
You can make the border rounded (like you see above)
6. box-sizing
content-box
content-boxgives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.border-box
border-boxtells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.box-sizing: border-boxis the default styling that browsers use for the<table>,<select>, and<button>elements, and for<input>elements whose type isradio,checkbox,reset,button,submit,color, orsearch.
= 기본이 content-box이기 때문에 width 랑 height를 부여하면 content가 그 값이되는거고 만약 box-sizing: border-box로 바꾸면 border까지 포함한 content,padding,border의 값이 부여한 값이 되버린다.
