Common attributes of front-end design, CSS box model, powerful page layout tool, and css Tool

Common attributes of front-end design, CSS box model, powerful page layout tool, and css Tool

When CSS and HTML are combined to layout pages, a group of CSS styles called "box attributes" are widely used. I believe that those who often write pages will be familiar with the box attributes. During the development of CSS technology, the box attributes have also been improved many times. Today, I will explain how to use CSS styles in the box attributes.

Undertaking articles:Create a navigation bar for comprehensive useCSSAttribute, code no more than 30Line

Technical Level: elementary | suitable for beginners of front-end development.

If you want to add this article to your favorites, you can also pay attention to the "web Front-end edu" number, because these articles are serialized and summarized systematically. If you read it carefully, you will surely learn useful knowledge for you.

The box attribute mainly involves three types of CSS attributes:

• Padding

• Margin

• Border

I,CSSIn the box concept:

CSS considers all elements in HTML as a "box" and divides the "box" into three components, the three components are "fill", "border", and "border ". As the name suggests, the main function of a box is to store things. CSS means to regard each HTML Tag pair as a container, the text, images, lists, tables, and forms stored in the container are marked as contents in the container.

Web Front-end/html5 Learning Group: 250777811

A box containing Earth

CSS technology clearly defines the three components of the box:

1. Fill: the distance between the box border and the box content.

2. Boundary: the distance between a box and a box.

3. Border: the part between the fill and the border.

CSS Box Model

In the three components of the box, "fill" and "border" only provide the relevant distance attributes, while "border" provides the relevant distance attributes, color attributes, and style attributes.

2. Adjust the filling distance of the box:

CSS technology uses the padding series attributes to adjust the padding distance of the box.

Web Front-end/html5 Learning Group: 250777811

CSS technology uses padding series attributes to adjust the padding distance of a box

The value of the padding attribute is four values, which are arranged in the order of "top, right, bottom, and left" and separated by spaces.

Format of the padding attribute:

padding:top right bottom left;

Value of the padding attribute:

• Length Value in units.

• Auto

• Percentage

The padding property also derives the following four sub-attributes, which are used to adjust the individual fill distance in four directions:

• Padding-top: Set the padding distance on the top of the box.

• Padding-right: Set the padding distance on the right side of the box.

• Padding-bottom: Set the padding distance at the bottom of the box.

• Padding-left: Set the padding distance on the left side of the box.

Note: after the box is filled with numeric values, you must modify the width and height of the box to ensure that the box size does not change.

• Actual height of the box = expected height of the box-padding distance on the top of the box-padding distance on the bottom of the box

• Actual width of the box = expected width of the box-left padding distance of the box-Right padding distance of the box

For example, you want to create a box with a width of 500 and a height of 300. At the same time, the padding distance on the top is 10 pixels, the padding distance on the left is 20 pixels, And the padding on the right and bottom is not set. The padding attribute value is as follows:

padding:10px 0 0 20px;

Therefore, calculate the actual width and height of the box:

1. Actual height of the box = 300px-10px-0px = 290px

2. Actual box width = 500px-20px-0px = 480px

Therefore, the CSS code of the box should be set as follows:

width:480px; height:290px;
padding:10px 0 0 20px;

Of course, people with development experience must know that CSS3 provides a property named box-sizing, which avoids complicated operations such as padding subtraction. In subsequent articles, I will give you a comprehensive introduction to the use of CSS3 technology.

3. Adjust the boundary distance of the box:

CSS technology uses the margin series attributes to adjust the boundary distance of the box.

CSS technology uses the margin series attributes to adjust the boundary distance of a box

The value of the margin attribute is four values, which are arranged in the order of "top, right, bottom, and left" and separated by spaces.

Format of the margin attribute:

margin:top right bottom left;

Value of the margin attribute:

• Length value with Unit (negative value can be obtained ).

• Auto

• Percentage

The margin property also derives the following four sub-attributes used to adjust the Independent Boundary distance in four directions:

• Margin-top: Set the distance between the boundary at the top of the box.

• Margin-right: Set the distance between the border on the right of the box.

• Margin-bottom: Specifies the distance between the boundary at the bottom of the box.

• Margin-left: Set the distance between the left boundary of the box.

4. Adjust the box border

CSS technology uses border series attributes to adjust the border of the box.

Web Front-end/html5 Learning Group: 250777811

CSS technology uses border series attributes to adjust the border of a box

1. Adjust the Border width of the box:

• Border-top-width: Specifies the width of the border at the top of the box.

• Border-right-width: Specifies the width of the border on the right of the box.

• Border-bottom-width: Specifies the width of the border at the bottom of the box.

• Border-left-width: Specifies the width of the border on the left of the box.

• Border-width: Specifies the width of the border in four directions.

Use format of the border-width attribute:

border-width:top right bottom left;

2. Adjust the color of the box border:

• Border-top-color: Set the color of the border at the top of the box.

• Border-right-color: Set the color of the border on the right of the box.

• Border-bottom-color to set the border color at the bottom of the box.

• Border-left-color: Set the color of the border on the left of the box.

• Border-color, which is used to set the border color of the box in four directions.

Use format of the border-color attribute:

border-color:top right bottom left;

3. Adjust the style of the box border:

• Border-top-style: Set the style of the border at the top of the box.

• Border-right-style: Set the style of the border on the right of the box.

• Border-bottom-style: Set the border style at the bottom of the box.

• Border-left-style: Set the style of the border on the left side of the box.

• Border-style: Set the border style of the box in four directions.

Use format of the border-style attribute:

border-style:top right bottom left;

The border-style attribute has the following values:

• None. The box has no borders.

• Solid. The box border is solid.

• Dashed. The box border is dotted.

• Dotted. The box border is a dotted border.

• Double, the box border is a double solid border.

• Groove, the box border is groove.

• Ridge, the box border is a ridge.

• Inset, the box border is concave.

• Outset, the box border is protruding.

4. Set the border effect at one position of the box:

CSS also provides attributes for setting the border effect at a single position in the box.

• Border-top: Set the effect of the border on the top of the box.

• Border-right: Set the effect of the border on the right of the box.

• Border-bottom: Set the border effect at the bottom of the box.

• Border-left, set the effect of the border on the left side of the box.

Format:

border-top:style width color;

Example: border-top: solid 1px # ff0000;

5. Set all borders of the box to have the same effect:

CSS technology also provides attributes that can be used to adjust all borders of a box with the same appearance.

• Border, set the four sides of the box to have the border effect.

Format:

Format:

border:style width color;

Example: border: solid 1px # ff0000;

Web Front-end/html5 Learning Group: 250777811

Welcome to follow this public account → [web Front-end EDU] and learn the front-end together! You are welcome to leave a message to discuss and forward it together.