Beef Brisket Release System CSS Box Model Basics_html/css_WEB-ITnose

The box model is a very important concept when controlling the page with CSS. The box model is used throughout the entire brisket publishing system. Only by mastering the box model and the usage of each element in it can we truly control each element on the page. The elements on the page can be regarded as a box, and these boxes will also affect each other.

1. Internal structure of the box

First, let’s look at an example. Suppose there are four paintings on the wall, arranged as shown in the figure. For each painting, there is a border; in each frame, there is a certain distance between the painting and the border, which is called padding. There is a little distance between the pictures, a margin.

Not just photo frames, we have many such examples in life, such as computers, windows Etc., these rectangular objects can be called "Boxes".

In the page layout, in order to organize the various parts reasonably, the box model is introduced. In CSS, the box model consists of four parts: content, border, padding and margin, as shown in the figure:

In In CSS, you can control the box by setting the width and height and the size of each part. Only by making good use of these properties can you achieve the ideal layout effect. This is something I understand deeply in the project. Sometimes even a single pixel cannot be wrong, and it can be said that a slight difference can make a huge difference.

2. Attribute settings

1) border

The main attributes of border There are three, color (color), width (thickness) and style (style). Through the cooperation of three attributes, border setting can achieve good results. When using CSS to set borders, you can use border-width, border-color and border-style to set them respectively.

*border-width sets the thickness: thin (fine), medium (moderate), thick (thick) and (specific value), which are also the most commonly used in our system, such as border- width: 4px;

*style Set the border style: none (unformatted), hidden (hidden), dotted (dotted line), dash, solid, double, etc.

*color color setting: statement border-color: red;

2) padding

Used to control the distance between content and margin, similar to the border.

Note: padding can set 1, 2, 3 or 4 attributes

One: the top, bottom, left and right paddings all have this value

Two: the former is the top and bottom two padding values, the latter is the value of the left and right padding

Three: the first one is the upper padding value, the second one is the left and right padding value, and the third one is the lower padding value

Four: clockwise, one for the top, right, bottom and left padding values ​​

3) margin

The method of setting the margin attribute value is roughly the same as that of padding, which will not be described again

The box model is the core content of CSS, which requires us to have a firm grasp. Only by mastering these skillfully Only with basic knowledge can you design an ideal page. This knowledge requires us to be proficient and apply it in practice. When developing the brisket news release system, there is no need to completely follow the format in the video and create your own release system.