“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”
Part I: Box-Model
- The purpose of learning the box model:
Each element (tag) in Html has its own size (floor area). Knowing the size of each element helps us layout the page better.
One of the main ways of HTML layout is through the characteristics of the box model.Copy the code- What is a box model?
You can think of each element on a page as a box, which is an abstract concept. 3. Composition of the box model: The box model consists of the content (the size area specified by width and height), the inner margin (the gap between the content area and the outer box), and the border and margin (the distance between the current element and other elements). 4. Understanding diagram of box Model:
(1) Frame of box model
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The border of the box model</title>
<style>
#div1{
width: 300px;
height: 300px;
/* Composite style order variable */
/*1px: width of the border; Solid: border style; Red: border color */
border:solid 1px red;
}
#div2{
width: 300px;
height: 300px;
/* Sets the border property separately */
/* Width of the border */
border-width: 5px;
/* The border color */
border-color: #623cff;
/* Border style */
/*solid: solid; Bootstrap: dashed line; A double line; Dotted line */
border-style: solid;
}
#div3{
width: 300px;
height: 300px;
/* Set the border part properties, note that the compound style is used */
/* Sets the top border */
/* Border-top-width :1px; border-top-color:red; border-top-style:solid; * /
border-top:1px solid red;
/* Sets the right border */
border-right: 2px dashed yellow;
/* Sets the lower border */
border-bottom: 4px dotted blue;
/* Sets the left border */
border-left: 8px double pink;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<center><font size=2>(I run a wechat official account: Lonely)</font></center>
</body>
</html>
Copy the codeEffect display:
(2) Inside margin of box model
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inside margin of box model</title>
<style>
#div1{
width: 300px;
height: 300px;
/* Set the box border */ with a composite style
border: 1px solid red;
/* Set the box margin style one by one note: set the margin can not set negative value!! * /
/* When the inner margin is set, the border is automatically stretched to fit the set inner margin */
/* Upper inner margin */
padding-top: 50px;
/* Lower inner margin */
padding-bottom: 50px;
/* Left inner margin */
padding-left: 50px;
/* Right inner margin */
padding-right: 50px;
}
.div2{
width: 300px;
height: 300px;
/* Set the box border */ with a composite style
border: 1px solid red;
/* Compound style sets the box margins */
/* When only 1 value is set, the upper, lower, left, and right margins are changed to the set value; When two values are set, the first value is upper and lower inner margin, and the second value is left and right inner margin; When you set three values, the first value is the top margin, the second value is the left and right margin, and the third value is the bottom margin; When setting 4 values, top right, bottom left */
padding: 50px;
}
</style>
</head>
<body>
<div id="div1">agghh</div>
<div class="div2">agghh</div>
</body>
</html>
Copy the codeEffect display:
(3) Outer margin of box model
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outside margin of box model</title>
<style>
.div1{
width: 300px;
height: 300px;
/* Set the border of the box model with a composite style */
border: 1px solid red;
/* This converts block elements or inline elements to inline block elements */
/* The reason for the conversion is that the block div will have a single line and the right margin will not be observed; * /
/* If you set an inline element, the width and height of the inline element cannot be set. So: convert to the inline block element */
/* This will solve all the problems!! * /
display: inline-block;
/* Block elements inside the line: 1. Set width and height effectively * 2. When there are multiple inline block elements, the default is to sort from left to right */
/* Note: if there are no sibling elements when setting margins, such as div above class div1 in this case, then the top and right borders of the box model are appropriate for the browser */
/* Set the margins one by one. Note: The margins can be negative. * /
/* Upper margin */
margin-top: 50px;
/* Lower margin */
margin-bottom: 50px;
/* Left margin */
margin-left: 50px;
/* Right margin */
margin-right: 50px;
}
#div2{
width: 300px;
height: 300px;
/* Set the border of the box model with a composite style */
border: 1px solid blue;
display: inline-block;
/* Set the margin of the box model with a composite style */
/* A value: the upper, lower, left, and right margins are the same; * /
/* Two values, the first value is the upper and lower margins, the second value is the left and right margins; * /
/* Three values: up, left, and right; * /
/* Four values: top right, bottom left */
margin: 50px;
}
/* extension: */
span{
/* Convert inline elements to block elements so that the width and height can be set! * /
display: block;
}
</style>
</head>
<body>
<div class="div1"></div>
<div id="div2"></div>
<span>I'm an inline tag</span>
<center><font size=2>(I run a wechat official account: Lonely)</font></center>
</body>
</html>
Copy the codeEffect display:
Note:
The total width of the element: width + (padding)-left) + (padding-right) + (border-left)
+ (border-right) + (margin-left) + (margin-rightTotal height of the element: Height + (padding)-top) + (padding-bottom) + (border-top)
+ (border-bottom) + (margin-top) + (margin-bottom)
Copy the code🔆 In The End!
| Start now, stick to it, a little progress a day, in the near future, you will thank you for your efforts! |
|---|
This blogger will continue to update the basic column of crawler and crawler combat column, carefully read this article friends, you can like the collection and comment on your feelings after reading. And can follow this blogger, read more crawler in the days ahead!
If there are mistakes or inappropriate words can be pointed out in the comment area, thank you! If reprint this article please contact me for my consent, and mark the source and the name of the blogger, thank you!