css细枝末节（1）

(1)line-height

行高指的是文本行的基线间的距离。
基线并不是汉字的下端沿，而是英文字母"x"的下端沿

(2)@import 和 是常用的两种引入CSS文件的方式

1. 使用@import会增加页面的总体加载时间。
2. IE中使用@import会改变文件的加载顺序。这可能会增加CSS文件的加载时间，阻碍页面渲染

---

(3)线性渐变是不支持动画 animation 的

---

(4)浏览器默认有8px的margin

---

(5)行内(内联)元素margin,padding横向设置有效，纵向设置无效

---

(6)text-decoration:line-through

---

(7)font-style:italic

---

(8)块状元素中文本，图片水平居中，用text-align:center

如果要垂直居中，就要将line-height设置为盒子高度

---

（9）overflow：hidden会使元素BFC化，div内任何元素无论怎么都是在内部，不会影响div外面的元素

---

（10）margin是以自身作为参照进行位置偏移的

margin 的百分比值参照其包含块的宽度进行计算，书写模式变成纵向的时候，其参照将会变成包含块的高度

---

（11）首字母下沉

p::first-letter{
        color: green;
        font-size: 3em;
        margin: 0 0.2em 0 0;
        float: left;
    }

---

（12）导航栏出现莫名的距离顶部的外边距

未清除ul的内外边距

（13）z-index

z-index只能应用于定位元素（即设置了 position 属性为非 static 值）

---

（14）内联与块级元素

内联元素 a strong em span

• 宽高由内容撑开
• 可以排在一行
• 不支持上下的padding跟margin

• 代码换行会产生间隙，间距大小取决于父级font-size的大小

  
  
  

  image.png

链接到一个网站地址，必须加上http://

image.png

image.png

---

（15）css3分栏

1. column-count: 3; 分多少栏
2. column-gap: 100px; 分栏间隔的宽度
3. column-rule: 3px solid #333 分栏间隔线的样式

image.png

image.png

---

---

（18）nth-child()

image.png

（19）inline

image.png

---

image.png

---

确实不能设置宽高，然后垂直方向的padding,margin无效，多个内联元素换行排列还会因为空元素产生间距

---

image.png

---

padding

image.png

text-align可继承

（21）css选择器优先级

image.png

---

（22）text-size-adjust

image.png

---

（23）文字超出省略

elipsis 省略

image.png

（24）left，top等定位属性在添加了position后才生效