CSS using box model examples to explain the analysis

The box is the basic concept in CSS, and we need to use it to configure the appearance of the elements and the overall layout of the document.

1. Apply padding to elements

The app padding adds white space between the element content and the margins. We can set the padding separately for each boundary of the content box, or use the padding shorthand property to set all values in a declaration.

If you specify an inner margin using a percentage value, the percentage is always related to the width of the root containing block, and the height is not taken into account. The following code shows how to apply an inner margin to an element.

<! DOCTYPE html>

In the code, a different padding is applied to each edge of the box, and the effect is shown below. In addition, the Background-clip property is set so that the inner margin area does not display a background color, which can highlight the effect of the padding.


You can also use the padding shorthand property to set the padding for four edges in a declaration. You can specify a 1~4 value for this property. If you specify 4 values, they represent the padding for the top, right, bottom, and left sides, respectively. If you omit a value, the best collocation scenario is as follows: omit the left value, default to the right value, omit the bottom edge value, and use the top edge value by default. If you give only one value, the padding for the four edges is the value.

The following code listing shows how to use the padding shorthand property. This example also adds a rounded border, showing how to use paddding to ensure that the border is not above the element content.

<! DOCTYPE html>

The effect, as shown, shows how the browser displays the rounded borders and padding specified in the code.


If you do not set the padding, the border is drawn on the text. Setting the padding ensures that enough space is left between the content and the border, and this does not happen.


2. Apply margins for elements

The margin is an empty area between the element border and everything around it on the page. The things around it include other elements and its parent elements.


Similar to the Padding property, even if the padding is applied to the top and bottom edges, the percent value is related to the width of the containing block. The following code listing shows how to add an outer margin for an element:

<! DOCTYPE html>

In the code, the following two IMG elements apply a 4-pixel margin for their top and bottom edges, and a 20-pixel margin applied to the left and right. You can see from the bottom margin an empty area built around the element, where the two IMG elements above and the two IMG elements below show the IMG element before and after the margin is set.


Margins are sometimes not displayed, even if a value for a margin property is set. For example, the margins of the top and bottom edges are not displayed when the margin is applied to an element of the display property that has the value set to inline.


3. Dimensions of the control element

The browser sets the dimensions of the elements based on the flow of content on the page. There are a few detailed rules that the browser must follow when assigning dimensions. These behaviors can be overridden by using dimension-related properties.


The default value for the first three properties is auto, which means that the browser sets the width and height of the element for us. You can also specify dimensions explicitly with length values and percent values. The percent value is calculated based on the width of the containing block (the height of the processing element is also based on this width). The following code listing shows how to set the dimensions for an element.

<! DOCTYPE html>

There are three key elements in the sample code above, and a P element contains two IMG elements. The results are shown below, showing how the browser displays these elements.


The P element is the child element of the BODY element. When the width of the P element is expressed as 75%, it means telling the browser to set the width of p to 75% of the width of the containing block (here is the body content box), regardless of its specific value. If the user adjusts the browser window, the BODY element is adjusted accordingly to ensure that the width of the P element is always 75% of the width of the body content box.


3.1 Set a certain Size box

The two IMG elements in the previous example set the same height value (50%), but the height of the two pictures does not look the same on the screen. This is because using the Box-sizing property changes the area in which one element applies a dimension attribute.

By default, width and height are required to be calculated before they can be applied to the content box of the element. The point here is that if the height attribute of the element is set to 100px, then the true height on the screen is 100px, which is also the value of the padding, border, and margin of the top and bottom edges. The Box-sizing property allows the specified dimension style to be applied to the specific area of the element box, which means that you do not need to calculate some values yourself.


3.2 Setting the minimum and maximum dimensions

You can use the minimum and maximum correlation properties to set certain limits on the size of the browser resizing elements. This gives the browser a certain degree of autonomy in how to apply sizing attributes.

<! DOCTYPE html>

In the code, the Mix-width and Max-width properties are applied to an IMG element, and the incident width is set to 50% of the containing block. This allows the browser to have the flexibility to adjust the image size so that it maintains a 50% relationship within the maximum size and minimum size defined in the code. This flexibility is used by the browser to preserve the aspect ratio of the image, as shown in the following:


