<style>
*{
margin: 0;
padding: 0;
}
.div1
{
width: 100%;
height: 100px;
margin-left: 20px;
margin-right: 20px;
background-color: red;
}
.div2
{
width: auto;
height: 100px;
/* margin-left: 20px;
margin-right: 20px; */
margin-left: 20px;
margin-right: 20px;
background-color: blue;
}
.div3
{
width: 100%;
height: 100px;
padding-left: 20px;
padding-right: 20px;
background-color: rosybrown;
}
.div4
{
width: auto;
height: 100px;
padding-left: 20px;
padding-right: 20px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="div1">
margin 是控件的边缘相对于控件父空间的边距
</div>
<div class="div2">
margin 是控件的边缘相对于控件父空间的边距
</div>
<div class="div3">
padding 是控件的内容相对于控件边缘的边距
</div>
<div class="div4">
padding 是控件的内容相对于控件边缘的边距
</div>
<p>可以看到,当取 padding 的时候,width 取 100% 还是 auto 没有区别。
但当取 margin 是,width 取 100% 是被向右挤压,取 width 为 auto 时,是对左右进行剪裁</p>
<script src="js/jq.js"></script>
<script src="js/bootstrap.min.js" async defer></script>
</body>
width 为 100% 和 auto 的区别
猜你喜欢
转载自blog.csdn.net/qq_34902437/article/details/103963160
今日推荐
周排行