让padding、border等不占据宽度（手机端，pc端）

最新推荐文章于 2024-05-29 10:53:24 发布

姜无忧

最新推荐文章于 2024-05-29 10:53:24 发布

阅读量1.9k

点赞数 1

分类专栏： html/css/css3

本文链接：https://blog.csdn.net/xiasohuai/article/details/83930912

版权

html/css/css3 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内（默认属性）

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了。

我们经常遇到以下两种问题：

1.左右模块宽度为50%，加个边框或者padding会掉下去

2.width设为100%，加上padding，会出现滚动条。

加一个这个样式就能解决：

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

案例：

html:

<body>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
<div style="clear:both;"></div>
</div>
</body>

css：

div.container
{
width:100%;
border:10px solid blue;
padding: 20px;
}
div.box
{
width:50%;
height:80px;
padding:10px;
border:10px solid red;
float:left;
}

效果图：

把外层div加上此属性：

div.container
{
width:100%;
border:10px solid blue;
padding: 20px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div.box
{
width:50%;
height:80px;
padding:10px;
border:10px solid red;
float:left;
}

滚动条消失：

父级div和子div都加上此属性：

div.container
{
width:100%;
border:10px solid blue;
padding: 20px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:50%;
height:80px;
padding:10px;
border:10px solid red;
float:left;
}

效果图如下：

姜无忧

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
让padding、border等不占据宽度（手机端，pc端）

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。content-box，border和padding不计算入width之内（默认属性）padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模式了。我们经常遇到以下...
复制链接

扫一扫

专栏目录