JZTXT

前端的一些布局技巧

发布时间 2023-09-23 16:03:40作者: 数星观月

一、当前页面无拖动的滑轮

这个只需要设置占据整个页面容器的高为100vh，页面的body的margin为0就行了

body{
    margin: 0;
}
.最大容器类名{
    height: 100vh;
}

二、flex布局

display:flex就是将盒子设置成一个弹性盒子，弹性布局属性，还可以赋值block块级、inline行内等属性。当我们将盒子设置成flex后，子元素的float、clear和vertical-align属性将会失效。

flex-direction是设置主轴方向，默认主轴x轴水平向右，侧轴y轴垂直向下，子元素是跟着主轴来排列的。有四个属性值：row（默认值），主轴水平方向，从左向右；row-reserve，主轴水平方向，从右向左；column，主轴垂直方向，从上到下；column-reserve，主轴垂直方向，从下到上。

justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，有多个属性。

1、设置盒子中的元素沿着y轴从上到下排列，且元素垂直居中。

.类名{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

2、设置盒子中的元素两端对齐

.类名{
    display: flex;
    justify-content: space-between;
}