Home >Web Front-end >HTML Tutorial >How to solve the problem after DIV sets width and exceeds the parent element
How to solve the problem after DIV sets width and exceeds the parent element
- php中世界最好的语言Original
- 2018-01-20 09:24:363123browse
This time I will show you how to solve the problem of DIV exceeding the parent element after setting the width. What are the precautions to solve the problem of DIV exceeding the parent element after setting the width. The following is a practical case, let's take a look.
Preface
This article introduces the use of the new attribute box-sizing of CSS3 to solve the problem of setting the div width to width:100% and then setting padding or marginFor issues beyond the parent element, friends in need can refer to it.
Syntax
box-sizing: content-box|border-box|inherit;
Value one, content-box
This is the width and height specified by CSS2.1Behavior.
The width and height are applied separately to the element's content box.
Draw the element's padding and border outside the width and height.
Value two, border-box
The width and height set for the element determine the border box of the element.
That is, any padding and borders specified for the element will be drawn within the set width and height.
The width and height of the content can be obtained by subtracting the border and padding from the set width and height respectively.
Value three, inherit
Specifies that the value of the box-sizing attribute should be inherited from the parent element .
<!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">这个 div 占据左半部分。</div>
</div>
</body>
</html>I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use h5’s sse server to send EventSource events
H5’s local storage and local database details Introducing
#How h5 implements the scrolling barrage function through canvas
The above is the detailed content of How to solve the problem after DIV sets width and exceeds the parent element. For more information, please follow other related articles on the PHP Chinese website!