css的那些事

position定位

position:absolute;绝对定位，容易脱离文本流，不占用空间
position:relative;相对定位，不脱离文本流，占用空间

---

display:none和visibility:hidden的区别

共同点：都可以隐藏元素
不同点：display:none不占据文档的空间；visibility:hidden占用文本空间

---

v-show和v-if的区别

相同点：都可以隐藏元素
不同点：v-show占用空间，v-if不占用空间
注：如果要频繁切换某节点,使⽤v-show

---

行内元素、块级元素以及空元素

• 行内元素

span, a ,b(加粗),i/em/var/cite/dfn/address(斜体),u(下划线),strong(粗体),s/strike(删除线),big,small,sub(下标),sup(上标),font

• 块级元素（独占一行）

p,div,ol,ul,br,table,dl,h1-h6,li

• 空元素（没有内容的html元素）

br,meta,hr,link,input,img

---

css优先级

!important>id选择器>class选择器>标签选择器

---

选择器种类

• id选择器：#myId
• 类(class)选择器：.myClassName
• 标签选择器：div,p,h1
• 相邻（兄弟）选择器：h1+p
• 子选择器： ul>li
• 后代选择器：li a
• 通配符选择器：*
• 属性选择器：a[ref="external"]
• 伪类选择器：a:hover,li:nth-child,div:after

---

div文本超出显示省略符

//单行限制
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
//多行限制
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
//长文本换行
word-break:break-all;

---

css三种引用方式

1. 行间样式：通过style属性将样式写在标签中
2. 内部样式：写在本页面
3. 外部样式：单独写在一个页面被引用