未设置父盒子高度对布局结构的影响

最新推荐文章于 2022-11-10 20:51:59 发布
最新推荐文章于 2022-11-10 20:51:59 发布
阅读量670 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45064972/article/details/105440326
版权

未设置父盒子高度对布局结构的影响

学习HTML与CSS布局不久，在做仿站时遇到些问题解决后总结一下

创建两个div盒子取名为box_one,box_two，其中在box_one****中放置子盒子box_one_in**，盒子都有设置高度，子盒子高度刻意提高造成溢出情形

在这里插入图片描述在这里插入图片描述
此时三个盒子都是标准流盒子 ，粉色与紫色两个父盒子上下排列互不影响，绿色子盒子高度>粉色父盒子高度，但超出部分位于紫色盒子“后面”，不对紫色盒子本身造成影响。
在这里插入图片描述在这里插入图片描述
如果将父盒子高度去掉，此时父盒子是没有高度属性的，它的高度会随着子盒子而变化，这里便因为子盒子高度高而导致父盒子被拉高。
接下来我们看看浮动流盒子的情况下，父盒子高度未设置造成的影响
将1

最低0.47元/天 解锁文章
东隅yuuu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯CSS无hacks的跨游览器自适应高度多列布局 推荐
09-25
【纯CSS无hacks的跨浏览器自适应高度多列布局】是一种实现网页设计中等高多列的方法，不依赖任何JavaScript、图片或者CSS hack。该技术由Matthew James Taylor提出，并在此基础上进行了简化，便于初学者理解。核心...
CSS基础之盒子模型
m0_52789121的博客
03-15 842
文章目录 前言 1.盒子模型的组成 2.边框(border) 3.内边距(padding) 4.外边距(margin) ①外边距典型应用 ②外边距合并 ③清除内外边距 前言 css页面布局三大重点： css 盒子模型 、 浮动 、 定位 1.盒子模型的组成 border(边框) content(内容) padding(内边距) margin(外边距) 2.边框(border) CSS 边框属性允许你指定一个元素边框的样式和颜色 边框由三部分组成：边框宽度（粗细）、边框样式
关于子盒子和父盒子大小之间的关系
YW博客
09-09 2701
1.当父盒子不给高度宽度的时候，默认由子盒子撑开父盒子的大小，相当于子盒子和父盒子此时是重叠在一起的 2.当父盒子给了宽高，如果子盒子的大小超出了父盒子，子盒子就会溢出
CSS-父盒子不设置高度，其高度依靠某一个子盒子撑起来，其它子盒子的高度无法确定，但是里面的内容需要居中，怎么办？
ddddd3332134的博客
05-07 2597
先上代码： <div class="father"> <div class="left">右边盒子高度随着左边盒子高度而变化</div> <div class="right"></div> </div> 这里的父盒子不设置高度和宽度，两个子盒子只设置一个宽度： <style> .father { background-color: blue; } .left {
清除浮动的方式，以及解决父盒子没有高度的问题
weixin_30794491的博客
05-27 531
清除浮动的四种方式。 浮动对页面的影响： 　　　　如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0， 　　　　下面的元素会自动补位，所以这个时候要进行浮动的清除。 关于清除浮动的方式: 　　方式一:使用overflow属性来清除浮动 　.ovh{ 　　　　　　overflow:h...
为什么要清除浮动 以及如何清除浮动
JUIU9527的博客
11-04 111
1.大多时候可以不给父盒子高度(方便利用子盒子撑开父盒子);2.但是子盒子在浮动的时候,不给高度的父盒子高度为0;3.从而导致后面的盒子排列不对.没有添加浮动时的布局二.解决方法a.主要是利用b.选择器(主要利用both进行两边清除)(就和像給父盒子两侧的添加一个或两个空标签,规定父盒子的大小和子盒子一样)
DIV布局十大技巧以及DIV盒子模型
07-05
在网页设计领域，`DIV`布局是构建网页结构的基础，它使用HTML的`<div>`元素作为容器，结合CSS（层叠样式表）进行样式控制，实现灵活且响应式的页面设计。下面，我们将深入探讨`DIV`布局的十大技巧以及`DIV`盒子模型...
盒子上下左右居中设置
12-25
在父容器上设置`display: flex;`，然后使用`justify-content: center;`和`align-items: center;`可以使子元素在主轴（水平方向）和交叉轴（垂直方向）上居中。 ```css .parent { display: flex; justify-...
浅谈CSS 高度塌陷问题
09-22
在网页布局设计中，CSS高度塌陷是一个常见的问题，它发生在父元素没有设置固定高度，而其内部的浮动子元素又导致父元素无法根据子元素高度自适应时。这个问题的核心在于，当子元素设置了浮动（如`float:left`或`...
DIV CSS网页布局的基础知识整理
12-12
2. `div`标签是最常用的一种布局元素，它可以作为容器来包裹其他元素，通过CSS设置其宽度、高度、内边距(`padding`)、外边距(`margin`)等属性，实现灵活的网页布局。 3. CSS布局主要有以下几种方式： - 浮动布局...
CSS盒子模型及标签分类
qq_71476546的博客
11-10 418
一个容器怎么适应屏幕的高：容器加 height：100%；body：100%；width、height 不设置的时候，对盒子模型的影响：会自动去计算容器的大小，节省代码。写四个值：30px 40px 50px 60px（上、右、下、左）替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。margin 左右自适应是可以的，但是上下自适应是不行的。opacity：0（透明）~1（不透明） 0.5（半透明）写两个值：30px 40px（上下、左右）%单位：换算->以父容器的大小进行换算的。
盒模型：width、height不设置时，对盒模型的影响
weixin_44368588的博客
10-25 875
先写一个嵌套的盒子，在不设置width100%的情况下盒子2的宽度也会占满整个容器 此时我们给盒子2加一个30px左内填充，会发现盒子2超出了30px： 再加一个10px左边框，发现再次超出了10px： 此时你可能会想到将盒子2的box-sizing设为border-box，此时宽度值300px将包含边框、内填充和内容（content），而不仅仅是把content设为300px： 其实不...
使用css解决：什么情况下设置border不会增加盒子的宽高
m0_61973028的博客
02-16 2249
如果给高10px，宽10px的盒子 盒子设置border-sizing：border-box；后 再添加一个borer：1px solid black；盒子整体宽高仍旧是10px，不会变成12px（因为盒子有上下两条边，左右两条边，所以如果没有设置border-sizing：border-box；盒子加一个borer：1px solid black；边会变成宽高12px。 ...
html子级盒子为什么不随父级盒子变化,解决子盒子高度超出父盒子
weixin_29119159的博客
06-15 2122
代码：/p>Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">高度不能自适应[请用标准浏览器查看]class="box">我是父盒子,我的高没有设定,但是我的子盒子高过我时,在标准浏览器中我的高不能自适应。class="box2">这个盒子是小盒子，它没有设定高度属性，其高...
父级盒子无高度，子盒子浮动，高度自适应
gaolee1993的博客
07-13 2702
利用浮动实现三列布局，中间宽度自适应 #box{ border: 1px solid red; } #left{ width: 120px; height: 300px; float:left; background-color: grey; } #main{ hei
子绝父相，父盒子高度怎么自适应（相对定位的父盒子，被有绝对定位的子盒子撑开）
菜虚鲲的博客
11-10 8871
子绝父相（子div绝对定位，父盒子相对定位），父盒子高度自适应 css有办法实现相对定位的父盒子，被有绝对定位的子盒子撑开吗？ 前言： 如果是通过百度看到我这篇帖子的朋友，那么恭喜你，你在我这里找到了答案，但是这个答案可能不是你想要的,但是我的方法可以解决你的需求，因为这个问题的答案我找了两天！ 首先我们来看需求 上demo <!DOCTYPE html> <html lang...
CSS设置盒子容器(div)高度(height)始终为100%
热门推荐
王佳斌
11-28 1万+
https://www.cnblogs.com/xie-xiao-chao/p/8078648.html
CSS在不影响总体布局情况下让元素自由缩小
qq_44742090的博客
10-06 1061
CSS在不影响总体布局情况下让元素自由缩小 开始状态 <body> <div class="box1">box1box1</div> <div class="box2">box2box2</div> <div class="box3">box3box3</div> <div class="box4">box4box4</div> <div class="b
css父盒子没有高度让子盒子撑开 且子盒子有浮动 清除浮动
延宾的博客
05-05 7017
无标题文档 .box{ width:300px;margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;} .clear{ height:0px;font-size:0;clear:both;} /*     清浮动     1.给父级也加浮动
使用display:flex布局,怎么使左边和右边盒子高度一致
最新发布
05-31
使用flex布局可以实现左右两个盒子高度一致，具体实现方法如下： HTML结构： ```html <!-- 左侧内容 --> <!-- 右侧内容 --> ``` CSS样式： ```css .container { display: flex; } .left-box, ....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值