Understanding of haslaylout and bfc parsing
|
1. haslayout and bfc are IE-specific and standard attributes. 2. BFC is an isolated independent container on the page. The child elements inside the container will not affect the elements outside, and vice versa. 3. BFC has 3 functions: 1. Contains floating elements, 2. Prevent overlap in screenwriting, 3. Prevent being covered by floating elements 4. Trigger conditions: float value other than None overflow values other than visible (hidden, auto, scroll) display (table-cell, table-caption, inline-block, flex, inline-flex) The position value is (absolute, fixed) The fieldset element It is important to remember that bfc is an independent container that does not affect other layouts and will not be affected. By using its characteristics, you can solve problems such as clearing floats and 2-column layouts. Example: 2-column adaptive layout 1. Solve it with floating and negative margin 2. Trigger bfc and will not be covered by floating elements |
<<: Implementation of CSS text shadow gradually blurring effect
>>: HTML Editing Basics (A Must-Read for Newbies)
Recommend
Solution to failure in connecting to mysql in docker
Scenario: After installing the latest version of ...
5 ways to achieve the diagonal header effect in the table
Everyone must be familiar with table. We often en...
How to install and deploy MySQL 8.0 under CentOS8
MySQL 8 official version 8.0.11 has been released...
Detailed explanation of data sharing between Vue components
Table of contents 1. In project development, the ...
Click the toggle button in Vue to enable the button and then disable it
The implementation method is divided into three s...
Analysis of problems caused by MySQL case sensitivity
MYSQL is case sensitive Seeing the words is belie...
Analysis of CocosCreator's new resource management system
Table of contents 1. Resources and Construction 1...
Solve the group by query problem after upgrading Mysql to 5.7
Find the problem After upgrading MySQL to MySQL 5...
An article to solve the echarts map carousel highlight
Table of contents Preface toDoList just do it Pre...
Detailed explanation of styles in uni-app
Table of contents Styles in uni-app Summarize Sty...
How to handle token expiration in WeChat Mini Programs
Table of contents Conclusion first question Solut...
How does WeChat Mini Program obtain user information and user phone number at the same time
When I was writing the login page today, I needed...
In-depth understanding of HTML form input monitoring
Today I saw a blog post about input events, and o...
mysql8.0.11 winx64 installation and configuration tutorial
The installation tutorial of mysql 8.0.11 winx64 ...
vue.js Router nested routes
Preface: Sometimes in a route, the main part is t...