An analysis of div+float, a very important concept in website design
|
In website construction, you will always encounter various problems with HTML and CSS. Open the homepage of the website https://www.jb51.net and view the source code. The screen is full of HTML tags, with no less than dozens of divs. There are two types of elements in HTML: inline elements (inline elements) and block elements. How do you understand them? Inline elements are elements that do not wrap and can adapt in size. For example, a img font span. When we build a website, the text content inside is an inline element. Block elements are elements that will wrap to the next line regardless of the content, width or height, such as div p li, which are generally used in website layout. The switching between inline elements and block elements uses the two CSS properties display: inline block. For inline elements that contain block elements, use display:inline-block; inline is only used when it contains inline elements. Inline elements can contain inline elements, but try not to contain block elements. Inline elements and block elements can be nested inside block elements. Floating on a website means drifting to the border of the parent element, or the border of the previous floating element. Floating is very useful when using ul li to make a menu, and it can also be used when using div to make a menu. float:right ; Float rigth can make the floating box abandon its original position. The following floats will follow closely and float to the right edge of the parent element border to stop. It is best if we use floats to make website menus. It is best for a group of menus to all float or not float at all. If there is one menu in the middle that does not float, a strange display effect will appear. If the space is not large enough, it can adapt downwards. Leave the parent element until it is filled. float:left ; float left and right are actually the same, except that one floats to the left and the other floats to the right. They will float to the parent border or the previous floating block. If in your website, one of the divs in a pair has a height greater than the other divs, the second floating div will be stuck behind it until there is enough space. For inline elements, if they float, the style will be set to block elements and the width and height can be set. Otherwise, these two attributes are invalid. However, although it is a block element, it will give up the position on the right side of the line and can display other content. For example, the text package image in many website layouts is based on this principle /// Clear float. That is to clear the floating effect. The key to floating is to make room and follow the previous floating quickly. |
<<: Implementation of CSS heart-shaped loading animation source code
>>: Detailed explanation of several examples of insert and batch statements in MySQL
Recommend
Implementation and optimization of MySql subquery IN
Table of contents Why is IN slow? Which is faster...
Summary of MySQL's commonly used concatenation statements
Preface: In MySQL, the CONCAT() function is used ...
Three steps to solve the IE address bar ICON display problem
<br />This web page production skills tutori...
Vue3 encapsulates the magnifying glass effect component of Jingdong product details page
This article shares the specific code of vue3 enc...
Implementation of socket options in Linux network programming
Socket option function Function: Methods used to ...
CSS stacking and z-index example code
Cascading and Cascading Levels HTML elements are ...
Implementing a simple student information management system based on VUE
Table of contents 1. Main functions 2. Implementa...
Detailed explanation of the WeChat applet request pre-processing method
question Because some of our pages request data i...
HTML+CSS box model example (circle, semicircle, etc.) "border-radius" is simple and easy to use
Many friends found that the box model is a square...
Talk about nextTick in Vue
When the data changes, the DOM view is not update...
How to get datetime data in mysql, followed by .0
The data type of MySQL is datetime. The data stor...
An article to understand the usage of typeof in js
Table of contents Base Return Type String and Boo...
Use of MySQL DDL statements
Preface The language classification of SQL mainly...
The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands
What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...
js to achieve the pop-up effect
This article example shares the specific code of ...