


What are the css layout models? Introduction to the three layout models of css
This article brings you what are the css layout models? The introduction of the three CSS layout models has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Flow model (flow)
Default web page layout mode
* Block elements will be vertically extended and distributed in order from top to bottom within the containing element
* Inline elements will be displayed horizontally from left to right within the containing element
Floating model (float)
Any element cannot be displayed by default Floating, but can be defined with CSS as a floating
两个 div 元素一行 div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div>
设置两个元素 右浮动 实现一行 float:right; div{ width:200px; height:200px; border:2px red solid; float:right; }
设置两个元素一左一右 div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;}
layer Model (layer)
There are three forms of layer models:
- Absolute positioning (position: absolute)
- Relative positioning (position: relative)
- Fixed positioning (position: fixed)
The layer layout model is like the very popular layer editing function in the image software PhotoShop. Each layer can be accurately positioned and operated
1. Absolute positioning
position:absolute (meaning absolute positioning), the function of this statement is to drag the element out of the document flow, and then use left, right, top, The bottom property is positioned absolutely relative to its nearest parent containing block that has a positioning property. If no such containing block exists, it is relative to the body element, that is, relative to the browser window.
实现div元素相对于浏览器窗口向右移动100px,向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div>
2. Relative positioning
position: relative (indicates relative positioning), which passes left The , right, top, and bottom attributes determine the offset position of the element in the normal document flow. The process of relative positioning is to first generate an element in static (float) mode (and the element floats like a layer), and then moves relative to the previous position. The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes. , the position before offset remains unchanged.
相对于以前位置向下移动50px,向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div>
3. Fixed positioning
fixed: indicates fixed positioning, similar to absolute positioning type. But the coordinates of its relative movement are the view (the web page window within the screen) itself. Since the view itself is fixed, it will not change as the scroll bar of the browser window scrolls, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so fixedly positioned elements will always be in A certain position of the view within the browser window that will not be affected by the flow of the document. This has the same function as the background-attachment:fixed; attribute.
相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。 #div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> ....
4. Use Relative in combination with Absolute
Position relative to other elements
1、参照定位的元素必须是相对定位元素的前辈元素: <div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div>box1是box2的父元素
2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; }
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; }
Related recommendations :
CSS Layout Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose
css div layout (1) - css div implements table Layout_html/css_WEB-ITnose
The above is the detailed content of What are the css layout models? Introduction to the three layout models of css. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The Node service built based on non-blocking and event-driven has the advantage of low memory consumption and is very suitable for handling massive network requests. Under the premise of massive requests, issues related to "memory control" need to be considered. 1. V8’s garbage collection mechanism and memory limitations Js is controlled by the garbage collection machine

Vue.js has become a very popular framework in front-end development today. As Vue.js continues to evolve, unit testing is becoming more and more important. Today we’ll explore how to write unit tests in Vue.js 3 and provide some best practices and common problems and solutions.

The file module is an encapsulation of underlying file operations, such as file reading/writing/opening/closing/delete adding, etc. The biggest feature of the file module is that all methods provide two versions of **synchronous** and **asynchronous**, with Methods with the sync suffix are all synchronization methods, and those without are all heterogeneous methods.

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

Cross-domain is a scenario often encountered in development, and it is also an issue often discussed in interviews. Mastering common cross-domain solutions and the principles behind them can not only improve our development efficiency, but also perform better in interviews.

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

At the beginning, JS only ran on the browser side. It was easy to process Unicode-encoded strings, but it was difficult to process binary and non-Unicode-encoded strings. And binary is the lowest level data format of the computer, video/audio/program/network package

With the development of Internet technology, front-end development has become increasingly important. Especially the popularity of mobile devices requires front-end development technology that is efficient, stable, safe and easy to maintain. As a rapidly developing programming language, Go language has been used by more and more developers. So, is it feasible to use Go language for front-end development? Next, this article will explain in detail how to use Go language for front-end development. Let’s first take a look at why Go language is used for front-end development. Many people think that Go language is a