PS: Browser support for box-sizing properties varies.


4. Handling Overflow Content

If you try to change the size of an element, you will soon reach a point where the content is too large to be fully displayed in the element's contents box. At this point, the default processing is content overflow, and continue to display. The following code listing creates a fixed-size element that cannot be displayed because the size is too small.

<! DOCTYPE html>

The values for the width and Height properties of the P element are specified in the code, and the final display appears in the browser as shown in:


You can use the overflow property to change this behavior, and the following table lists the related overflow properties.



The overflow-x and overflow-y attribute divisions set the horizontal and vertical overflow modes, and the overflow shorthand property declares an overflow in two directions in a declaration. The following table shows the possible values for these three properties.



The following code shows the use of overflow properties:

<! DOCTYPE html>


5. Controlling the visibility of elements

You can use the Visibility property to control the visibility of an element. This property is used with JavaScript to create some more complex effects. The values are as follows:


The following code shows how to use JavaScript and several button elements to change the visibility of an element.

<!    DOCTYPE html>


Collapse values can only be applied to table-related elements, such as TR and TD.


6. Set the box type of the element

The Display property provides a way to change the element box type, which would change the way elements are laid out on the page. The following table lists the allowable values for the display property.



6.1 Understanding block-level elements

Setting the display property to the block value creates a block-level element. Block-level elements differ in the vertical direction from the surrounding elements. This effect can also be achieved by placing a newline character before or after the element, creating a split feeling between the element and the surrounding elements, just like the paragraph in the text. The P element represents a paragraph, and its default style convention includes the display property taking the block value. However, the block value can be applied to all elements, and its usage is shown in the following code:

<! DOCTYPE html>

You can see whether the display property of the span element is set to the difference of the block value.



6.2 Understanding Inline elements

Setting the display property to an inline value creates an in-line element that is visually indistinguishable from the surrounding content.

<! DOCTYPE html>

In the preceding code, the inline value is used for both the P element and the span element, and the effect after applying the style is shown below: The text in the P element and the span element is not separated from the remaining text and is displayed together.


When using inline values, the browser ignores certain values, such as width, height, and margin. In the example code above, the values of the three properties defined for the span element are not applied to the page layout.


6.3 Understanding inline-block-level elements

Setting the Display property to a Inline-block value creates an element whose box has a mixture of block and inline attributes. The box as a whole is displayed as inline elements, which means that the element and surrounding content are displayed vertically, without distinction. But the inside of the box is displayed as a block-level element, so that the width, height, and margin properties can be applied to the box.

<! DOCTYPE html>



6.4 Understanding Insert Elements

Setting the Display property to run-in value creates an element whose box type depends on the surrounding element.

The following code shows an insert element for a block-level element of an adjacent sibling element:

<! DOCTYPE html>


The following code shows an insertion element of an adjacent sibling element as an inline element, modifying the CSS Code of P above:


p {display:inline;}



6.5 Hidden elements

Setting the Display property to the None value tells the browser not to create any type of box for the element, that is, the element has no descendant elements. At this point the element does not occupy any space in the page layout.


7. Create a floating box

You can use the Float property to create a floating box, which moves the left or right edge of an element to the boundary of the containing block or another floating box.


<!    DOCTYPE html>



Block floating element Stacking

If more than one floating element is set, by default, they are stacked next to each other. Use the clear property to prevent this from happening. The Clear property can specify one edit for a floating element, or two edits cannot be next to another floating element.


<!    DOCTYPE html>

The code example here is a simple extension to the previous example, just adding a new style that clears the floating elements of the left border for the second P element. As you can see from the following, this setting causes a change in the layout of the page. (now two elements are floating on the left side of the containing block)


The left edge of the second P element is not allowed to be next to another floating element, so the browser will have this element below the page. The right boundary of the element is not clear, that is, if you set the float property of the two P elements to correct, they will still be next to each other on the page.

Above this CSS use box model example analysis is small series to share all the content, I hope to give you a reference, but also hope that we have a lot of support topic.alibabacloud.com.