1、
- H1到 h6标签，相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次（当然可以超过，但是不利于搜索SEO）。
- H2以后的这些标签可以在一个页面中有多个，但是不要滥用，滥用会导致网页的SEO受影响，搜索引擎会认为我们作弊。
2、
- jpg
色彩还原高，适合复杂颜色图片，有损压缩，比如banner- gif
色彩效果最低，无损压缩，支持简单透明，支持动画，适合颜色比较少，不适合渐变色。- png
PNG的优点是，清晰，无损压缩，可渐变透明，具备几乎所有GIF的优点；缺点是不如JPG的颜色丰富，同样的图片体积也比JPG略大。
PNG有着另一个优点，那就是逐次逼近显示(progressive display)：传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图像的细节，即先显示低分辨率显示图像，从模糊到清晰，然后逐步提高它的分辨率。这是一个很好的用户体验。- 总结：gif和png基本差不多，色彩比较少的直接gif，如果图片动画用gif。对色彩要求高的用jpg，小图标用png
3、关于css的显示模式
通过display可以修改显示模式为行内，块级，行内-块级
还有一个参数是none，当一个元素的显示模式被改为none时，此元素被从页面中移除掉，不进行显示
此外拓展一下，有一个属性为visibility:hidden，他可以让元素不进行显示，但是还会占页面中的位置
4、关于内外边距（padding,margin）
- 块元素，行内块元素：内外边距的上下左右都可正常使用
- 行内元素：尽量不要给“行内元素”设置上下的内外边距，因为在设置margin的上下距离时没有效果，设置padding的上下距离时虽然盒子有大小，但是不占位置。padding，margin的左右边距可正常使用
注意：行内元素上下的边框也不占位置
5、在用img标签后下方有空隙的解决办法
原因是因为img属于内联元素,而内敛元素会以基线对齐,这里可能会有疑问,这里没有其它内联元素啊?它以什么基线对齐呢?
在img标签前增加一个字符'x'一试便知
image.png
- 解决办法：设置vetical-align:top/middle即可,让它不跟基线对齐。
因为只有行内元素有这个特性，所以把img转为块级元素也可以解决，但是这样不推荐。
如果其他办法行不通就使用font-size=0；
6、垂直居中vertical-align
图片等行内块元素默认和文字的基线对齐。
作用：常用于行内块元素（img、表单元素等等）和文字的对齐效果，只需在行内块元素中设置vertical-align:middle/top/baseline/bottom即可。
注意：该属性对于块级元素无效
7、伪类和伪元素的合并使用
随便举个例子：当停留在div上时给div之前添加“你是div”文字
div:hover::before {
content:"你是div";
}
8、
-webkit- (谷歌, Safari, 新版Opera浏览器等)
-moz- (火狐浏览器)
-o- (旧版Opera浏览器等)
-ms- (IE浏览器 和 Edge浏览器)
9、
ondragstart="return false" 作用是不让文子被拖动
user-select:none; /让文本不能被选中/
10、之前做过的练习发现的是，关于z-index
假如有两个盒子，A是先添加的，B后添加，然后两个都使用了定位,他们里面又都有一个元素分别对应a, b
需求： 让A中的a使用动画的方式走到B中，但是b要压住a的一半
实现：因为B是最后添加的，所以B会压着A，就是a到B中会被压着无法显示，所以我们需要将A的z-index调高，，a在B中就可以显示了，但是这样a会压着B中的b，因为有z-index有从父现象。
怎么样才能让B中的b压着a呢？原来只需要调高b的z-index就可以了，但是要注意的是不可以给B设置z-index，否则无效（没有给B设置z-index的值时，z-index的值默认是auto, z-index： auto 和 z-index: 0不是一回事）
网友评论