css之子布局100%，设置margin后超出父布局

最新推荐文章于 2022-09-08 11:23:20 发布
最新推荐文章于 2022-09-08 11:23:20 发布
阅读量3.6k 收藏
点赞数
分类专栏： 微信小程序开发记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010513497/article/details/103697567
版权

文章目录

问题

我们发现，如果子元素设置宽度为100%，然后设置了margin或者padding的话，会超出父布局的宽度：比如

在这里插入图片描述
效果如下
在这里插入图片描述

解决方式

参考博文
参考博文2

box-sizing

通过参考博文，我们知道可以使用box-sizing来设置

content-box

是box-siziing的默认值，也就是上面的效果，

border-box

不会改变设置的宽高，会在内部对内容进行压缩

inherit

继承父布局的box-sizing属性

参考解决方式

父布局和子布局都设置了100%，但是父布局设置了border和box-sizing为border-box（有时子布局也不用设置100%）
在这里插入图片描述

snotJam
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css布局之负margin妙用及其他实现
09-27
主要为大家详细介绍了css布局之负margin妙用及其他实现的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS新特性:圆角边框多栏Gird布局背景设置
09-27
网页制作Webjx文章简介：到现在为止,只有一些已经工作的CSS3特性. 到现在为止，只有一些已经工作的特性，他们中的一些如下:圆角从web2.0开始，开始流行使用圆角，如果你不使用圆角，你的网站可能不会被列入web2.0网站
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
weixin_41233219的博客
09-07 2705
在设置了元素宽度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-
子元素 margin 超出父元素的bug(垂直塌陷)
Ray_Huang
08-30 2225
今天写一个demo发现有一个很奇怪的页面表现，就是当子元素有margin时会影响父元素的margin： <style> .father{ width: 500px; height: 400px; border: 50px solid blue; border-color: red; background: blue; overflow:...
flex布局，子级margin会撑爆父级div
qq_27806371的博客
09-08 600
flex布局 子级撑爆父级
css之子容器宽度100%，设置margin后超出父容器
铁锤妹妹的博客
01-06 2665
2022年开年第一篇，很庆幸一直能学到新的东西，生命不息奋斗不止！ 回顾这一年，从刚开始的学习定义变量到现在可以独立完成一个模块的功能，技术上确实长进不少，也深深地感受到你知道的越多，你不知道的越多； 希望在新的一年里技术更上一个台阶，工资越来越多，嘻嘻(#.#) 话不多说，开干吧~ 一. 问题 我们发现，需要设置一定边距时，如果子容器设置宽度为100%，然后设置了margin，会超出父容器的宽度溢出。 .renderList { width: 100%; background: #f
子元素设置margin会影响父元素问题
ice-bear
01-21 1971
原因及解决
子元素的margin-top出现在父元素之外的问题及解决
weixin_42349568的博客
07-05 1263
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .outer{ width: 100px; height: 100px; background: blue
解决div宽度设置width:100%后再设置padding或margin超出父元素的办法
热门推荐
丁哒哒的博客
11-06 1万+
前言： 有时候我们需要子div和父div一样宽（高），但是需要设置一定边距时，如果子元素使用width:100%在设置padding或margin的话，就会出现溢出问题。 HTML <div class="parent"> <div class="child"></div> </div> CSS 使用width:100%加m...
div宽度设置width:百分百后，设置padding或margin超过父元素解决方案
yunduanaoligei的博客
11-26 586
前言 今天分享下”div宽度设置width:百分百后，设置padding或margin超过父元素解决方案“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。文中详细介绍的是利用CSS3的新属性box-sizing，处理div总宽设置width:100%后再设置padding或margin超过父属性的难题，有须要的朋友们能够参照借鉴。 语法 1 ​​box-sizing: content-box|border-box|in
多方法解决设置width:100%再设置margin或padding溢出的问题
weixin_34281537的博客
04-26 9662
2019独角兽企业重金招聘Python工程师标准>>> ...
子元素设置width:100%，同时设置了margin:20rpx，这时候样式会有溢出的现象
zhongmei121的专栏
04-15 499
问题：子元素设置width:100%，同时设置了margin:20rpx，这时候样式会有溢出的现象 代码： .father{ height: 100px; width: 100px; background: green; } .child-1{ height: 100%; width: 100%; border-
div设置宽度100%后再设置padding或margin超出父元素的解决办法
讓之的博客
10-13 1198
父级元素添加 box-sizing: border-box; 即可解决 在设置了元素宽度后再加上margin和padding，子元素会超出父元素宽度，肯定有时候是不需要这样的，解决方案：添加 box-sizing属性即可； box-sizing的属性对应有三个值 box-sizing: content-box|border-box|inherit; 1.content-box 这应该就是属于默认的，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。 2.border-box 为元素指
子元素设置margin-top影响父级元素的位置（转发）
鲁宽宽的博客
11-14 768
前提：子元素要是块级元素； ——————————————————————————————————— 相信很多前端同学在做页面开发的时候都遇到过这样的问题。给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。如下面的代码     .a {         width:100px;         height:100px;     }     .b {     ...
uniapp设置width为100vh导致内部元素margin不正常
沧笙踏歌的博客
10-19 1055
问题描述 外层元素使用了width: 100vh，结果内部的margin显示不正常，此时的代码为 <view class="content"> <view class="main"> 14 </view> </view> .content { height: 100vh; width: 100vh; position: relative; background-color: #F1F0F6; } .main{ backgroun
DIV元素加 margin 会把父元素的 margin 也撑高
weixin_44432032的博客
02-08 1213
这种现象叫做外边距合并或CSS样式margin叠加的问题。 原理：相邻两个元素都有margin，那么间距会取两者较大的作为间距距离； 同理，对于包含的两个元素也一样，特殊的是如果包含的两个元素，父元素没有margin，而子元素有margin，并且父元素没有border和padding的话，那么子元素的margin会溢出到父元素外，要解决这个问题有很多方法，如设置1px的padding，或者设置透明的border等方法来防止margin溢出。 解决方案一： 给父节点添加一个border ( border:1p
解决css中上下外边距(margin)在父元素中溢出的问题
daihaoxin的专栏
11-26 1123
两个办法 给父元素添加overflow: hidden;即可 给父元素添加透明边框border: 1px solid transparent; 给父元素添加伪元素：&::before, &::after{ content: ''; display: table; }
css左图右文布局方法
最新发布
05-15
CSS左图右文布局是一种网页设计布局方式，它使网页设计看起来更清新、整洁、美观，并且是现代化网页设计的趋势。 这种布局方法需要将图片和文本分别放置在网页的左部和右部，且在显示时要根据屏幕宽度自动适配，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值