寒假周报一
浏览器兼容性
问题产生原因
- 市场竞争
- 标准版本的变化
chrome 54 支持部分css3的功能
厂商前缀
比如: box-sizing, 谷歌旧版本浏览器中使用 -webkit- box-sizing
- 市场竞争, 标准没有发布
- 标准仍在讨论中 (草案) , 浏览器厂商希望先支持
IE: -ms-
Chrome, safari: -webkit-
opera: -o-
Firefox: -moz-
浏览器在处理样式或元素时,使用如下的方式:
当遇到无法识别的代码时,直接略过.
- 谷歌浏览器的滚动条样式
滚动条样式: div::-webkit-scrollbar
滚动条滑块样式: div::-webkit-scrollbar-thumb
滚动条轨道样式: div::-webkit-scrollbar-track
滚动条两端按钮: div::-webkit-scrollbar-button
实际上,在开发中使用自定义的滚动条,往往是使用div + css + JS实现的
- 多个背景图中选一个作为背景
css hack
根据不同的浏览器 (主要针对IE) ,设置不同的样式和元素
- 样式
IE中,css的特殊前缀
- *属性,兼容IE5 / IE6 / IE7
- _属性,兼容IE5 / IE6
- 属性值\9,兼容IE5~IE11
- 属性值\0,兼容IE8~IE11
- 属性值\9\0,兼容IE9~IE10
IE5 / 6 / 7的外边距bug,浮动元素的左外边距翻倍
- 条件判断
<!--[if IE]>
<p>
这是IE浏览器
<p>
<![endif]-->
<!--[if !(IE)]><-->
<p>
这是非IE浏览器
<p>
<!--<![endif]-->
渐进增强 和 优雅降级
两种解决兼容性问题的思路,会影响代码的书写风格
- 渐进增强: 先适应大部分浏览器,然后针对新版本浏览器加入新的样式
书写代码时,先尽量避免书写有兼容性问题的代码,完成之后,在逐步加入新标准中的代码.
- 优雅降级: 先制作完整的功能,然后针对低版本的浏览器进行特殊处理
书写代码时,先不用特别在意兼容性,完成整个功能之后,在针对低版本浏览器处理样式
caniuse
查找css兼容性
样式补充
display:list-item
设置为该属性的盒子,本质上仍然是一个块盒.但同时该盒子会附带另一个盒子
元素本身生成的盒子叫作主盒子,附带的盒子称为次盒子,主盒子和次盒子呈水平排列
涉及的css:
list-style-type-
设置次盒子中内容的类型
list-style-position
设置次盒子相对于主盒子的位置
- 速写属性
list-style
清空次盒子
list-style:none
图片失效时的宽高问题
如果img元素的图片链接无效,img元素的特性和普通行盒一样,无法设置宽高
行盒中包含行块盒或可替换元素
行盒的高度与它内部的行块盒或可替换元素的高度无关
text-aline:justify
text-align:
- left: 左对齐
- right: 右对齐
- center: 居中
- justify: 除最后一行外,分散对齐
处理最后一行分散对齐:
p::after{
content: "";
display: inline-block;
width: 100%;
}
direction 和 writing-mode
开始 start -> 结束 end
左 left -> 右 end
开始和结束时相对的,不同国家有不同的习惯
左右是绝对的
direction设置的是开始到结束的方向
writing-mode设置的是文字书写的方向
utf-8字符
伪元素选择器书写实体字符时应当将&#x
替换成\
body背景
画布 canvas
一块区域
特点:
- 最小宽度为视口高度
- 最小高度为视口高度
HTML元素的背景
覆盖画布
body元素的背景
如果HTML元素有背景,body元素正常 (背景覆盖边框盒)
如果HTML元素没有背景,body元素背景覆盖画布
关于画布背景图
- 背景图的宽度百分比,相对于视口
- 背景图的高度百分比,相对于网页高度
- 背景图的横向位置百分比 / 预设值,相对于视口
- 背景图的纵向位置百分比 / 预设值,相对于网页高度
算法题心得
题目:
Calculate A + B.
- Input
Each line will contain two integers A and B. Process to end of file.
- Output
For each case, output A + B in one line.
- Sample Input
1 1
- Sample Output
2
代码:
#include<stdio.h>
int main()
{
int a,b;
while(scanf("%d %d",&a,&b)!=EOF)
{
printf("%d\n",a+b);
}
return 0;
}
第一眼看到这个题目时我感觉特别简单,但我却犯了一个致命的错误, 当我没有考虑到多组数据的输入和的情况下,我针对这到题目所编写的代码是:
#include <stdio.h>
int main()
{
int a,b;
scanf("%d %d",&a,&b);
printf("%d\n",a b);
return 0;
}
虽然运行结果满足题目的样例但只能进行一次输入输出便结束了,但在题目要求的输入格式一栏中明确要求将文件进程到文件结束 , 所以我应用了EOF进行改进 , 得到了正确的代码.