Chapter 6 Box Model

I. border 1. border color border-color border color (you can set the upper border, such as: border-top-color, you can also set the whole, but pay attention to the Order) 2. border Width border-width Border width (you can set the upper border, such as: border-top-width, you can also set the whole, but pay attention to the Order) 2. border style border-style border style (you can set the upper border, such as: border-top-style, you can also set the whole, but pay attention to the Order) 2. margin 1. the distance between the margin box and the browser (you can set the top margin, for example, margin-top, or the overall setting, but pay attention to the Order) 2. center margin: 0px Auto 3. padding 1. the distance from the padding content to the box (you can set the top margin, such as padding-top, or the overall setting, but pay attention to the order. the default size of the box model is padding + margin + wightth + borderbox-sizing, which facilitates the calculation of the Box Model size (content-box by default, border-box indicates that the content width and height change.) 5. border-radius rounded corner (top left, top right, bottom right, bottom left)/* if you want a circle, the width and height must be consistent, rounded corner: 1/2 of the width or height * // * if you want to be semi-circular, the width must be twice the height. rounded corner: 1/2 of the width * // * If You Want To Be 1/4 circle, the width and height must be equal, and the width of the rounded corner must be equal */6. box shadow is an external shadow by default, and insetbox-shadow is an insetbox-Shadow: 5px-5px 20px black;

Chapter 6 Box Model