This section focuses on

  • Element classification
  • display
  • Introduction to box model
  • Common properties of the box model
1. Element classification

Before we go into the CSS box model and layout, we need to know a few things ahead of time to store them for later. In CSS, tag elements in HTML are roughly divided into three different types: block elements, inline elements (also known as inline elements), and inline block elements.

There are hundreds of HTML tags, we looked at about 30 tags, and many of the large sites that you see we can use these tags to structure our site. So there are so many labels, obviously not regular, so in this class we are going to classify these commonly used labels. After understanding the characteristics of each type of tag, we can better layout the site.

Common block elements are:

<div>,<p>,<h1>~<h6>,<ol>,<ul>,<li>,<dl>,<dt>,<table>,<form>
Copy the code

Common inline elements are

<a>,<span>,<i>,<em>,<strong>,<label>
Copy the code

Common inline block elements are

<input>,<img>
Copy the code

So after classifying the commonly used tags in the web page, what are the characteristics of these three types of tags?

Label category The characteristics of
Block elements 1. Occupy the entire line by yourself

2. You can set the width and height
Inline element 1. All inline elements are displayed on a single line

2. Do not set the width and height
Inline block elements 1. Display information in one line

2. You can set the width and height

Note: The feature of tag classification is to classify the existing commonly used HTML tags, so we can use the display attribute to force the modification of these features in the later learning process.

2. Introduction of box model

In CSS, the term “CSS model” is used for design and layout. Then all HTML elements can be viewed as boxes. The CSS box model is essentially a box that represents the surrounding HTML elements, including: margins, borders, padding, and actual content.

For example, an old classmate, whom I haven’t seen for several years, came to visit me on Mid-Autumn Festival this year. A big gift box. What if I open it? Oh, my god, just a moon cake. As is shown in

So if we think of the box as an element in a web page, like div.

We will observe the following characteristics:

  1. The five kernel can be seen as the content of the div, which can be seen as text, image, or another tag element, and should have a width and height.
  2. The distance between the moon cake box and the moon cake is called the padding of the box model in the style sheet.
  3. Look at the figure below

The distance from one box to another is called the margin of the box model and is called margin in the stylesheet

4. Keep watching

The red area that encloses the box is called a border in the box model and a border in the style sheet.

What does the box model look like in CSS? As shown below. So next time we’ll go through the use of each of these attributes.

3. Common attributes of the box model

After introducing the box model last time, we know that there are four properties in the box model: width and height of content, inside margins, margins, and borders.

Width and height of content

It should be noted that the width and height of the box model are not the same as the width and height of the object we usually say. CSS defines width and height, which refers to the width and height occupied by the object inside the box, and CSS refers to the content range filled with.

For example: I want to have a 200px by 200px div box with a red background.

The code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Width and height of content</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
             background-color: red;
		}
	</style>
</head>
<body>
	
	<div class="box"></div>
</body>
</html>
Copy the code

Effect display:

So how can I see the size of the box model? It’s as simple as right-clicking the Review element on the page, or the F12 shortcut. Open the console. View the effect:

Effect of box model:

padding

The inside margin represents the distance between the box’s border and the content.

The code is as follows:

.box{
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 20px;
}
Copy the code

It is obvious that the overall width of the box has increased, which means that after setting the padding, the padding area has the background color. And the background color is the same as the content color.

The setting of the padding

Padding has four directions, each describing the padding in four directions.

  • Each property sets the padding in a different direction
padding-top:10px;
padding-right:3px;
padding-bottom:50px;
padding-left:70px;
Copy the code

Effect display:

  • Composite properties, multiple properties separated by Spaces.
/* top, right, bottom, left */
padding: 20px 30px 40px 50px ;

/* up left right down */
padding: 20px 30px 40px;

/* up, down, left, and right */
padding: 20px 30px;
            
/* up, down, left, and right */
padding: 20px;
Copy the code

Demonstrate separately and see the corresponding effect.

A border

The border of the box model is called a border in the style sheet. We know, we all use phones, we all have cases. The style, color, thickness and so on of the phone case are the form of the case. Similarly, the border of a box model has three elements: thickness, linear style, and color.

For example, the code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>The use of the border</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			/*1 pixel solid line with red border */
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>
Copy the code

Write border according to three elements

border-width:3px;
border-style:solid;
border-color:red;
/* Border :3px solid red; * /

/* You can also set the linear style colors for each of the four sides of the border, just like the four sides of the padding. * /
/* around 5px 10px*/
border-width:5px 10px;
/* Top: realize right: dotted bottom: double line left: dashed line */
border-style: solid dotted double dashed;
/* Up: red left: green down: yellow */
border-color: red green yellow;
Copy the code

Effect display:

By direction

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
Copy the code

Bordr: 10px solid red; bordr: 10px solid red;

You can also abbreviate:

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
Copy the code

Clear the default border

To clear the default border for some tags, we use border: None; Or border: 0;

For example, the input field has a default border. If we want to make a nice input field, we first need to clear the default border, and then we can change it according to the requirements, and we will notice that the input field has a blue line when the focus is selected. Then we need to clear it too, using the property Outline: None; .

The code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Border cleared by default</title>
	<style type="text/css">
		input{
			border: none;
			outline: none;
			border:1px solid red;		
		}
	</style>
</head>
<body>
	<input type="text" name="">
</body>
</html>
Copy the code
From the outside

It is called margin in the box model and margin in the style sheet. Represents the distance from one box to another. Since it’s the distance between the two, it’s going to produce the distance between the horizontal and the distance between the vertical. In the same case, the margin goes in four directions, just like the padding.

Horizontal margins

Code demo:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Horizontal margin</title>
	<style type="text/css">
		.box_l{
			background-color: green;
			margin-right: 20px;
		}
		.box_r{
			background-color: red;
			margin-left: 30px;
		}
	</style>
</head>
<body>
	<span class="box_l">The left box</span><span class="box_r">The right box</span>
</body>
</html>
Copy the code

Effect display:

Vertical margin

The margins of the box model do not have problems in the horizontal direction, but in the vertical direction, “margins merge” phenomenon occurs.

Here’s an example:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Margins merge vertically</title>
	<style type="text/css">
		 .father{
	            width: 400px;
	            border: 1px solid gray;
	        }
	        .box1{
	            width: 300px;
	            height: 200px;
	            background-color: red;
	        }
	        .box2{
	            width: 400px;
	            height: 300px;
	            background-color: green;
	        }
	</style>
</head>
<body>
	<div class="father">
	    <div class="box1"></div>        
	    <div class="box2"></div>
	</div>
</body>
</html>
Copy the code

Effect display:

If you set the red box to margin-bottom:30px;

Effect display:

Margin-top :50px;

Effect display:

That’s what we call margin merging.

What is a margin merge? In some literature this phenomenon is called collapse problem. Only in the vertical direction, when two boxes of the same level set margin in the vertical direction, then the larger will prevail.

In web layout, the problem of margin merging can also occur frequently. How can we avoid this problem?

Very simple, if we want to make space between the upper and lower boxes, we just need to set one direction of one box. There is no need to touch the collapse of the margin, but also to find a solution to the problem, the loss is not worth the gain.