一.使用斜杠/分割的关键字
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的位置调整
