css3伸缩布局盒模型(一)
程序员文章站
2022-04-25 10:44:45
...
容器的设置语法是:
display:box|inline-box
我们来看看它们的区别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3的伸缩布局</title>
<style>
*{
margin: 0;
padding: 0;
}
body>div{
border: 1px solid #cccccc;
margin: 20px;
padding: 10px;
}
div>div{
border: 1px solid #ff95b2;
width:100px;
display: inline-block;
}
.box{
display: -webkit-box;
}
.inline-box{
display: -webkit-inline-box;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="inline-box">
<div>e</div>
<div>f</div>
<div>h</div>
<div>g</div>
</div>
</body>
</html>来看看看结果:
当我们减小页面大小时:
很明显,当我们设置为box时,元素占满整行
而inline-box时不会占满一整行
当页面缩小到一行容不下里面的内联元素时,默认自动分行
上一篇： 0307-屏幕适配