css面試常考知識點

垂直水平居中的3種方法

html

<div class="wrap">
  <div class="div1"></div>
  <div class="div2"></div>
</div>複製代碼

css

第一種方法： flex

// 父容器
display: flex;
justify-content: center;
align-items: center;複製代碼

第二種方法： position

// 父容器
position: relative;

// 子容器
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;複製代碼

第三種方法： position + transform

// 父容器
position: relative;

// 子容器
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)複製代碼

一邊固定寬度一邊寬度自適應

使用flex佈局能夠實現

.wrap{
    display: flex;
    justify-contetn: space-between;
}
.div1{
    min--width: 200px;
}
.div2{
    width: 100%;
}
html,body, div{
    height: 100%;
    margin: 0;
}複製代碼

文本超出部分顯示省略號

//單行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

//多行
display: -webkit-box;
-webkit-box-orient: vertical
-webkit-line-clamp: 3; //最多顯示幾行
overflow: hidden;複製代碼