父元素宽高固定的情况下，子元素宽高100%、auto

最新推荐文章于 2023-07-25 11:36:26 发布
最新推荐文章于 2023-07-25 11:36:26 发布
阅读量2k 收藏 4
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31680159/article/details/89139794
版权

父元素宽高固定的情况下，子元素为block、inline-block、float时与其宽高100%、auto相互间的影响

以下分三种情况介绍（子元素分别为block、inline-block、float三种情况。每种情况分四类：宽高同为百分比、宽为auto高为百分比、宽为百分比高为auto、宽高同为auto。），文章有点长，结论在文末。

一、子元素display:block;

1.1、子元素宽高都为父元素的百分比。width:70%;与height:100%;

结论：子元素的width和height设置成百分比后，子元素的content内容宽高会根据父元素的width、height来计算。

<body>
<style type="text/css">
.wrapper{
	width: 300px;
	height: 200px;
	background-color: pink;
	border: 3px solid red;
}
.one{
	width: 70%;
	height: 100%;
	background-color: #6e95ed;
	border: 5px solid;
}
</style>
<div class="wrapper">
	<div class="one">A BOX</div>
</div>
</body>

在这里插入图片描述

1.2、子元素设置width:auto;height:100%;

结论：子元素宽度设置为auto之后，子元素的width+padding+border+margin的和为父元素的宽度，及子元素的content内容宽度会根据父元素的宽度自适应。

.one{
	width: auto;
	height: 100%;
	background-color: #6e95ed;
	border: 5px solid;
	margin: 20px;
}

在这里插入图片描述

1.3、子元素设置width: 100%;height: auto;

结论：子元素高度设置为auto的时候，并不会像宽度为auto时一样根据父元素自适应。

.one{
	width: 100%;
	height: auto;
	background-color: #6e95ed;
	border: 5px solid;
	margin: 20px;
}

在这里插入图片描述

1.4、子元素设置width: auto;height: auto;

结论：当宽高都为auto时，只有宽度会自适应，高度auto以实际内容高度支撑。

.one{
	width: auto;
	height: auto;
	background-color: #6e95ed;
	border: 5px solid;
	margin: 20px;
}

在这里插入图片描述

二、子元素设置display:inline-block;

2.1、子元素width:70%;height:100%;（结果同1.1）
.one{
	width: 70%;
	height: 100%;
	background-color: #6e95ed;
	border: 5px solid;
	display: inline-block;
}

在这里插入图片描述

2.2、子元素设置width:auto;height:100%;

结论：在display为inline-block的情况下，宽度为auto，不起作用。

.one{
	width: auto;
	height: 100%;
	background-color: #6e95ed;
	border: 5px solid;
	display: inline-block;
	margin: 20px;
}

在这里插入图片描述

2.3、子元素设置width: 100%;height:auto;（结果同1.3）

在这里插入图片描述

2.4子元素设置width: auto;height: auto;

在这里插入图片描述

三、子元素设置float:left;

3.1、子元素width:70%;height:100%;（结果同1.1、2.1）
.one{
	width: 70%;
	height: 100%;
	background-color: #6e95ed;
	border: 5px solid;
	/*margin: 20px;*/
	float: left;
}

在这里插入图片描述

3.2、子元素设置width:auto;height:100%;（结果同2.2）

在这里插入图片描述
结论：在display为float的情况下，宽度为auto，不起作用。

3.3子元素设置width: 100%;height:auto;（结果同1.3、2.3）

在这里插入图片描述

3.4、子元素设置width: auto;height: auto;（结果同2.4）

在这里插入图片描述
以上，可得出结论：
A、当子元素的宽高设置为100%时，会按照父元素的width和height的百分比来计算。border、padding、margin超出的部分会溢出。
B、当子元素的宽度设置为auto时，子元素的width+padding+border+margin的和为父元素的宽度，及子元素的content内容宽度会根据父元素的宽度自适应。
C、当子元素的高度设置为auto时，并不会像宽度设置为auto一样，而是根据子元素里面的内容多少来进行高度自适应。
D、当子元素设置display:inline-block;或者float:left;时，子元素的宽度设置为auto，不起作用。
E、position:absolute;和position:fixed;效果同float。

