Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you CSS control div display method related knowledge points, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you read this article after some gains, let's learn about it together.

HTML components

dtd section: document type description, declaration version, standard

header section: for the machine

body part: for people to see

CSS controls div display

Is a block-level element. This means that its contents automatically start a new line. In fact, newlines are inherently the only format representation. Additional styles can be applied by class or id of.

The following code is CSS to set the width, height and background color of each div by 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 start by writing two div's and setting the background color to see how it works.

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

As mentioned above, the contents of ddiv will automatically start a new line, so if you want to arrange two div left and right, you have to float the layout.

We added float attributes to CSS separately

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

The effect is as follows:

Clear float

When there is a floating layout and a normal div, the following overrides occur

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

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

Setting the clear attribute on normal elements in CSS

When we add clear: left;, it means that the left float does not cover itself.

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

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

The above is "CSS control div display method" all the content of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.