Common layout attributes and rounded corner attributes

Common layout properties

Box model

Regulations: Each box on the webpage has four components

. The width of the box = width + distance from the outside of the box (margin) + distance between the content and border of the box (padding) + distance from the border (border)

margin attribute

When the margin property is assigned four values, it controls the upper right and lower left (clockwise)
eg: margin: 10px 20px 30px 40px

When the three values ​​of margin are up (left and right) down

The two values ​​of margin control the up and down, the right value controls the left and right
margins: 0 auto; here is recognized as horizontal centering, only horizontal centering
. The first value represents the top and bottom margins, and the second value represents the left and right margins. Not every parent box's height is determined

margin: 10px; all directions are 10px

padding property

The padding attribute assigns multiple values ​​to control the internal spacing in a similar way to margin

Padding: It is the distance added inside the box, which will support the box model.
Solve: 1. So how much effective width and height need to be increased or decreased
2. Set the new box model box-sizing: border-box; (not used Then reduce the padding)

Set in advance

    *{
        /* 有些html标签生来带有边距，或者每个浏览器呈现出的状态不一样，为了统一浏览器的一致性，所以清除默认样式 */
        /* 外边距 */
        margin: 0;
        /* 内边距 */
        padding: 0;

 /* 新盒模型   增加padding也不需要减少height*/
 /* 提前设置每个盒子是不用内减的 */
		box-sizing: border-box;
    }

Border properties

border: the color of the line border of the width of the border
border: 2px solid red;

Row height properties:

line-height: px / 1.5
line height = the height of the box can makeSingle line Text vertically centered

Text centering properties

text-align: center center / left left alignment / right right alignment

Overflow hidden attribute

overflow：hidden

Fillet properties

Writing
border-radius: 10px four corners with the same curvature
border-radius: 10px 20px; 10px upper left and lower right 20px upper right and lower left
border-radius: 10px 20px 30px; 10px upper left
20px 40px 50px clockwise
border-radius: 50% (to make the square round, assign 50% or half the pixels of the side of the square)

weight: 200px;
height: 200px;
border-radius: 100px; the result is that the intersection of the green line and the red border is connected by an arc (circle)

        /* border-radius: 10px; */
        /* border-radius: 20px/40px; */
        /*   还可以这样表示   水平/垂直     左上右下(20px,30px)    右上左下(10px 50px) */
        border-radius: 20px 10px/30px 50px;