「这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战」
CSS width 和 height 的:auto 和 100%
一、 width:auto和height:auto
width、height的默认值都是auto
。
width: auto
在块级元素中,width: auto
会自适应撑满父元素宽度(流体布局中)。这里的撑满和width: 100%
的固定宽度不同,而是像水一样能够根据margin
值的不同而自适应父元素的宽度。
在内联元素中,width: auto
则呈现出包裹性,即元素宽度由子元素的宽度决定。
height: auto
无论内联元素还是块级元素,height: auto
都是呈现出包裹性,即元素高度由子元素的高度决定。
正常的流体布局中,块级元素会默认占满一行。这里的占满可以分为两种情况。
- 块级元素的
width
是固定值
,margin
是auto
,则margin
会撑满剩下的空间; - 块级元素的
margin
是固定值
,width
是auto
,则width
会撑满剩下的空间。
.container{
width: 150px;
margin: auto;
height: 50%;
background-color: aqua;
}
.container {
width: auto;
margin: 0 50px;
height: 50%;
background-color: aqua;
}
二、 width:100%和height:100%
width:x% :定义基于包含块(父元素)宽度的百分比宽度。 height:x%:基于包含它的块级对象的百分比高度。
<body>
<div class="wrap">
<div class="container">
<div class="content">
Hello World!
</div>
</div>
</div>
</body>
.wrap {
width: 100%;
height: 100px;
background-color: aquamarine;
}
.container {
position: relative;
width: 50%;
}
.content {
width: 100%;
position: absolute;
background-color: aqua;
}
这里 .content的100%是相对于 .container
.wrap {
width: 100%;
height: 100px;
background-color: aquamarine;
}
.container {
/* position: relative; */
width: 50%;
}
.content {
width: 100%;
position: absolute;
background-color: aqua;
}
这里 .content的100%是相对于 .wrap
这里要注意区分父元素和包含块的概念
一般情况下,包含块就是父元素,而当元素设置了定位等脱离了常规文档流之后,包含块就不一定是父元素了,需要根据具体情况分析
三、height:100% 和 height:auto 的区别
height:auto,是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。
注意父元素height: auto
会导致子元素height: 100%
百分比失效。
如果想要子元素的height:100%
生效,
那么父元素需要设定显式高度值;或者子元素使用绝对定位。(绝对定位元素百分比高度根据父元素的padding box计算,非绝对定位元素百分比高度是根据父元素的content box计算)
此处补充一个demo
通过切换.content的position开关,观察.content的高度变化。
position:absolute 打开时
.content的父元素是 .wrap,高度根据.wrap 的 padding box 计算
position:absolute 关闭时
.content的父元素是 .container,高度根据.container 的 content box 计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
height: 200px;
background-color: aquamarine;
position: relative;
padding: 50px 0;
}
.container {
height: 100px;
background-color: rgb(255, 192, 203);
padding: 50px 0;
}
.content {
height: 50%;
/* position: absolute; */
background-color: aqua;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="content">
Hello World!
</div>
</div>
</div>
</body>
</html>