CSS tips: Learn about CSS page layouts and loading processes

If you develop web-related applications or websites, you must know the importance of CSS for page layouts. In this CSS tip we'll introduce the page loading process to help you better implement the page layout.

Introduced

Before we begin the formal introduction of the page process, we need to learn a few different types of HTML elements and how they are displayed by default. Here we mainly focus on two types of elements:

1.block

2.inline

If you care about HTML5, you should know that there are a few new elements in HTML5, such as Section,article, but still follow the display type we introduced here.

Elements of the inline type include: Img,span,a, which is used to define text or data, and is usually displayed "on the same line". More specifically, if many of the inline types of elements are on the same line, they will appear in the same row until the width is not enough, and then go to the next line. For example, the following code:

<a href= "http://gbtags.com" >gbtags.com</a> is website for <span>geeks</span>

Elements of the opposite block type, such as Div,p or HTML5, and the new elements section,article and article are displayed differently than the inline type. They are typically structured elements that can contain elements of the inline type. The browser handles the elements of the block type, adding lines before and after the elements, so you can see that they are all displayed independently. Of course, if you modify its default display type of inline, it will display according to the inline element's display.

Style CSS

Often we use CSS to control the display of elements:

sometag{

Display:inline; /* Of course you can also set the properties for Block,none and so on.

}

Although we specify the display type in the above attribute, it also means that other related styles, for example, you can specify the width and height of the element with the display type block, but the inline type cannot be specified. Padding (inner margin) and margin (outer margin) can be applied to elements displayed by inline, but they are not affected by the elements that are contained. Take a look at the following examples:

View Online debugging

Some other ways of showing

In addition to the inline and block type display, there is also a inline-block display. The following figure:

It appears in the same way as inline, but its associated attributes, such as width, height, and padding/margin, are governed by the rules of the block display type. Inline-block can help us achieve the effect of float-like elements, but we also have our own problems.

Other properties such as List-item, as the name suggests, appear in the same way as list elements.

<ul>

<li> element 1</li>

<li> element 2</li>

</ul>

Finally, there is an element to mention that is "none", this property allows the element to not be displayed, and does not occupy any document space. Notice the difference with the "hidden" attribute.

Loading process for normal document

So what is the normal loading process of the browser? Basically the browser displays the content in the order in which it is parsed, the top is loaded first, and then the following content is loaded. When you start to do web design, you may not care about the normal document loading process, but only a variety of different fancy techniques, if you can correctly understand the document loading, for better help you understand the web design is absolutely good for no harm.

Do an exercise!

Here we will make a simple contact to help you consolidate your study, here we use HTML5 Shiv to help us support HTML5 tag, use Placekitten image placeholder application to generate pictures.

The HTML frame code is as follows:

<div class= "Container" >

<figure class= "Photogallery" >

</figure>

<article>

<p> If you like cats, come and see these cute little lives together! </p>

</article>

</div>

<footer>

<section> Welcome to <a href= "http://gbtags.com" >gbtags.com</a></section>

</footer>

CSS Layout code:

body{

font-size:12px;

font-family:arial;

}

. container {

width:85%;

margin:0 Auto;

Background: #f2f2f2;

}

Figure img {

padding-left:10px;

}

H1 {

Font-family:verdana, Geneva, Arial, Helvetica, Sans-serif;

Color: #707070;

padding:10px;

font-size:14px;

}

Article {

Background: #505050;

Color: #f2f2f2;

padding:10px;

}

footer{

width:85%;

margin:0 Auto;

}

section{

padding:20px 0;

}

Summarize

Hope that through the study of this article, we can better understand the document loading and layout, if you have any questions or suggestions, please give us a message, thank you!