Explore CSS Creating layouts

With the constant emphasis on the semantic importance of separating HTML elements and their performance, CSS plays an increasingly important role in the layout of HTML5 elements.

1. Positioning content

The simplest way to control content is through positioning, which allows you to change the layout of elements using your browser.

1.1 Setting the positioning type

The Position property sets the positioning method for the element.

The different values of the Position property specify the different elements to which the element is positioned. When you set an offset for an element using the top, bottom, left, and right properties, you are referring to the offset of the element specified with the Position property.

<!    DOCTYPE html>
In the above code, a small script is added to the page that can change the value of the Position property of the IMG element based on the button being pressed. This sets the left property to 150px and the top property to 5px, meaning that as long as the position value is not set to the STATIC,IMG element, it will be offset by 150 pixels along the horizontal axis and 15 pixels along the vertical axis. Shows the changes in position values from static to relative.


The relative value applies the top, bottom, left, and right properties to the element, repositioning the element relative to the position determined by the static value. As you can see, the value of the left property and the top property causes the IMG element to move to the right and down.

The absolute value locates the element based on the position of the nearest ancestor element that the position value is not static. In this example, there is no such element, i.e. the element is positioned relative to the body element, as shown in:


Note that if you scroll the browser page, the IMG element will move with the rest of the content. You can compare this to a fixed value, such as fixed value positioning effect:


With a fixed value, the element is positioned relative to the browser window. This means that the element always occupies the same position, regardless of whether the remaining content scrolls up or down.

1.2 Set the stacking order of elements

The Z-index property specifies the stacking order in which elements are displayed.

The value of the Z-index property is numeric and allows negative values to be taken. The smaller the value, the more back in the stacking order. This attribute will only come in handy if the elements overlap.

<!    DOCTYPE html>
In this example, two IMG elements with fixed positions are created, and their top and left values are set to overlap some of the images. The Z-index value for an IMG element with an ID value of apple is larger than the Z-index value of the banana element for the ID value, so the Apple image appears above the banana image.


The default value for the Z-index property is 0, so the browser displays the image on the P element by default.

2. Create a multi-column layout

Multi-column sex allows content to be laid out in multiple vertical columns, similar to the way newspapers are formatted.


<!    DOCTYPE html>

PS: Temporarily found IE, Edge, opera browser display effective, Firefox and Google do not support.

As you can see, the contents of the div element flow from one column to another, much like the layout in the newspaper. In this example, the float attribute is applied to the IMG element, so that the text content in the DIV element can be wrapped around the image in a smooth manner.

The Column-count property is used in the previous example to divide the page layout into three columns. If the window is resized, the browser adjusts its width to preserve the number of columns in the layout. Another way is to specify the column width.

<style type= "Text/css" >    p {        column-width:10em;        column-fill:balance;        Column-rule:medium solid black;        column-gap:1.5em;    }    img {        float:left;        Border:medium double black;        Background-color:lightgray;        padding:2px;        margin:2px;    } </style>
If you apply the Column-width property, the browser maintains the specified width by adding or removing the number of columns.


3. Create a flexible box layout

The Flexible box layout (also known as the Telescopic box) has been further enhanced in CSS3, adding a new value (Flexbox) to the display property and defining several other properties. Flexible layouts allow you to create mobile pages that are responsive to browser window adjustments. This is done by allocating unused space in the container block between the containing elements. The specification defines the following new properties for resilient layouts:

* Flex-align

* Flex-direction

* Flex-order

* Flex-pack

However, there are differences between the proposed specification and implementation, and the top defines the problem to be solved by the elastic box. The following code shows a simple layout with a problem.

<!    DOCTYPE html>
In the above code, the DIV element contains three P elements. It is easy to do this by displaying the P element in a horizontal row with the Float property.