延伸：
float与inline-block
元素浮动之后，状态会类似于inline-block。但是两者又有区别。行内元素浮动后，内部可设置宽高，块级元素浮动后，多个盒子可排列在一行，直到排满父盒子。
子元素不浮动，display设置为inline-block时，盒子之间会有间隙。消除的方法就是，给父元素添加font-size:0;然后子元素再重新设置font-size。
子元素设置float浮动的话，盒子之间是没有间隙的。

<body>
<style type="text/css">
.wrapper{
	width: 300px;
	height: 200px;
	background-color: pink;
	border: 3px solid red;
}
.one{
	width: 20%;
	height: 70%;
	background-color: #6e95ed;
	border: 5px solid;
	display: inline-block;
	/*float: left;*/
}
</style>
<div class="wrapper">
	<div class="one">A BOX</div>
	<div class="one">A BOX</div>
	<div class="one">A BOX</div>
</div>
</body>

在这里插入图片描述

不安分的魔菇
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
父子元素的宽度
chenlim87的博客
10-09 1841
父子元素的宽度 1.正常情况 <style> .parent{ width: 200px; height: 300px; background-color: aquamarine; } .child{ width: 100%; background-color: red; } </style> <div class="parent"> <div class="ch
子元素宽、高设置为100%继承父级元素宽、高遇到的问题
weixin_30480583的博客
02-26 995
当子元素宽、高设置为100%时，可以继承父级元素的宽、高，但是body想继承父级元素的宽高是 html就得设置宽高100%了（此时也是继承的document的宽高，又或是window的宽高），或者这是position（定位），以此来继承父级元素的宽高，达到body的宽高占满整个屏幕。。。 转载于:https://www.cnblogs.com/Jack-wm/p/6445245.html...
绝对定位的元素宽度自动撑开
xiamoziqian的博客
07-09 1569
position:absolute; white-space: nowrap;
如何实现固定宽高父节点，动态子节点添加自适应大小
赏樱看雪撸代码
07-31 998
首先看下效果： 初始基础效果 其中看板里面的数据是动态新增的，通过加号按钮添加不同的div，这样的话就存在一个整体div的添加过程，看板就多一个模块，看看多几个模块的效果： 多个div效果 很多个div效果 效果也看了，就不怀疑我在吹牛逼哈，下面介绍一下这个实现的过程： 1：首先获取父节点的相对的宽高大小 获取方法：var fuwidth = $(父节点).width() 和var fuheight = $(父节点).height() 2：获取子div的个数和横排放多少个 这个我用的是json数组假数
关于元素绝对定位时的auto问题以及绝对定位元素在父元素中水平垂直居中
qq_43750656的博客
12-06 1309
首先说一下绝对定位元素的特点 绝对定位的元素会脱离文档流，不再占有原来的位置 绝对定位的元素会提升层级 绝对定位的元素是相对于最近的开启了定位的包含块进行定位的，如果没有包含于该元素的开启定位的元素，则相对于html定位。 绝对定位会改变元素的性质，宽高默认都由内容撑开。 可通过left，right，top，bottom设置元素的偏移量 开启了绝对定位的元素但没有设置偏移量，则元素位置不会改变。 关于绝对定位的元素的auto问题 绝对定位的元素在水平方向上需要满足该等式： lef
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
然而，当涉及到iframe的高度自适应时，如果子页面与父页面不在同一个域名下，就会出现JavaScript跨域问题，导致父页面无法直接获取子页面的高度信息。解决这个问题有多种策略，以下是一些常用的方法： 1. **...
css 高度自适应的问题示例探讨
09-25
问题在于，如果父元素没有明确的高度设定，那么这个百分比值将无法计算，因此子元素的高度会是0。例如，以下代码中的`#center`元素并不会按预期显示： ```css #center { height: 100%; } ``` 为了解决这个问题，...
浅谈css元素居中
09-24
对于行内元素，如文本，可以简单地通过设置其父元素的`text-align: center;`来实现水平居中。这种方式适用于行内内容，如文字、链接等。 对于块级元素，有以下两种常见方法： 1. **使用`margin: 0 auto;`**：这...
css如何让浮动元素水平居中
09-03
子元素同样设置为左浮动，但通过相对定位，`right`属性设置为50%（或者`left`属性设置为-50%），这样子元素就会相对于自身的位置向左移动其宽度的一半，从而达到居中效果。 ```html 我是浮动的 我也是居中的 ...
Vue.directive 实现元素scroll逻辑复用
10-15
它等于元素的 clientHeight 加上 padding，或者在包含子元素的情况下，等于子元素的 clientHeight 加上子元素的所有 padding, margin, border 以及伪元素的尺寸。 `Element.scrollTop` 属性则表示元素内部内容相...
绝对定位布局
最新发布
Wangzhenqi52111的博客
07-25 137
3.2 marginleft/margin-right和left/right同时设置时，多余部分给left/right吸收。这里son宽加起来等于240px<fa的宽500px，所以多余的给right吸收，这里的right就变成了270px。3.3 width和left/right同时设置auto时，多余部分给left/right吸收。4.1 有left/right，多余部分就给left/right吸收。5.1 有left/right，多余部分就给left/right吸收。这里多余部分给left吸收。
[CSS]使用绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化
Miss卿
07-31 6017
测试demo 源代码： html, body{ height:100%; padding:0; margin:0; } .div1{ position:absolute;
父元素设置max-height，子元素高度设置百分比，子元素继承父元素高度失败
06-26 1118
小程序里碰到的，最外层page高度 100%，里边第一层盒子高度为 max-height: 60%;第一层盒子里有 title，content，这个 content 高度要随着第一层盒子高度走，最高为第一层盒子的高度减去 title 的高度，如果高度超出第一层盒子高度了需要做滚动处理。利用 flex ，只需要加三行代码即可，甚至如果布局再简单一点，只需要加一行代码就可以。可以看到这个高度是没继承下来的，设置了百分比或者 calc 百分比计算也没用。
绝对定位实现与父元素一样的宽高，有内边距的情况
weixin_30484247的博客
06-19 333
some-class { 　　position:absolute; 　　top:0px; 　　right:0px; 　　bottom:0px; 　　left:0px; 　　width:auto; 　　height:auto; } 转载于:https://www.cnblogs.com/yezongyang/p/5597426.html...
absolute定位宽高尺寸继承
weixin_43926275的博客
06-10 2077
当需要设计元素叠加效果时，常常会用掉position:absolute属性。有经验的人告诉我们，使用position:absolute时，最好将其父元素设置成position:relative。那么如果没有设置会发生什么奇怪的事情呢？ <div class="parents"> <div class="children"> </div> </div> 创建两个div，为了便于区分，将父元素背景设置为黑色，子元素
html中关于元素height属性的%问题
weixin_43178466的博客
05-30 327
html中height可以用百分比形式来表示 其百分比是相对于父元素的高度来确定的 因此使用%的前提是父元素的高度确定 假如父元素并没有设置确定的高度，而是默认的自适应，那么子元素设置height为%则没有效果，除非父元素为html（html的百分比高度是相对于浏览器高度来确定的） ...
css绝对定位 自适应宽度的问题
liyangready的专栏
11-09 8596
css绝对定位的元素，如果不设定宽度，宽度如何计算？
html怎么让div上浮,css - 如何使浮动div的父级100％高度？
weixin_39969340的博客
06-18 3040
css - 如何使浮动div的父级100％高度？这是HTML：Test这是CSS：#inner {float: left;height: 100%;}在使用Chrome开发人员工具进行检查后，内部div的高度为0px。如何强制它为父div的高度的100％？Nathan Osman asked 2019-02-21T10:36:13Z11个解决方案123 votes对于#inner高度要根据其内容...
关于css中height:100%无效的问题
a951593826的博客
10-14 769
做项目的时候想要让一个div块自适应浏览器按比例宽度和高度占据页面左边，css是这样的, .nav-left{ float:left; width:15%; height:100%; } 结果发现，给边框加上颜色，发现是空白的，也就是说width和height都没有生效。 但是如果给这个div块加上内容，比如说加上背景...
css设置父元素高度后，子元素高度超出父元素解决方法
05-28
设置父元素的 `overflow` 属性为 `auto`，这样当子元素的高度超出父元素时，会自动出现滚动条，从而可以滚动显示子元素的内容。 ```css .parent { height: 200px; /* 设置父元素高度 */ overflow: auto; /* 设置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值