The method of controlling div display by CSS
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.
