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
JavaScript realizes magnifying glass special effects
The effect to be achieved: When the mouse is plac...
Problems and solutions for MYSQL5.7.17 connection failure under MAC
The problem that MYSQL5.7.17 cannot connect under...
I have compiled a few cool design sites that I think are good.
You must have inspiration to design a website. Goo...
How to set up scheduled backup tasks in Linux centos
Implementation Preparation # Need to back up the ...
JavaScript to implement simple carousel chart most complete code analysis (ES5)
This article shares the specific code for JavaScr...
Why node.js is not suitable for large projects
Table of contents Preface 1. Application componen...
Vue.js implements music player
This article shares the specific code of Vue.js t...
(MariaDB) Comprehensive explanation of MySQL data types and storage mechanisms
1.1 Data Type Overview The data type is a field c...
Full HTML of the upload form with image preview
The upload form with image preview function, the ...
How to migrate sqlite to mysql script
Without further ado, I will post the code for you...
The process of installing and configuring nginx in win10
1. Introduction Nginx is a free, open source, hig...
Docker learning method steps to build ActiveMQ message service
Preface ActiveMQ is the most popular and powerful...
A brief discussion on an efficient algorithm for constructing tree structures in JavaScript
Table of contents introduction Ideas Establish ID...
A brief discussion on the issue of dates containing zero values in MySQL database
By default, MySQL can accept the insertion of 0 v...
Detailed explanation of SELINUX working principle
1. Introduction The main value that SELinux bring...