关于css: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. 内部款式：独自写在一个页面被援用