CSS layout model box_Shang ping China focuses on high quality website construction - 上海1314龙凤鲜花坊_上海419贵族宝贝

CSS layout is a new layout method, which is also called CSS+DIV (actually CSS+XHTML) layout. Its biggest advantage is to use CSS to Website Design After adding positioning attributes to the block objects of, and converting them into AP elements, you can place the objects anywhere on the web page, and you can set the stacking order of these block objects. In this way, every image, text and table of the web page can be added to the block objects defined by CSS to achieve flexible and diversified layout The AP elements defined by CSS can also be combined with JavaScript and other scripting languages to produce various dynamic effects.

Css Box Model is a model used to describe block objects in CSS. Through this model, various attributes of CSS block objects can be vividly displayed to help web designers understand the principles of CSS block layout. Box model is the basis of CSS layout.

1. Structure of box model

In CSS, all block objects are treated as a rectangular box. All position related attributes of the rectangular box are considered as part of the box model. The structure of the box model is shown in Figure 4-5.

The block objects defined by CSS include four parts: boundary area, border, filled area and content. CSS can be used to define the size of these areas without affecting the content of the block object. In the web page, the standard CSS block object height calculation formula is as follows.

Structure of box model

The standard formula for calculating the width of Css blocky objects is as follows.

Css box model

After understanding the calculation methods of the height and width of the block objects of the web page, you can define the arrangement of these objects in the web page according to these methods.

2. Boundary

In Css, boundaries are also called external patches. To define the boundary of a block object, you need to use the composite attribute margin and its four sub attributes, as shown in Table 4-25.

margin

The margin attribute without compound attribute can also be used to set the boundary value of four sides for web page objects. The method is to set multiple attribute values for the margin attribute. When two attribute values are set for the margin attribute, the first attribute value defines the top and bottom boundaries of the Web page object, while the second attribute value defines the left and right boundaries of the Web page object. The code is shown below.

When three attribute values are set for the margin attribute, the first attribute value defines the boundary at the top of the Web page object, the three attribute values define the boundary at the left and right sides of the Web page object, and the third attribute value defines the boundary at the bottom of the Web page object. The code is shown below.

When four attribute values are set for the margin attribute, the four attribute values define the boundary widths of the top, right, bottom, and left sides of the page object, respectively. The code is shown below.

3. Filling

In Css, filling is also called internal patch. To define the filling of block objects, you need to use the compound attribute padding and its four sub attributes, as shown in Table 4-26.

Paddings Properties

The padding attribute without compound attribute can also be used to set four different padding values for web page objects. The method is to set multiple attribute values for the padding attribute. When two attribute values are set for the padding attribute, the first attribute value defines the padding at the top and bottom of the web page object, while the second attribute value defines the padding at the left and right of the web page object. The code is shown below.

When three attribute values are set for the margin attribute, the first attribute value defines the filling at the top of the web page object, the second attribute value defines the filling at the left and right sides of the web page object, and the third attribute value defines the filling at the bottom of the web page object. The code is shown below.

When four attribute values are set for the margin attribute, the four attribute values define the filling width of the top, right, bottom and left of the web page object respectively. The code is shown below.

CSS Layout Model Box

Date：2016-07-27 Source: Shangpin China Type: website encyclopedia
Word Size： small medium big

+86 10-60259772