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
Docker runs operations with specified memory
as follows: -m, --memory Memory limit, the format...
Analysis of the Principles of MySQL Slow Query Related Parameters
MySQL slow query, whose full name is slow query l...
Vue-pdf implements online preview of PDF files
Preface In most projects, you will encounter onli...
Parsing the commonly used v-instructions in vue.js
Table of contents Explanation of v-text on if for...
Detailed explanation of viewing and setting SQL Mode in MySQL
Viewing and Setting SQL Mode in MySQL MySQL can r...
Teach you to create custom hooks in react
1. What are custom hooks Logic reuse Simply put, ...
Detailed explanation of the adaptive adaptation problem of Vue mobile terminal
1. Create a project with vue ui 2. Select basic c...
How to reset the root password in Linux mysql-5.6
1. Check whether the MySQL service is started. If...
Detailed explanation of JS browser storage
Table of contents introduction Cookie What are Co...
JavaScript design pattern learning proxy pattern
Table of contents Overview Implementation Protect...
mysql5.7.17.msi installation graphic tutorial
mysql-5.7.17.msi installation, follow the screens...
Detailed explanation of routing configuration in Linux system with multiple network cards
Routing configuration commands under Linux 1. Add...
Detailed explanation of Linux lsof command usage
lsof (list open files) is a tool to view files op...
Bootstrap 3.0 study notes CSS related supplement
The main contents of this article are as follows:...
SELinux Getting Started
Back in the Kernel 2.6 era, a new security system...