css知识点汇总

一边固定宽度一边宽度自适应

<div class="wrap"> 
 <div class="div1"></div> 
 <div class="div2"></div>
</div>
.wrap {  
 display: flex; 
 justify-content: 
 space-between;
}
.div1 {
  min-width: 200px;
}
.div2 { 
 width: 100%;  
 background: #e6e6e6;
}
html,body,div {
  height: 100%;
  margin: 0;
}

水平垂直居中的方式

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%);

文本超出部分显示省略号

单行

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;

已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形

需要用到css的object-fit属性

div {
  width: 200px;  
  height: 200px;
}
img {   
  object-fit: cover;  
  width: 100%;   
  height: 100%;
}

link和@import的区别

两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM改变样式；而@import不支持。