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
Payment function implementation in vue project (WeChat payment and Alipay payment)
Table of contents Common payment methods in proje...
Two examples of using icons in Vue3
Table of contents 1. Use SVG 2. Use fontAwesome 3...
Mac VMware Fusion CentOS7 configuration static IP tutorial diagram
Table of contents Install CentOS7 Configuring Sta...
Free tool to verify that HTML, CSS and RSS feeds are correct
One trick for dealing with this type of error is t...
A brief summary of how to write paths when HTML files introduce external CSS files
1. Import the basic style of external CSS files U...
Graphical explanation of the underlying principle of JavaScript scope chain
Table of contents Preface Scope 1. What is scope?...
Flex layout achieves fixed number of rows per line + adaptive layout
This article introduces the flex layout to achiev...
JavaScript message box example
Three types of message boxes can be created in Ja...
vue-admin-template dynamic routing implementation example
Provide login and obtain user information data in...
Detailed explanation of the difference between uniapp and vue
Table of contents 1. Simple page example 2.uni-ap...
XHTML 1.0 Reference
Arrange by functionNN : Indicates which earlier ve...
In-depth understanding of Mysql logical architecture
MySQL is now the database used by most companies ...
Analysis of the Principle of MySQL Index Length Limit
This article mainly introduces the analysis of th...
idea uses docker plug-in to achieve one-click automated deployment
Table of contents environment: 1. Docker enables ...
Use CSS blend modes and SVG to dynamically change the color of your product images
A few days ago, I saw an example written by @Kyle...