Box model

1. brief introduction

all HTML Elements can be seen as boxes , stay CSS in ,"box model" This term is used to design and layout all HTML Elements can be seen as boxes , stay CSS in ,"box model" The term is used in design and layout . The box model is essentially a box , Encapsulate the surrounding HTML The elements in , It includes ： Margin , Frame , fill , And main contents . We place the elements in the space between the other elements and the surrounding element borders . The following picture shows the box model (Box Model)：

2. Related elements （ A few ）

margin( Margin ) -  Clear the area outside the border , The outer margin is transparent .
border( Frame ) -  The border around the inside margin and the outside of the content .
padding( padding ) -  Clear the area around the content , The inside margin is transparent .
div( Block )- Create a box 、 Divide the inside of the box into different areas .
float( float )-float Property specifies a box （ Elements ） Whether it should float .
background( background )- Set the background of the box .
position( Location )- Set the bit value of each box .
text-align( The position of the text )- Set the text position .
:hover( Add the style ) Special style added when mouse over link .
line-height( Row height ) Set the height of each line of text .

3 Specific examples

1.margin

（margin Four directions can be set ,margin-top、margin-bottom、margin-left、margin-right）
(1) nothing margin：

(2) Yes margin：

2.border（solid、dotted、dash…）

border There are four directions that can be added according to your own needs .
(1) nothing border：

(2) Yes border(solid Solid line type ):

3.padding（ Increase the inside margin of the box , The length and width of the box will also change with the increase of the inner margin ）

(1) nothing padding：

(2) Yes padding：
padding：50px;
It can be seen that the width and height of the box have changed ,padding There are also four directions that can be adjusted arbitrarily .

4.div（ Subregion ）

（ I think the simplest way to solve this problem is to set up multiple boxes to frame them ）

<div class="one">
			<div class="two">
			</div>
</div>

5.float

(1) nothing float：

Because the box is on the left by default, we use (float：right;) To introduce
(2) Yes float:

6.background

Adjust the background , It can be changing the color , You can also set the picture as the background
Above is the color , The code is

background-color:;

Picture is

background-image: url(../img/1623327898532.jpeg);

When the size of the picture does not match the size of the box, there will be repetition. You can use the following code to solve it

background-repeat: no-repeat;

Adjust the image size

background-size: cover;

cover It can be modified to a number , however cover Will cover the picture to the size of the box .

7.position

It is divided into static state , relative , Absolute or fixed , You can choose the position of the box according to your own needs

8.text-align

Set text alignment
Not set up ：

text-align：center;

text-align：left;、text-align：right; It's similar to , But the alignment position is different .

9.:hover

When the mouse moves up, the set effect will appear
for example
(1) Shadow appears when moving up ：

box-shadow: 4px 4px 20px #000000;

(2) Darken as you move up

filter:brightness(60%);

(3) Float up

ransform: translate(0, -15px);

If the effect is not obvious, do not put the picture .

4 summary

Generally speaking, this week has been a busy one , Because it's near the end of the term , There is a lot of homework to do , Many courses have closing assignments , A hapless child busy on the run , There are thousands of words in the class ending homework , But at least there will be a ray of sunshine in the busy life , Although busy , But you can learn a lot from it , Including the assessment of the group , Let me know a lot of useful knowledge , Busy but full , I hope I can learn more useful knowledge in the future , Toward “ Brilliant ” Forward ！