The problem with using the elastic box here is to handle the space block on the right side of the P element on the page. There are many ways to solve this problem. In this example, the percent width can be used, but the flexible box solution is more elegant and the page looks much more liquid. The following table lists the three-webkit properties that implement the core functionality of the elastic box (for simplicity, the-webkit prefix is omitted from the table):


3.1 Creating a simple elastic box

You can use the Display property to create a flex box. The standard value is Flexbox, but you must use-webkit-box before standard completion and implementation. Use the Box-flex property to tell the browser how to allocate unused space between elements. The new value of the display property and the Box-flex property are shown in the following code:

<!    DOCTYPE html>
The display property is applied to the elastic box container. An elastic box container is an element that has extra space and you want to apply a resilient layout to the content in it. The Box-flex property is applied to the elements inside the elastic box container, telling the browser which elements are elastic when the size of the container changes. In this example, the P element with the ID value of second is selected.

PS: The float property was removed from the P element style declaration. A scalable element cannot contain floating elements.

You can see how the browser scales the size of the selected element:


3.2 Scaling multiple elements

Applying Box-flex tells the browser to scale the dimensions of multiple elements. The value you set determines the proportion of space the browser allocates. The CCS file that modifies the previous example is as follows:

<style type= "Text/css" >    p {        width:150px;        Border:medium double Green;        Background-color:lightgray;        margin:2px;    }    #container {display:-webkit-box;}    #first {-webkit-box-flex:3;}    #second {-webkit-box-flex:1;} </style>
This applies the Box-flex attribute to the P element with the ID value first. The value of the Box-flex property here is 3, meaning that the extra space the browser has for its division is three times times the P element with an ID value of second. When this type of scale is created, it refers to the scalability of the element. Just use this ratio to allocate extra space, or reduce the size of the element, rather than changing its preferred size. How to apply to the element when you can see the scale.


3.3 Handling Vertical Space

The Box-align property tells the browser how to handle extra vertical space. By default, elements are stretched vertically to fill the extra space. The above example is the case, the first two P element size is adjusted, the content below the empty space.


The following code shows that the element style changes to apply the Box-align property. Note that this property is applied to the scalable container, not to the content element.

p {    width:150px;    Border:medium double Green;    Background-color:lightgray;    margin:2px;} #container {    display:-webkit-box;    -webkit-box-direction:reverse;    -webkit-box-align:end;} #first {-webkit-box-flex:3;} #second {-webkit-box-flex:1;}
In this example, the end value is used, which means that the content element is placed along the bottom edge of the container element, and any extra space in the vertical direction is displayed above the content element. The rendering effect is as follows:


3.4 Processing Maximum size

The Flex box does not stretch more than the maximum size of the content element. If there is extra space, the browser stretches the element, knowing that the maximum allowable size is reached. The Box-pack property defines what should be done if the extra space is still not allocated when all the scalable elements can reach the maximum size.


Modify the CSS file for the previous example as follows:

p {    width:150px;    max-width:250px;    Border:medium double Green;    Background-color:lightgray;    margin:2px;} #container {    display:-webkit-box;    -webkit-box-direction:reverse;    -webkit-box-align:end;    -webkit-box-pack:justify;} #first {-webkit-box-flex:3;} #second {-webkit-box-flex:1;}
The effect of this property is as shown. After the scalable P element reaches its maximum width, the browser begins to allocate extra space between elements. Note that the extra space is only allocated between elements and elements, before the first element or after the last element is not assigned.


4. Create a table layout

The reason why using table elements is so common is that it solves a common layout problem: Creating a simple grid that hosts content. Fortunately, we can use the CCS table layout feature to set the page layout, much like using the table element, but without breaking the semantic importance. Create a CSS table layout using the Display property. The following table lists the values associated with this feature. Each value in the table corresponds to an HTML element.


The usage of several of these values is shown in the following code:

<!    DOCTYPE html>
The effects of these values are as follows:


One advantage of the CSS table layout is that the cell size is automatically resized, so the row is determined by the highest-content cell in the row, and the column is determined by the widest cell in the column, as can be seen.