Solution to the problem that the div width is set to width:100% and then the padding or margin exceeds the parent element
|
Preface This article introduces how to use the new CSS3 attribute box-sizing to solve the problem of setting the div width to 100% and then setting padding or margin beyond the parent element. Friends in need can refer to it. grammar box-sizing: content-box|border-box|inherit; Value 1, content-box This is the width and height behavior specified by CSS2.1. The width and height are applied to the element's content box respectively. The element's padding and border are drawn in addition to the width and height. Value 2, border-box The width and height specified for an element determine the element's border box. That is, any padding and borders specified for the element will be drawn within the specified width and height. The content width and height are obtained by subtracting the border and padding from the set width and height respectively. Value 3: inherit Specifies that the value of the box-sizing property should be inherited from the parent element. example <!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">This div occupies the left half. </div>
</div>
</body>
</html>Summarize The above is the full content of this article. I hope that the content of this article can be of some help to your study or work. If you have any questions, you can leave a message to communicate. |
<<: Node+Express test server performance
Recommend
Implementing long shadow of text in less in CSS3
This article mainly introduces how to implement l...
How to introduce img images into Vue pages
When we learn HTML, the image tag <img> int...
MySQL 8.0.21 installation tutorial with pictures and text
1. Download the download link Click download. You...
Detailed example of using case statement in MySQL stored procedure
This article uses an example to illustrate the us...
Solution to the Chinese garbled code problem in the decompressed version of MYSQL
The decompressed version of MYSQL is installed 1:...
Implementation steps of encapsulating components based on React
Table of contents Preface How does antd encapsula...
Solution to the problem that the MySQL configuration file cannot be modified (Win10)
Record the problems you solve for others. Problem...
MySQL 5.7.21 installation and password configuration tutorial
MySQL5.7.21 installation and password setting tut...
Summary of Common Mistakes in Web Design
In the process of designing a web page, designers...
Commonly used js function methods in the front end
Table of contents 1. Email 2. Mobile phone number...
Implementation of breakpoint resume in Node.js
Preface Normal business needs: upload pictures, E...
The whole process record of vue3 recursive component encapsulation
Table of contents Preface 1. Recursive components...
MySQL 5.6.33 installation and configuration tutorial under Linux
This tutorial shares the installation and configu...
Interactive experience trends that will become mainstream in 2015-2016
The most important interactive design article in ...
Detailed tutorial on how to install MySQL 5.7.18 in Linux (CentOS 7) using YUM
The project needs to use MySQL. Since I had alway...