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;复制代码