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

2021-07-24 21:31:09

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

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

码农公寓