面试常见问题(css)

一、不设置固定宽高 如何保持宽高比

1. 使用 padding-top 或 padding-bottom

利用 padding 的百分比来保持宽高比。百分比是相对于父元素的宽度的，因此可以利用这个特性：

<div class="aspect-ratio-box"></div>

.grid-container {
    display: grid;
    width: 100%; /* 宽度自适应 */
}

.grid-box {
    width: 100%; /* 宽度为父元素的 100% */
    height: 0; /* 高度为 0 */
    padding-bottom: 100%; /* 使用 padding-bottom 保持 1:1 比例 */
    background-color: lightblue; /* 设置背景色以便于观察 */
}

2. 使用 aspect-ratio 属性

.aspect-ratio-box {
    width: 100%; /* 宽度自适应 */
    aspect-ratio: 1 / 1; /* 设置宽高比为 1:1 */
    background-color: lightblue; /* 设置背景色以便于观察 */
}

二、3栏布局水平排版两边固定如何让中间撑满剩余空间

1. flex布局

<div class="box1">
    <div class="left">左</div>
    <div class="mid">中</div>
    <div class="right">右</div>
</div>

 .box1{
    width: 500px;
    height: 200px;
    display: flex;
    border: 1px solid black;
}
.box1 .left{
    width: 100px;
    height: 100%;
    background-color: #0059ff;
}
.box1 .mid{
    flex: 1;
    height: 100%;
}
.box1 .right{
    width: 100px;
    height: 100%;
    background-color: black;
    color: white;
}

2. 网格布局

<div class="box2">
    <div class="left">左</div>
    <div class="mid">中</div>
    <div class="right">右</div>
</div>

.box2{
    width: 500px;
    height: 200px;
    display: grid;
    grid-template-columns: 120px 1fr 110px;
    border: 1px solid black;
}
.box2 .left{
    height: 100%;
    background-color: #0059ff;
}
.box2 .mid{
    height: 100%;
}
.box2 .right{
    height: 100%;
    background-color: black;
    color: white;
}

3. 浮动

<div class="box3">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="mid">中</div>
</div>

.box3{
    width: 500px;
    height: 200px;
    border: 1px solid black;
}
.box3 .left{
    width: 100px;
    height: 100%;
    float: left;
    background-color: #0059ff;
}
.box3 .mid{
    height: 100%;
    margin-left: 100px;
    margin-right: 100px;
}
.box3 .right{
    width: 100px;
    height: 100%;
    float: right;
    background-color: black;
    color: white;
}

三、如何解决flex布局两端对齐最后一排不满个数两端对齐的情况

原理：利用伪元素撑满后面剩余的空间

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
  gap: 10px; /* 元素之间的间距 */
}

.item {
  background: lightblue;
  padding: 10px;
  box-sizing: border-box;
  flex: 0 1 100px; /* 灵活设置宽度，或根据需要调整 */
}

/* 解决最后一排少于个数的情况两端对齐的问题 */
.container::after {
  content: "";
  flex: 1;
}

四、css水平垂直居中的方法

<div class="out">
    <div class="inner"></div>
</div>

方法1：absolute + margin auto

.out{
    width: 100vw;
    height: 100vh;
    position: relative;
}
.inner{
    width:500px;
    height:500px;
    background: #f0a238;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

方法2：absolute + transform

.inner { 
   position: absolute; 
   top: 50%; 
   left: 50%;
   transform: translate(-50%, -50%);
   width:500px;
   height:500px;
   background: #f0a238;
}

方法3：table

.out {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.inner {
    width:500px;
    height:500px;
    background: #f0a238;
    display: inline-block;
}

方法4：flex布局

.out {
    display: flex;
    justify-content: center;
    align-items: center;
}

方法5：grid布局

.out {
    display: grid;
}
.inner {
    align-self: center;
    justify-self: center;
}