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

时间:2024-04-30 23:04:20

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


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的位置调整