div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

在设置了元素宽度width100%后再加上margin和padding超出父元素宽度，其实解决的方法很简单，直接使用CSS的 box-sizing 属性就可以解决这个问题，这个是CSS3新属性，可以将padding计算在width内。

本文介绍的是利用CSS3的新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题

使用语法

box-sizing: content-box|border-box|inherit;

值一、content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

值二、border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

值三、inherit

规定应从父元素继承 box-sizing 属性的值。

例子

<!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>

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法相关推荐

解决div宽度设置width:100%后再设置padding或margin超出父元素的办法
前言: 有时候我们需要子div和父div一样宽(高),但是需要设置一定边距时,如果子元素使用width:100%在设置padding或margin的话,就会出现溢出问题. HTML <div c ...
解决width: 100%；再设置margin问题
最近在做前端,遇到了这么个小问题,就是当我们把一个 div 的 width 设置为 100% 之后,再设置 margin 的时候这个div 莫名其妙的超出了屏幕.情景如下图: 这就很难受了啊!!! ...
安装VS2008后再安装SQL2005无组件和SQL服务的解决办法
为了学习NET,之前一直是用VISUALSTDUIO 2005,看到自己的VS2008下完了,一激动就安装了,由于安装了VS2005,就算在程序添加/删除里完全删除了VS2005,但还是装不了VS20 ...
html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
这次给大家带来DIV设置width后超出父元素应该如何解决,解决DIV设置width后超出父元素的注意事项有哪些,下面就是实战案例,一起来看一下. 前言本文介绍的是利用CSS3的新属性box-siz ...
多方法解决设置width:100%再设置margin或padding溢出的问题
2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...
R语言ggplot2可视化：自定义设置连续变量图例（legend）宽度（width）、自定义设置连续变量图例位置（position）、自定义设置连续变量图例连续渐变
R语言ggplot2可视化:自定义设置连续变量图例(legend)宽度(width).自定义设置连续变量图例位置(position).自定义设置连续变量图例连续渐变 #初始示例(图例互相分离.图例细线 ...
input,textarea元素设置宽度100%超出父元素宽度
<form style="width: 300px;"><input name="tenantIds" placeholder="律 ...
Word 为标题设置段前段后间距设置与异常
Word 为标题设置段前段后间距设置与异常参考文章: (1)Word 为标题设置段前段后间距设置与异常 (2)https://www.cnblogs.com/neillee/p/7001891.ht ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法相关推荐

最新文章

热门文章