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
Working principle and implementation method of Vue instruction
Introduction to Vue The current era of big front-...
Detailed explanation of the rounding accuracy problem of the toFixed() method in JS
Table of contents The pitfalls Filling method Wha...
How to write configuration files and use MyBatis simply
How to write configuration files and use MyBatis ...
Detailed steps to install MySql 5.7.21 in Linux
Preface The most widely used database in Linux is...
Docker image import and export code examples
Import and export of Docker images This article i...
Summary of commonly used tool functions in Vue projects
Table of contents Preface 1. Custom focus command...
A very detailed explanation of Linux C++ multi-thread synchronization
Table of contents 1. Mutex 1. Initialization of m...
Summary of javascript date tools
let Utils = { /** * Is it the year of death? * @r...
How to use the jquery editor plugin tinyMCE
Modify the simplified file size and download the ...
Detailed explanation of the mysqlslap command and syntax for the built-in stress test in MySQL 5.7
Preface mysqlslap is a diagnostic program designe...
Why Use DOCTYPE HTML
You know that without it, the browser will use qui...
Solution to the problem that VMware15 virtual machine bridge mode cannot access the Internet
Description Solution VMware 15 virtual machine br...
Detailed explanation of various usages of proxy_pass in nginx
Table of contents Proxy forwarding rules The firs...
Summary of Linux Logical Volume Management (LVM) usage
Managing disk space is an important daily task fo...
How to view the network routing table in Ubuntu
What are Routing and Routing Table in Linux? The ...