How to set the width, height and background color of each div by CSS

This article mainly introduces the "CSS how to set the width and height of each div and background color" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, I hope that this "CSS how to set the width and height of each div and background color" article can help you solve the problem.

Is a block-level element. This means that its content automatically starts a new line. In fact, line wrapping is the only inherent format. Additional styles can be applied through class or id.

The following code is that CSS sets the width, height and background color of each div through id

Document # a {width: 200px; height: 100px; background: red;} # b {width: 200px; height: 100px; background: blue;} # c {width: 200px; height: 100px; background: green;}

Execution effect:

Floating layout

Let's first write two div settings on the background color to see the effect.

Document # lside {height: 200px; background: red;} # rside {height: 200px; background: green;} I am the left and I am the right

It is also mentioned above that the content of ddiv automatically starts a new line, so if you want to arrange the two div around, you have to float the layout.

We add the float attribute to the CSS respectively

# lside {height: 200px; background: red; float: left;} # rside {height: 200px; background: green; float: right;}

The effect is as follows:

Clear float

When floating layouts and normal div co-exist, the following overlay occurs

Document # lside {height: 200px; background: red; float: left;} # rside {height: 300px; background: green; float: right;} # normal {height: 400px; background: blue;} I am the left, I am the right, I do not set the float

So if you don't want to be overwritten, clear the float.

Set the clear attribute on a normal element in CSS

When we add clear: left;, it means not to let the left float cover us.

# normal {height: 400px; background: blue; clear: left;}

At this point, the div floating on the left will be displayed under the floating div on the left, as shown in the figure:

Similarly, you can also set clear: right; for not letting the right float cover yourself; setting clear: both; for not letting the float cover yourself. There is no demonstration here.

This is the end of the introduction to "how CSS sets the width, height and background color of each div". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.