CSS基础知识大回放

ui框架用多了，好多基础知识容易忘，记一下

 

---

text-indent: 56px;   首行缩进

---

<div    v-html='<p>jsjsjsjsjsj</p>'></div>    div中不能放任何内容，富文本会被解析然后再渲染

---

后端返回背景图片base64怎么解决   

let picSrc='data:image/png;base64,'+picSrc;

<img   :src="picSrc" alt="附件" />

 

后端返回PDF的base64怎么解决  

let picSrc='data:application/pdf;base64,'+picSrc;   使用vue插件

---

背景图片：

contain背景图片等比缩放，不会被切割掉(根据height进行等比缩放)

no-repeat背景图片不平铺

<div :style="{ background: `url(${item.picSrc})`, height: '200px', backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }"></div>

 

 

图片

<img v-if="fileSrc" :src="fileSrc" alt="附件" />

图片不想被切割，也不想被压缩变形，怎么办？设置图片最大高度或者最大宽度，图片会自适应。缺点：确定不了图片的确定宽高

img{

max-width: 800px;

max-height: 700px;

}

---

动态class,记得加中括号，把表达式括起来:class="[isNo?'no':'yes','normal']"

---

第二个明明优先级高于第一个，但是white-space设置成nowarp不生效，

 这个时候改成  normal，会生效，如下图

 

---

 

伪类和伪元素

伪类选择器    子代伪类选择器  :nth-child(n)      链接伪类选择器    :link  :visited   :hover     :active      权重是10（并列的有 属性选择器、类选择器）

伪元素选择器   ::after   ::before    在真实的DOM前面或者后面加上content    权重是1（并列的有 标签选择器）