css3中宽高属性值及calc用法
法定属性值：
fill-available、fit-content、max-content、min-content
引入: section{
width: 500px;
height:500px;
margin:50px auto;
background: blue;
}
div{
height: 200px;
background: yellow;
/*padding:30px*/
}
</style>
</head>
<body>
<section>
<div></div>
</section>(子元素未设置宽度,只有高度时,子元素的宽随着父元素),当子元素的宽度设置为100%时 ,效果和不设置宽度是一样的,跟随父元素;
当在子元素上增加padding时,子元素的宽度会在跟随父元素宽度的基础上变大,此时如果加上,fill-available,宽度仍是跟随父元素(元素自适应父元素的宽或者是高)
fill-available：
作用：让元素自适应父元素宽或者是高。 width: fill-available;
面试题： fill-available 和 width:100%的区别
回答: 对padding的影响
fit-content: 让一个块元素，适应内容的一个宽度
<style>
*{
padding: 0;
margin:0;
}
section{
height: 200px;
background: orange;
margin: 0 auto;
}
div{
width: 100px;
height: 100px;
background: blue;
margin: 0 10px;
float: left;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
问题:如何让里面的div居中显示?
回答:给父元素加上width:fit-content(块元素，适应内容的一个宽度);再居中(margin:0 auto)
max-content
width:max-content;
min-content
width:min-content;
Calc
引入: <style>
*{
padding:0;
margin:0;
}
body,html{
height: 100%;
}
.left{
width: 200px;
height: 80%;
background:pink;
float: left;
}
.right{
height: 100%;
background: orange;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>(此时可以实现两栏布局)
问题:如果能算出右边的宽的话可以直接加浮动,但是此时不知道宽是谁,如何解决
回答:使用calc函数,已知左边得宽度,可以使用calc函数算出右边的宽度(注:减号两边的空格必须存在,)
<style>
*{
padding:0;
margin:0;
}
body,html{
height: 100%;
}
.left{
width: 200px;
height: 80%;
background:pink;
float: left;
}
.right{
width: calc(100% - 200px);
height: 100%;
background: orange;
float: left;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">1111</div>
</body>
浙公网安备 33010602011771号