html不能超出div的宽度,DIV设置width后超出父元素应该如何解决

这次给大家带来DIV设置width后超出父元素应该如何解决，解决DIV设置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 属性的值。

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;

}

这个 div 占据左半部分。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

html不能超出div的宽度,DIV设置width后超出父元素应该如何解决相关推荐

深入理解CSS之如何使子元素撑宽设置了 block 的父元素
深入理解CSS之如何使子元素撑宽设置了display: block; 的父元素先写一个模板,晚点再吐槽吐槽实现原理与更多支持的属性不想使父级的块属性消失怎么办这种属性规则有什么作 ...
HTML里子DIV设置margin-top后影响父DIV位置的解决办法
在HTML里,子DIV元素设置了margin-top后,在与父元素之间没有任何其他元素的情况下,会影响到父DIV的位置. 一.编写代码. <!DOCTYPE html> <html ...
表单设置 disabled 后无法传值到后台的解决办法
提交 from 表单时,如果input字段设为disabled,该字段是无法正常提交给后台的. <input type="text" name="name" ...
Excel设置格式后必须双击才生效问题的解决办法
Excel设置了格式后,往往需要双击一下单元才能生效,如果行数较多,谁很麻烦的.解决办法如下:1.选中该列数据:2.数据--分列--分隔符--下一步--Tab键--常规--完成.其实按照默认一路点下去 ...
2008服务器支持mp4,关于Windows2008服务器设置MIME后仍然无法播放MP4的解决方法
最近遇到了一个非常邪门的故障,重新安装了Windows2008服务器后 Mp4无法正常播放: 整个互联网中关于设置MP4的方法基本都是教你如何在IIS中设置MIME 本文讨论的不是如何教你设置MIME ...
Mac连接路由器后没有反应_腾达路由器设置完成后上不了网怎么解决【解决方法】...
腾达路由器设置完成,还是上不了网,怎么办? 此时可以进到路由器设置页面(192.168.0.1),老版腾达路由器点击右上角的"高级设置"-"系统状态"根据WAN ...
WSL2中设置DNS后重启终端又失效的解决方法
转载地址:https://www.xieshasha.love/wsldns.iiMemory WSL2 用着是挺好的,就是发现了一个问题,郁闷了好久,修改/etc/resolv.conf可以自己设置 ...
多方法解决设置width:100%再设置margin或padding溢出的问题
2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...
HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

html不能超出div的宽度,DIV设置width后超出父元素应该如何解决

html不能超出div的宽度,DIV设置width后超出父元素应该如何解决相关推荐

最新文章

热门文章