CSS tips: Understanding CSS page layout and loading processes

 

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

Introduction

Before we begin to formally introduce the page process, we need to briefly understand several different types of html elements and their default display methods. Here we mainly introduce two types of elements:

Block

Inline

If you are concerned about html5, you should know that HTML5 also contains several new elements, such as section and article, but they still follow the display type described here.

Inline elements include img, span, and a. They are used to define text or data. The display mode is usually "the same row ". More specifically, if many inline elements are in the same row, they will be displayed in the same row until the width is insufficient, and then go to the next row. For example, the following code:

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

On the contrary, elements of the block type, such as div, p, or section, article, and article, are displayed differently from inline. They are typical structured elements that can contain inline elements. When processing block elements, the browser adds line breaks before and after the elements, so that they are displayed independently in rows. Of course, if you change its default display type to inline, it will be displayed as an inline element.

Style CSS

We usually use CSS to control the display of elements:

Sometag {display: inline;/* Of course, you can also set it to a block, none, and other supported attributes */}

Although we have specified the display type in the property above, it also means other related styles. For example, you can specify the width and height of the element whose display type is block, however, the inline type cannot be specified. Padding and margin can be applied to the elements displayed in inline, but they do not affect the contained elements. Take a look at the following example:

Other Display Methods

In addition to the display of inline and block types, there is also an inline-block display method. For example:

The display method is similar to inline, but its related attributes, such as width, height, padding/margin, follow the rules of the block display type. Inline-block can help us achieve effects similar to the float element, but it also has its own problems.

Other attributes, such as list-item, are displayed in a similar way as list elements.

<Ul> <li> element 1 </li> <li> element 2 </li> </ul>

There is also an element that needs to be mentioned as "none". This attribute allows the element to not be displayed, and does not occupy any document space. Note that it is different from the property "hidden.

Normal Document loading process

So what is the normal loading process of the browser? Basically, the browser displays the content in the order it parses, loads the content first at the top, and then loads the following content. When you begin to design the web, you may not be concerned about the normal document loading process. Instead, you may be obsessed with a variety of fancy techniques. If you can correctly understand document loading, it is absolutely beneficial to help you better understand web design.

Do an exercise!

Here we will make a simple connection to help you consolidate your learning. Here we use HTML5 Shiv to help us support HTML5 labels and use the placekitten image placeholder application to generate images.

The HTML framework code is as follows:

<Div class = "container">

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 ;}

Summary

I hope you can better understand the loading and layout of documents through this article. If you have any questions or suggestions, please leave us a message. Thank you!

Date: 2013-1-28 Source: GBin1.com