Three ways of html+css layout (natural layout/flow layout/positioning layout)
|
1. Natural layout <br />The layout without any modification is automatically aligned to the left. 2. Fluid layout <br />The situation of float:left mentioned above. 3. Positioning layout <br />Relative positioning and absolute positioning are both relative to the parent div tag. Relative - Use the original position of the element as the reference point. Absolute - Use the origin (upper left corner) of the parent div tag as the reference point. Since the outer layer is position:relative, if the inner layer is absolute, it will be aligned with the upper left corner of the outer layer as the displacement reference. Of course, the outer layer only writes position:relative, and writes the two values left and top, which means: the position where this element should be originally located is used as the layout reference origin for left and top alignment. There is another situation where there is only one position:absolute; there is no position:relative on the outer layer. Which point will be used as a reference at this time? The principle at this time is: if there is a relative element in a parent element, the parent element is used as the reference origin; if there is no position:relative, the body is used as the reference origin. If there is no relative outer layer of position:absolute, there is no difference between the two layouts. Of course, the last case is: the outer layer is: position: absolute; the inner layer is position: relative, what will happen then? According to the original principle, absolute will refer to the body as the layout origin, and relative will refer to the position where it should be as the layout origin. At this time, it actually refers to the upper left corner of the outer layer as the layout origin. The rest depends on the actual situation. |
<<: Detailed explanation of how to pass values between react hooks components (using ts)
>>: How to choose transaction isolation level in MySQL project
Recommend
Implementation steps for installing java environment in docker
This article is based on Linux centos8 to install...
How to deploy python crawler scripts on Linux and set up scheduled tasks
Last year, due to project needs, I wrote a crawle...
Shell script nginx automation script
This script can satisfy the operations of startin...
Analyze how uniapp dynamically obtains the interface domain name
background The interface domain name is not hard-...
Differences between MySQL CHAR and VARCHAR when storing and reading
Introduction Do you really know the difference be...
How to choose the right MySQL datetime type to store your time
When building a database and writing a program, i...
How to install Mysql5.7 in Centos6
environment Centos 6.6 MySQL 5.7 Install If the s...
Detailed explanation of Linux copy and paste in VMware virtual machine
1. Linux under VMware Workstation: 1. Update sour...
Detailed explanation of the integer data type tinyint in MySQL
Table of contents 1.1Tinyint Type Description 1.2...
How to generate a free certificate using openssl
1: What is openssl? What is its function? What is...
Perfect solution to MySQL common insufficient memory startup failure
1. If MySQL is not started successfully, check th...
What is html file? How to open html file
HTML stands for Hypertext Markup Language. Nowada...
How to use Vue cache function
Table of contents Cache function in vue2 Transfor...
Linux kernel device driver Linux kernel module loading mechanism notes summary
#include <linux/moduleparam.h> 1. Module pa...
A brief discussion on logic extraction and field display of Vue3 in projects
Table of contents Logical Layering Separate busin...