MENU service case
Website construction website design Beijing website construction high-end website production company Shangpin China
We create by embracing change
360 ° brand value__
simplified Chinese character
Simplified Chinese English

Shangpin China Joins Hands with Beisheng Internet to Create a New Chapter in Website Construction

Type: Shangpin Dynamic Learn more

CSS Layout Model Box

Source: Shangpin China | Type: website encyclopedia | Time: July 27, 2015
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.


Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
TAG label:

What if your website can increase the number of conversions and improve customer satisfaction?

Make an appointment with a professional consultant to communicate!

* Shangpin professional consultant will contact you as soon as possible

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]

Communicate with professional consultants now!

  • National Service Hotline

    400-700-4979

  • Beijing Service Hotline

    010-60259772

Please be assured to fill in the information protection
Online consultation

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]