寒假周报一

寒假周报一

浏览器兼容性

问题产生原因

• 市场竞争
• 标准版本的变化

chrome 54 支持部分css3的功能

厂商前缀

比如: box-sizing, 谷歌旧版本浏览器中使用 -webkit- box-sizing

• 市场竞争, 标准没有发布
• 标准仍在讨论中 (草案) , 浏览器厂商希望先支持

IE: -ms-
Chrome, safari: -webkit-
opera: -o-
Firefox: -moz-

浏览器在处理样式或元素时,使用如下的方式:
当遇到无法识别的代码时,直接略过.

1. 谷歌浏览器的滚动条样式

滚动条样式: div::-webkit-scrollbar
滚动条滑块样式: div::-webkit-scrollbar-thumb
滚动条轨道样式: div::-webkit-scrollbar-track
滚动条两端按钮: div::-webkit-scrollbar-button

实际上,在开发中使用自定义的滚动条,往往是使用div + css + JS实现的

2. 多个背景图中选一个作为背景

css hack

根据不同的浏览器 (主要针对IE) ,设置不同的样式和元素

1. 样式

IE中,css的特殊前缀

• *属性,兼容IE5 / IE6 / IE7
• _属性,兼容IE5 / IE6
• 属性值\9,兼容IE5~IE11
• 属性值\0,兼容IE8~IE11
• 属性值\9\0,兼容IE9~IE10

IE5 / 6 / 7的外边距bug,浮动元素的左外边距翻倍

2. 条件判断

    <p>
        这是非IE浏览器
    <p>

渐进增强 和 优雅降级

两种解决兼容性问题的思路,会影响代码的书写风格

• 渐进增强: 先适应大部分浏览器,然后针对新版本浏览器加入新的样式

书写代码时,先尽量避免书写有兼容性问题的代码,完成之后,在逐步加入新标准中的代码.

• 优雅降级: 先制作完整的功能,然后针对低版本的浏览器进行特殊处理

书写代码时,先不用特别在意兼容性,完成整个功能之后,在针对低版本浏览器处理样式

caniuse

查找css兼容性

caniuse.com

样式补充

display:list-item

设置为该属性的盒子,本质上仍然是一个块盒.但同时该盒子会附带另一个盒子

元素本身生成的盒子叫作主盒子,附带的盒子称为次盒子,主盒子和次盒子呈水平排列

涉及的css:

1. list-style-type-

设置次盒子中内容的类型

2. list-style-position

设置次盒子相对于主盒子的位置

3. 速写属性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

一块区域

特点:

1. 最小宽度为视口高度
2. 最小高度为视口高度

HTML元素的背景

覆盖画布

body元素的背景

如果HTML元素有背景,body元素正常 (背景覆盖边框盒)

如果HTML元素没有背景,body元素背景覆盖画布

关于画布背景图

1. 背景图的宽度百分比,相对于视口
2. 背景图的高度百分比,相对于网页高度
3. 背景图的横向位置百分比 / 预设值,相对于视口
4. 背景图的纵向位置百分比 / 预设值,相对于网页高度

算法题心得

题目:

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
int main()
{
        int a,b;
        while(scanf("%d %d",&a,&b)!=EOF)
        {
                 printf("%d\n",a+b);
        }
        return 0;
}

第一眼看到这个题目时我感觉特别简单，但我却犯了一个致命的错误， 当我没有考虑到多组数据的输入和的情况下，我针对这到题目所编写的代码是：

#include 
int main()
{
   int a,b; 
   scanf("%d %d",&a,&b);
   printf("%d\n",a b);
   return 0;
}

虽然运行结果满足题目的样例但只能进行一次输入输出便结束了，但在题目要求的输入格式一栏中明确要求将文件进程到文件结束 , 所以我应用了EOF进行改进 , 得到了正确的代码.