使用position + left: 0;top: 0;bottom: 0;right: 0 达到全屏幕或者居中
.div1{
position: relative;
width: 600px;
height: 600px;
background: yellow;
}
.div2{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: red;
margin: auto;
}
<div class="div1">
<div class="div2">
</div>
</div>
复制代码
效果如下：把div1的margin,width,height，就会跟父元素一样宽高
使用position+transform: translate(-50%,-50%)居中
.div2{
width:100px;
height:100px;
background:red;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.div1{
position: relative;
width: 600px;
height: 600px;
background: yellow;
}
<div class="div1">
<div class="div2">
</div>
</div>
复制代码
transform改变position:fixed,使其不能固定
.div2{
width:100px;height:100px;background:red;position:fixed;
}
.div1{
transform:scale(1);
position: relative;
width: 600px;
height: 600px;
background: yellow;
}
<div class="div1">
<div class="div2">
</div>
</div>
复制代码
水平横向滚动方法
float:left
<body>
<div class="box">
<div>
<div style="background: yellow;"></div>
<div style="background: pink;"></div>
<div style="background: blue;"></div>
<div style="background: black;"></div>
</div>
</div>
</body>
</html>
<style>
.box{
width: 100px;
height: 100px;
background: red;
overflow: hidden;
overflow-x: scroll;
}
.box>div{
float: left;
width: 500px;
height: 90px;
}
.box>div>div{
display: inline-block;
width: 100px;
height: 90px;
}
</style>
复制代码
display: flex;和flex: none;
<body>
<div class="box">
<div style="background: yellow;"></div>
<div style="background: red;"></div>
<div style="background: blue;"></div>
<div style="background: black;"></div>
</div>
</body>
</html>
<style>
.box{
width: 100px;
height: 100px;
display: flex;
flex-direction: row;
background: red;
overflow: hidden;
overflow-x: scroll;
}
.box>div{
flex: none;
width: 100px;
height: 90px;
}
</style>
复制代码
white-space: nowrap
<body>
<div class="box">
<div style="background: yellow;"></div>
<div style="background: pink;"></div>
<div style="background: blue;"></div>
<div style="background: black;"></div>
</div>
</body>
</html>
<style>
.box{
width: 100px;
height: 100px;
white-space: nowrap;
background: red;
overflow: hidden;
overflow-x: scroll;
}
.box>div{
display: inline-block;
width: 100px;
height: 90px;
}
</style>
复制代码
