< reprint >div+css Layout tutorial (-) CSS prerequisite knowledge

Directory:

1. Div+css Layout Tutorial (-) CSS prerequisite knowledge

Note: This tutorial requires a basic understanding of HTML and CSS.

First, CSS layout properties

Width : Sets the width of the object (width:45px).

Height : Sets the height of the object (height:45px;).

Background : Sets the background color and background image of the object.

1. Background Color

Background: #09F;

2. background Image

Background:url (file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

Repeat-x represents horizontal repetition, and you can set repeat-y.

Float: The Float property is the most basic and most commonly used property in the DIV+CSS layout for implementing multi-column functionality, and we know that the <div> tag can only display one line in the default row, whereas using the Float property allows you to display multiple div functions in a row. The most straightforward way to explain this is to implement the multi-column function of table layout.

The Float property has left, right, none three values, none of the default properties are not in the tube, mostly left and two properties are most commonly used.

Example:

1.float:left Property

?

1

2.float:right Property

The Margin:margin property is used to set the distance between two elements. (Note: In IE6, the default is the double value of this property, how to resolve see hack CSS)

Margin property setting Value Description:

1. Separate Settings

margin-left:20px; set left

margin-right:20px; Set Right

The same up and down respectively is margin-top:20px; margin-bottom:20px;

2. Shorthand Settings

margin:10px; Set object four weeks.

margin:10px 5px; Set object up and down to 10px, about 5px;

Example:

The Padding:padding property is used to set the distance between the border of an element and its contents.

1. Separate settings

padding-left:20px; set left

padding-right:20px; Set Right

The same up and down respectively is padding-top:20px; padding-bottom:20px;

2. Shorthand Settings

padding:10px; Set object four weeks.

padding:10px 5px; Set object up and down to 10px, about 5px;

The Clear:clear property is primarily clear about the effect of the float property setting, and using the float property to set a row with multiple div (multiple columns), it is best to use the clear property to clearly float before the next line starts, otherwise the layout above will affect the following.

1. How to place a black square on the next line of the orange block in the example above.

Let's try adding a div directly to the HTML.

We saw Kwstu-kid3 run to the bottom of 1 and 2, the reason is that the float property should be used for KWSTU-KID2, the solution can be directly in the KWSTU-KID3 to add the Clear property

2, there is a layout of common problems, it must be seen here.

We take the outermost kwstu attribute to the height and see what effect it has.

It is not the same as we imagined it should be kwstu layer put kid1 and kid2 wrapped only right, why did not achieve the effect we want, the reason is that should be kid1 and Kid2 use the Float property, you can use the clear property to clear a bit.

The general situation is to create a. Clear public clear floating class, directly using a div call

This problem also has a workaround: add Overflow:hidden directly to the Kwstu style;

2. There is also a beginner div often encountered problems, if the top of the clear layer is removed, and then under the Kwstu layer to start a new line of layout, and then in the new div below the use of the Margin-top attribute, certainly does not work. This place is the beginner layout must encounter the problem, be sure to pay attention to.

Workaround:

In the Kwstu layer and the KWSTU1 layer directly add a clear floating layer can be.

First, CSS Text properties

< reprint >div+css Layout tutorial (-) CSS prerequisite knowledge