Two ways to implement square div using CSS
|
Goal: Create a square whose side length is equal to Method 1: Use the unit vw, (ps I think this is the easiest method) The html structure is also very simple, with only one div
<html>
<body>
<div class="square">
</div>
</body>
</html>
.square{
width: 50vw;
height: 50vw;
background: blue;
}Method 2: Use padding-bottom Key points: 1. height: 0, the content will overflow into the padding, don't worry~~ 2. When the padding-bottom value is set as a percentage, it is relative to the width of the containing block. 3. Need to set the containing block HTML structure:
<html>
<body>
<div class="container">
<div class="square">
</div>
</div>
</body>
</html>css:
*{
margin: 0;
}
/* Set to fill the visible area of the page*/
.container{
height: 100vh;
width: 100vw;
background: palegoldenrod;
}
.square{
width: 50%; /* relative to the width of the container */
padding-bottom: 50%; /* relative to container width */
background: palegreen;
} That's it, two are enough. You can also use margin, but there will be a risk of collapse, so these two are enough~~ Summarize The above are two methods that I introduced to you to use CSS to realize square div. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time! |
<<: Docker win ping fails container avoidance guide
>>: Characteristics of JavaScript arrow functions and differences from ordinary functions
Recommend
Use nginx to configure domain name-based virtual hosts
1. What is a virtual host? Virtual hosts use spec...
MySQL process control IF(), IFNULL(), NULLIF(), ISNULL() functions
In MySQL, you can use IF(), IFNULL(), NULLIF(), a...
How to completely uninstall node and npm on mac
npm uninstall sudo npm uninstall npm -g If you en...
SQL fuzzy query report: ORA-00909: invalid number of parameters solution
When using Oracle database for fuzzy query, The c...
Solutions to black screen when installing Ubuntu (3 types)
My computer graphics card is Nvidia graphics card...
A brief discussion on two methods to solve space-evenly compatibility issues
Since its launch in 2009, flex has been supported...
HTML exceeds the text line interception implementation principle and code
The HTML code for intercepting text beyond multipl...
Summary of Binlog usage of MySQL database (must read)
I won't go into details about how important b...
Vue-router does not allow navigation to the current location (/path) Error reasons and fixes
Table of contents Error message Cause Error demon...
Brief analysis of the MySQL character set causing database recovery errors
Importing data with incorrect MySQL character set...
The difference between Readonly and Disabled
To summarize: Readonly is only valid for input (te...
Detailed explanation of MySQL sql99 syntax inner join and non-equivalent join
#Case: Query employee salary levels SELECT salary...
How to enable JMX monitoring through Tomcat
Build a simulation environment: Operating system:...
vue-cli configuration uses Vuex's full process record
Table of contents Preface Installation and Usage ...
MySQL8 Installer version graphic tutorial
Installation The required documents are provided ...