前端css兼容性与易混淆的点

一.使用斜杠/分割的关键字

---

1.font

H2{
    font:12px/100% sans-serif;
}

分割的分别是 字体大小 与 行高 ,其他关键是用空白符分割。

2.background

div{
 background:#fff url(../images/xx.jpg) center center/50% 50%
}

分割的是background-position/background-size

3.border-radius

div{
    border-radius: 30% / 20%;
}

分隔的是:水平半径/垂直半径

二.布局

---

注意父元素的定位方式 是相对 还是静态 这决定了其内部绝对定位与浮动元素

三.box-sizing

---

1.常规的盒模型: box-sizing : content-box(width == content 不包括padiing border)

2.box-sizing : border-box width == content + padiing + border(相当于低级浏览器的怪异模式)

四.图片格式区别

---

格式 区别

jpg 有损压缩
png 无损压缩,透明图
gif 动态图像
webp 支持有损压缩和无损压缩的图片文件,压缩率极高,且画面丰富(有浏览器兼容性问题)

五.px,em,rem的区别

---

em,rem 相对大小

em相对父元素font-size

rem相对html根元素的font-size

px 绝对大小

六.不能继承的属性

---

多数边框类属性:如边框，补白，背景等。

七.css中选择器的权重

---

依次变小:id>class>标签

八.css颜色的问题

---

尽量使用16进制的颜色，类似#fff;一位内16进制的颜色是确定的一个色值。

而red这类的颜色值不是确定的，可能会受到用户代理即user agent stylesheet的影响。

九.text-align text-indent vertical-align

---

1.text-align:作用于块级元素

　　如果要使得img居中，使用text-align是不行的，因为img不是块状元素。只需要在img外面套一层div即可。

<div style="text-align:center">
    <img src="XXX.jpg"/>
</div>

2.text-indent:作用于块级元素

3.vertical-align:作用于行内元素,基于baseline的位置调整