FLYSASA

Fair to be late, but never absent


  • 首页

  • 标签

  • 分类

  • 归档

2 数据类型运算符流程控制语句

发表于 2017-12-02 | 分类于 JavaScript

1.JavaScript 定义了几种数据类型? 哪些是原始类型?哪些是复杂类型?原始类型和复杂类型的区别是什么?

  • JavaScript语言的每一个值,都属于某一种数据类型。JavaScript的数据类型,共有六种。
    1.数值(number): 整数和小数(如1和1.34)
    2.字符串(string): 字符组成的文本(如“hello world”)
    3.布尔值(boolean):true(真)和false(假)两个特定值
    4.undefined: 表示“未定义”或不存在,即此处目前没有任何值
    5.null: 表示空缺,此处应有一个值,但目前为空
    6.对象(object):各中值组成的集合

  • 属于原始类型(primitive type)的有: 数值,字符串,布尔值

  • 属于复杂类型(complex type)的有: 对象
  • 特殊值:undefined和null
  • 原始类型与复杂类型的区别:
    原始类型是最基本的数据类型,不能再细分了。
    复杂类型的值,因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。

2.typeof和instanceof的作用和区别?

JavaScript有三种方法,可以确定一个值到底是什么类型。

  • typeof运算符
  • instanceof运算符
  • Object.prototype.toString方法

对于typeof:
1.数值、字符串、布尔值分别返回 number、string、boolean。

1
2
3
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"

2.函数返回function。

1
2
3
function f() {}
typeof f
// "function"

3.undefined返回undefined。

1
2
typeof undefined
// "undefined"

利用这一点,typeof可以用来检查一个没有声明的变量,而不报错。应用在实际编程中:

1
2
3
4
5
// 错误的写法
if (v) { } // ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") { }

4.除此以外,其他情况都返回object。

1
2
3
4
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"

对于instanceof
区分数组和对象

1
2
3
4
var o = {};
var a = [];
o instanceof Array // false
a instanceof Array // true

两者区别:
typeof运算符:运算符可以返回一个字符串,用以说明原数据的类型。
instanceof运算符:运算符可以判断一个变量是否是某个对象(类)的实例,返回值是布尔类型的。

3.如何判断一个变量是否是数字、字符串、布尔、函数

见上例

1
2
3
4
5
typeof 123 === 'number' 判断是否是数字
typeof '123' === 'string' 判断是否为字符串
typeof true ==='boolean' 判断是否为布尔
function f() {}
typeof f ==='function' 判断是否为函数

4.NaN是什么? 有什么特别之处?

NaN含义是Not a Number,表示非数字,NaN和任何值都不相等,包括自己。

1
2
NaN == NaN; //false
parseInt('abc'); //NaN

特别之处:
1.任何NaN的值进行操作都会返回一个NaN,
2.NaN与任何值都不相等包括其本身,即NaN === NaN也是false.

5.如何把非数值转化为数值?

有三个函数可以把非数值转换为数值
1
2
3
1. Number()
2. parseInt()
3. parseFloat()

第一个函数,即转型函数Number()可以用于任何数据类型,而另两个函数则专门用于把字符串转换成数值。这3个函数对于同样的输入会有返回不同的结果。

Number()函数的转换规则如下:
  • 如果是Boolean值,true和false将分别被转换为1和0;
  • 如果是数字值,只是简单的传入和返回;
  • 如果是null值,返回0;
  • 如果是undefinde,返回NaN;
  • 如果是字符串,遵循下列规则:
    1.如果字符串中只包含数字(包括前面带正号或负号的情况),则将其转换为十进制数值,即“1”会变成1,“123”会变成123,而“011”会变成11(注意:前导的零被忽略了);
    2.如果字符串中包含有效的浮点格式,如“1.1”,则将其转换为对应的浮点数值(同样,也会忽略前导零);
    3.如果字符串中包含有效的十六进制格式,例如“0xf”,则将其转换为相同大小的十进制整数值;
    4.如果字符串是空的(不包含任何字符),则将其转换为0;
    5.如果字符串中包含除上述格式之外的字符,则将其转换为NaN.
    如果是对象,则调用对象的valueOf()方法,然后依照前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,然后再次依照前面的规则转换返回的字符串值。
    parseInt()函数的转换规则如下:
  • 忽略字符串前面的空白字符,找到第一个非空白字符
  • 如果第一个字符不是-或者数字返回NaN
  • 如果第一个字符是数字字符,会继续解析第二个字符,直到解析完所-有后续字符或者遇到了一个非数字字符。例如“1234blue”会被转换为1234,因为“blue”会被完全忽略。
  • 0开头会当做八进制,0x开头会当做十六进制,但是可以指定第二个参数指定基数
    parseFloat() 与parseInt()函数类似,有两点区别
  • parseInt()在解析”22.34.5”时会将其转换为22,因为小数点并不是有效的数字字符;而parseFloat()可以将转换为22.34,因为parseFloat()在解析时遇到一个无效的浮点数字字符为止,而上述字符砖中第一小数点是有效的;
  • parseInt()与parseFloat()的第二个区别在于它始终都会忽略前导的零。

例

1
2
3
4
parseInt('blue'); //NaN 非空字符串转换为NaN
parseInt('-23ABS'); // -23
parseInt('0xf1'); // 241
parseInt('101', 2); // 5,后面的2代表101是二进制数

  1. ==与===有什么区别
    ===是严格意义上的相等,只需注意NaN和NaN不等就行了。而使用==的时候,javascript会帮我们做类型转换,造成一些匪夷所思的结果,那么使用==的时候在一下情况下会做相应的类型转换
    如果两个值类型相同,则执行严格相等的运算
    如果两个值的类型不同
    1.如果一个是null,一个是undefined,那么相等
    2.如果一个是数字,一个是字符串,先将字符串转为数字,然后比较
    3.如果一个值是true/false则将其转为1/0比较
    4.如果一个值是对象,一个是数字或字符串,则尝试使用valueOf和toString转换后比较
    5.其它就不相等了

6.==与===有什么区别

我们可以使用==或===判断两个值的相等性,其中区别在于:===是严格意义的相等,只需注意NaN和NaN不等就行了。而使用==的时候,javascript会帮我们做类型转换,如:

  • 如果两个值类型相同,则执行严格相等的运算
  • 如果两个值的类型不同
    1.如果一个是null,一个是undefined,那么相等
    2.如果一个是数字,一个是字符串,先将字符串转为数字,然后比较
    3.如果一个值是true/false则将其转为1/0比较
    4.如果一个值是对象,一个是数字或字符串,则尝试使用valueOf和toString转换后比较
    5.其它就不相等了

7.break与continue有什么区别

这两个关键字多用在循环语句中
break 用于强制退出循环体,执行循环后面的语句
continue 用于退出本次循环,执行下次循环

8.void 0 和 undefined在使用场景上有什么区别

void运算符的作用是执行一个表达式,然后返回undefined。但是某些情境下undefined是可以被赋值的,比如在函数中,这样的话就不能用undefined来进行判断了。所以用void 0返回undefined来进行判断。既减少了在原形链上查找 window.undefined 的时间,也避免了误用被修改过的 undefined。

9.以下代码的输出结果是?为什么?

1
2
3
4
console.log(1+1);    // 输出结果为2,在两个操作数都是数字的时候,会做加法运算
console.log("2"+"4"); // 输出结果为"24",两个参数都是字符串,所以字符串做字符串拼接
console.log(2+"4"); // 输出结果为"24",对于两个参数,其中有一个参数是字符串的情况下会把另外一个参数转换为字符串做字符串拼接
console.log(+"4");// 输出结果为"4",在只有一个字符串参数的时候会尝试将其转换为数字

10.以下代码的输出结果是?

1
2
3
var a = 1;  
a+++a; //输出结果为3,由于++运算符比+运算符优先级更高,所以计算顺序为a++ +a, a++结果为1,此时a的值加1等于2,所以原式=1+2=3。
typeof a+2; // 输出结果为"number2",由于typeof运算符高于+运算符,所以计算顺序为typeofa +2,typeofa输出字符串number,字符串与数字相加,数字转换为字符串做字符串拼接,得到结果"number2'

11.以下代码的输出结果是? 为什么?

1
2
3
var a = 1;
var b = 3;
console.log( a+++b );//输出结果为4,因为++运算符优先级高于+,所以a+++b=(a++)+b=1+3=4。

12.遍历数组,把数组里的打印数组每一项的平方

1
2
3
4
var arr = [3,4,5]
for(i=0,i<arr.length;i++){
console.log(arr[i]*arr[i])
}//输出结果为9,16,25

13.遍历 JSON, 打印里面的值

1
2
3
4
5
6
7
8
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for(var key in obj){
console.log(obj[key])
}

14.以下代码输出结果是? 为什么 ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var a = 1, b = 2, c = 3;
var val = typeof a + b || c >0
console.log(val) //输出结果为"number2",因为typeof运算符优先级高于其他运算符,所以优先运算typeof a,得到结果"number",然后运算+b,
所以||运算符左边结果为"number2",对于运算符逻辑||或,当第一个为true时,发生短路,直接略过第二个运算,并返回第一个运算结果。
所以输出"number2"。

var d = 5;
var data = d ==5 && console.log('bb')
console.log(data)//运算结果为undefined,因为==运算符优先级大于其他运算符,所以d==5优先运算得出结果为true,继续运算且&&运算符
右边的console.logo('bb'),结果为undefined(bb没有声明),式子变为var data =true && undefined,故最终输出结果为undefined。

var data2 = d = 0 || console.log('haha')
console.log(data2)//输出结果为undefined,由于=运算符的优先级低于其他运算符,所以优先运算0||console.logo('haha'),
由于0返回布尔值为false,所以需继续运算||或运算符后面的console.log('haha'),运算结果为undefined(由于没有声明'haha'),
最终式子变为var data2=d=undefined,所以输出结果为undefined。

var x = !!"Hello" + (!"world", !!"from here!!");
console.log(x)//输出结果为2,因为非空字符串的结果为true,所以可得
!!"Hello"结果为true,
!"world"结果为false,
!!"from here!!"结果为true,
括号里面的优先计算,逗号会忽略第一个操作数,返回第二个操作数,所以括号里的结果为true。
式子变为var x=true+true=1+1=2,所以最终输出结果为2。

1 JS 相关概念

发表于 2017-12-01 | 分类于 JavaScript

1.CSS和JS在网页中的放置顺序是怎样的?

  • css是使用link标签将样式进行引入并放置在header标签内。
  • js是使用script标签进行引入,放置位置一般在body底部</body>闭合标签之前。这是因为页面渲染时,js放在页面顶部,会阻塞后面内容的呈现以及其后组件下载,会造成白屏等问题。

    2.解释白屏和FOUC

    1.白屏
  • 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
  • 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
  • 对于图片和CSS,在加载时会并发加载(如一个域名下同时加载两个文件)。但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载。 所以把 JavaScript 放入页面顶部也会导致白屏现象。

    白屏不是bug,而是浏览器渲染机制造成的,即浏览器在渲染的时候请求时间过长导致的.

2.FOUC(Flash of Unstyled Content) 无样式内容闪烁

  • 如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式)。对于 Firefox 会一直表现出 FOUC 。FireFox每加载一次dom树就会重绘一次网页样式,一直到所有内容完成为止。
  • 如果有多个样式表, 放在HTML的不同位置,这时有的浏览器可能会在所有样式都加载完后再进行样式的渲染, 此时也可能会出现FOUC。
    为了避免FOUC发生一般我们用link标签把css放在顶部header内.

3.sync和defer的作用是什么?有什么区别?

  • 作用
    没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
  1. async使加载和渲染后续文档元素的过程与 script.js 的加载与执行并行进行(异步)
    <script async src="script.js"></script>
  2. defer加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
    <script defer src="script.js"></script>
  • 区别
    defer:脚本延迟到文档解析和显示后执行,有顺序
    async:不保证顺序

    4.简述网页的渲染机制

  • 解析 HTML 标签, 构建 DOM 树
  • 解析 CSS 标签, 构建 CSSOM 树
  • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构
  • 把每个节点绘制到屏幕上 (painting)

    参考

  • 高性能网站建设指南, Steve Sounders
  • Render-tree construction, layout, and paint
  • How browsers work

CSS 综合

发表于 2017-11-23 | 分类于 CSS

1.说一说你平时写代码遵守的编码规范

  • 语义化
    ·语义化标签优先
    ·基于功能命名、基于内容命名、基于表现命名
    ·简略、明了、无后患

html命名规范:

  1. 所有命名都使用英文小写

推荐:<div class="main"></div>

不推荐: <div class="Main"></div>

  1. 命名用引号包裹

推荐:<div id="header"></div>

不推荐: <div id=header></div>

  1. 用中横线连接

推荐:<div class="mod-modal"></div>

不推荐: <div class="modModal"></div>

  1. 命名体现功能,不涉及表现样式(颜色、字体、边框、背景等)

推荐:<div class="text-lesser"></div>

不推荐: <div class="light-grey"></div>

  • 常见的命名1:
    .wrap或.wrapper – 用于外侧包裹
    .container或 .ct – 包裹容器
    .header – 用于头部
    .body – 页面 body
    .footer – 页面尾部
    .aside、.sidebar – 用于侧边栏
    .content – 和header footer 对应,用于主要内容
    .navigation – 导航元素
    .pagination – 分页

  • 常见命名2:
    .tabs > .tab – tab 切换
    .breadcrumbs – 导航列表、面包屑
    .dropdown – 下拉菜单
    .article – 文章
    .main – 用于主体
    .thumbnail – 头像,小图像
    .media – 媒体资源
    .panel – 面板
    .tooltip – 鼠标放置上去的提示
    .popup – 鼠标点击弹出的提示

  • 常见命名3
    .button、.btn – 按钮
    .ad – 广告
    .subnav – 二级导航
    .menu – 菜单
    .tag – 标签
    .message或者.notice – 提示消息
    .summary – 摘要
    .logo – logo
    .search – 搜索框
    .login – 登录

  • 常见命名4
    .register – 注册
    .username – 用户名
    .password – 密码
    .banner – 广告条
    .copyright – 版权
    .modal或者 .dialog – 弹窗

*常见命名5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
var 名字 = {
状态类: [
'inverse',
'toggled',
'switched',
'original',
'initial',
'identified',
'disabled',
'loading',
'pending',
'syncing',
'default'
],
修饰类: [
'dark',
'light',
'shaded',
'flat',
'ghost',
'maroon',
'pale',
'intense',
'twisted',
'narrow',
'wide',
'smooth',
'separate',
'clean',
'sharp',
'aligned'
],
元素类: [
'pagination',
'modal',
'popup',
'article',
'story',
'flash',
'status',
'state',
'media',
'block',
'card',
'teaser',
'badge',
'label',
'sheet',
'poster',
'notice',
'record',
'entry',
'item',
'figure',
'square',
'module',
'bar',
'button',
'action',
'knob'
],
布局类: [
'navigation',
'wrapper',
'inner',
'header',
'footer',
'aside',
'section',
'divider',
'content',
'container',
'panel',
'pane',
'construct',
'composition',
'spacing',
'frame'
]
}

css命名规范

  • 书写规范
    1.tab 用两个空格表示
    2.css的 :后加个空格, {前加个空格
    3.每条声明后都加上分号
    4.换行,而不是放到一行
    5.颜色用小写,用缩写, #fff
    6.小数不用写前缀, 0.5s -> .5s;0不用加单位
    7.尽量缩写, margin: 5px 10px 5px 10px -> margin: 5px 10px

范例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* Not recommended */
.test {
display: block;
height: 100px
}
/* Recommended */
.test {
display: block;
height: 100px;
}


/* Not recommended */
h3 {
font-weight:bold;
}
/* Recommended */
h3 {
font-weight: bold;
}


/* Not recommended: missing space */
#video{
margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
margin-top: 1em;
}
/* Recommended */
#video {
margin-top: 1em;
}


/* Not recommended */
a:focus, a:active {
position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}


/* Always put a blank line (two line breaks) between rules. */
html {
background: #fff;
}

body {
margin: auto;
width: 50%;
}


/* Not recommended */
@import url("//www.google.com/css/maia.css");

html {
font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);

html {
font-family: 'open sans', arial, sans-serif;
}

参考

  • google html css编码规范
  • bootstrap 编码规范
  • 命名这货真难

2.垂直居中有几种实现方式,给出代码范例

方法一.上下padding相等,高度随内容变化

方法二.绝对定位实现居中

方法三.vertical-align实现居中
注意vertical-align: middle;必须作用于表格,行内元素才生效

方法四.table-cell实现居中 表格法

3.实现如下效果,每种效果都只使用一个html 标签来实现

代码:http://js.jirengu.com/qufog/1/edit

浏览器兼容

发表于 2017-11-09 | 分类于 CSS

1.什么是 CSS hack?

由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。CSS hack在这种情况下针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

####CSS hack
CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

  1. 属性前缀法(即类内部Hack):
    例如 IE6能识别下划线”—“和星号” “,IE7能识别星号” “,但不能识别下划线”—“,IE6~IE10都认识”\9”,但firefox前述三个都不能认识
  2. 选择器前缀法(即选择器Hack)
  3. IE条件注释法(即HTML条件注释Hack):
    针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本:。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效

2.谈一谈浏览器兼容的思路

  • 要不要做
    • 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
    • 成本的角度 (有无必要做某件事)
  • 做到什么程度
    • 让哪些浏览器支持哪些效果
  • 如何做
    • 根据兼容需求选择技术框架/库(jquery)
    • 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
    • postCSS
    • 条件注释、CSS Hack、js 能力检测做一些修补
  • 方法思路
    • 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
    • 优雅降级
      (graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
      stackoverflow-渐进增强和优雅降级的区别

3.列举5种以上浏览器兼容的写法

  1. 属性前缀法(即类内部Hack):如

    1
    2
    3
    4
    5
    6
    box{
    color: red;
    _color: blue; /*ie6*/
    *color: pink; /*ie67*/
    color: yellow\9; /*ie/edge 6-8*/
    }
  2. IE条件注释法(即HTML条件注释Hack):如

    1
    2
    3
    <!–-[if IE 7]>
    <link rel="stylesheet" href="ie7.css" type="text/css" />
    <![endif]–->
  3. 选择器前缀法(即选择器Hack)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    *html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen\9{...}只对IE6/7生效
    @media \0screen {body { background: red; }}只对IE8有效
    @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
    @media screen\0 {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active),
    (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等
  4. 条件注释结合类选择器整体优化

    1
    2
    3
    4
    5
    6
    <!DOCTYPE html>
    <!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
    <!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
    <!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
    <!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
    <!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
  5. 利用Modernizr工具
    参考文章
    运行的时候它会在html元素上添加一批CSS的class名称,这些class名称标记当前浏览器支持哪些特性和不支持哪些特性,支持的特性就直接显示该特性的名称作为一个class(例:canvas,websockets),不支持的特性显示的class是“no-特性名称”。以下是Chrome下生成的特征类型。

    1
    2
    3
    4
    5
    6
    7
    <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage 
    websqldatabase indexeddb hashchange history draganddrop websockets
            rgba hsla multiplebgs backgroundsize borderimage borderradius
            boxshadow textshadow opacity cssanimations csscolumns cssgradients
            cssreflections csstransforms csstransforms3d csstransitions fontface
            generatedcontent video audio localstorage sessionstorage webworkers
    applicationcache svg inlinesvg smil svgclippaths">

下面这段代码是运行在IE9下的效果:

1
2
3
4
5
6
7
8
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
postmessage no-websqldatabase no-indexeddb hashchange no-history
        draganddrop no-websockets rgba hsla multiplebgs backgroundsize
        no-borderimage borderradius boxshadow no-textshadow opacity
        no-cssanimations no-csscolumns no-cssgradients no-cssreflections
        csstransforms no-csstransforms3d no-csstransitions fontface
        generatedcontent video audio localstorage sessionstorage
        no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

你可以直接使用Modernizr在<html>元素里生成的class名称,在你的css文件里定义相应的属性以便支持当前浏览器。例如,下面的代码在支持shadow阴影的浏览器显示shadow,不支持的浏览器显示标准的边框:

1
2
3
4
5
6
7
8
9
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}

.no-boxshadow #MyContainer {
border: 2px solid black;
}

4.以下工具/名词是做什么的

1.条件注释

条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。例:





使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中无法正常工作。
IE10不再支持条件注释.aspx)

项目 范例 说明
! [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
l [if (IE 6)l(IE 7)] IE6或者IE7

2.IE Hack

针对IE浏览器编写不同的CSS来兼容不同版本的IE,让IE能够正常渲染

3.js 能力检测

浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。

4.html5shiv.js

用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。所以我们在使用过程中,想要让低版本的浏览器,即IE9以下的浏览器支持,可以使用html5shiv.js。
原理:html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
使用方法:
tml5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:

1
2
3
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

5.respond.js

Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。

6.css reset

将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最简单的说法就是把浏览器提供的默认样式覆盖掉。核心作用是清零,而且过于暴力。

7.normalize.css

Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。其优势可以完全取代css reset.
它可以:

1.保护有用的浏览器默认样式而不是完全去掉它们。
2.标准化的样式,适用范围广的元素。
3.修复浏览器自身的bug并保证各浏览器的一致性。
4.优化CSS可用性:用一些小技巧。
5.使用详细的注释来解释代码

8.Modernizr

Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。
具体用法见文章上面案例。

9.postCSS

它可以被理解为一个平台,可以让一些插件在上面跑,它提供了一个解析器,可以将CSS解析成抽象语法树,通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer,它可以帮我们处理兼容问题,只需正常写CSS,autoprefixer可以帮我的自动生成兼容性代码
参考文章

5.一般在哪个网站查询属性兼容性?

  • caniuse.com查CSS属性兼容
  • browserhacks查 Hack 的写法
    另外 浏览器市场份额可以查看各个浏览器所占市场的份额。

浮动定位BFC边距合并

发表于 2017-11-09 | 分类于 CSS

1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样.

  • 对父容器的影响:当父容器的子元素都是浮动元素时,那么父容器将会高度坍塌。如下例:
  • 对其他浮动元素影响: 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住。如下例:
  • 对普通元素影响:浮动元素脱离普通流,如果浮动元素后面有个文档流中的普通元素,那么这个普通元素的框会表现的浮动元素不存在。如下例:

  • 对文字影响: 浮动元素后面的文档流中的元素,这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素影响,会移动以留出空间。
    浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。如下例:

2.清除浮动指什么?如何清除浮动?两种以上方法

清理浮动:解决父容器高度坍塌问题

###方法1

如果我们想让父元素在视觉上包围浮动元素可以在父元素最后添加一个空div,
<div style="clear:both;"></div>对它清理。缺点是增加了一个无意义的标签,如下例:

方法2

使父容器生成BFC,因为BFC可以包含浮动,从而达到“清除浮动”效果,如何形成浮动:

  • float为 left|right
  • overflow为 hidden|auto|scroll
  • display为 table-cell|table-caption|inline-block
  • position为 absolute|fixed
    但是注意用BFC特性清理浮动都有副作用:比如float: left;让父容器变成浮动元素
    副作用较小的是: overflow: auto;或者overflow: hidden;

通用的清理浮动法案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}


/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}

3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?

css定位方式有四种:默认定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)

  • static:默认值。没有定位,元素在正常的流中,top,right,bottom,left和z-index属性无效。
    参考点:无

  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其原来位置进行定位。left:20px 会向元素的 left 位置添加20px

    其中的相对指的是相对于元素在默认流中的位置。元素偏移之后,他本来在默认文档流中占据的位置仍然存在,其紧挨其后的元素的定位依据它本来的位置定位
    参考点:元素本身位置
    使用场景:元素相对偏移
    案例:

  • absolute:生成绝对定位的元素,相对于static定位外的第一个父元素进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。

    绝对定位的元素已经脱离了文档流,普通流中其他元素的布局就像绝对元素不存在一样;绝对定位的元素的位置是相对于最近的已定位的祖先元素,如果元素没有已定位的祖先元素,它的位置就相对于body根元素;绝对定位的框可以覆盖页面的其他元素。
    参考点:距离最近的非static元素,否则为body
    使用场景:垂直水平居中
    案例:

    top: 20px; left:20px 相对的值是看其父容器是否存在 position:relative;absolute;fixed;这三个值,如果有就是相对父容器的内边框。
    当父容器里有 绝对定位 的子元素时,子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content 等于父元素的 content宽度查看范例http://js.jirengu.com/jatog/1/edit

  • fixed: 本质上是一种绝对定位,不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间,且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。
    参考点:浏览器窗口
    使用场景:登录框覆盖层

注意只有position: relative; absolute; fixed;才能设置top left 等的值;

4.z-index有什么作用?如何使用?

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。如果为正数,则离用户更近,为负数则表示离用户更远。Z-index 仅能在定位元素上奏效。

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

position:relative和负margin都可以使元素位置发生偏移,二者区别:

  • position:relative相对定位后元素位置发生偏移,只是视觉上显示的位置变化,但是它仍会占据原来的空间,不会影响其他文档流元素。
  • 负margin会使元素在文档流中位置发生偏移,会影响周边的元素位置变化

    6.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明

  • BFC:全称是 [Block Format Content] ,块级格式化上下文(http://www.w3.org/TR/CSS21/visuren.html#block-formatting),

    BFC特性:
    1.BFC会阻止垂直外边距(margin-top、margin-bottom)折叠
    按照BFC的定义,只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠。
    因此要解决margin重叠问题,只要让它们不在同一个BFC就行了,但是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
    2.BFC不会重叠浮动元素
    3.BFC可以包含浮动

  • 生成BFC:
    • float为 left|right
    • overflow为 hidden|auto|scroll
    • display为 table-cell|table-caption|inline-block
    • position为 absolute|fixed
  • BFC作用:
    1.会阻止垂直外边距(margin-top、margin-bottom)折叠
    2.清除浮动

    7.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例

    当块处于同一个文档流同一个BFC中,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠。对于父子元素,容器没有padding和border内部的margin会导致外边距合并。
    相邻元素box1和box2的垂直外边距合并,如下例,

    合并规则:
    1.两个margin都是正值的时候,取两者的最大值;
    2.当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从0位置,负向位移;
    3.当有正有负的时候,先取出负 margin 中绝对值中最大的,然后和正 margin 值中最大的 margin 相加。

如何不让相邻元素外边距合并:
1.被非空内容、padding、border 或 clear 分隔开。
2.不在一个普通流中或一个BFC中。
3.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠(注意这里指的是上下相邻的元素)。

父子外边距合并见下例:

解决外边距合并,让父容器设为BFC就可以了。给父容器加入overflow: auto;包裹h1,使得h1的margin内部生效,从而不会margin合并。这样子元素的margin就不会和父元素的margin发生重叠。如下例:

参考http://blog.csdn.net/github_37037281/article/details/55505825

CSS常见样式2

发表于 2017-11-02 | 分类于 CSS

1.text-align: center 的作用是什么,作用在什么元素上? 能让什么元素居中?

  • text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐,text-align并不控制块元素自己的对齐,只控制它的行内内容的对齐,作用是将 inline-level 元素水平居中显示
  • 此属性只能写在块级元素上,但对块级元素本身没有影响
  • 可以让元素内文本以及 display 为 inline 和 inline-block 的子元素在元素内水平居中。

    2.IE 盒模型和W3C盒模型有什么区别?

    IE盒模型的宽度和高度是border+padding+content的值

W3C盒模型的宽度和高度指的就是content的值

3.*{ box-sizing: border-box;}的作用是什么?

box-sizing是CSS3新样式,box-sizing: border-box表示使用的是IE盒模型

4.line-height: 2和line-height: 200%有什么区别?

line-height: 2:行高等于内容高度的2倍
line-height: 200%:是相对高度,行高等于父元素高度的200%

5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

  • inline-block既呈现inline特性(不占据一整行,宽度由内容宽度决定),又呈现block特性(可设置宽高,内外边距)
  • 缝隙
    产生缝隙原因:元素之间有空白字符,比如回车、换行等,被浏览器当成一个字符,从而产生缝隙。

    消除缝隙方法:
    1.去除元素之间的空白字符

    2.将目标元素的父元素中设置: font-size: 0;之后再子元素中把字体设置回去。原理:把空白字符的宽高设置为0,从而消除缝隙。

  • 顶端对齐:使用 vertical-align: top;
    高度不一样的inline-block元素,默认元素字符底部基线对齐

    使用 vertical-align: top;

6.CSS sprite 是什么?

俗称“雪碧图”
指将不同的图片、图标合并到一张图上,使用CSS sprite可以减少页面的网络请求,提高网页加载性能。

7.让一个元素“看不见”有几种方式?有什么区别?

  • display: none; 元素消失,不占用位置
  • opacity: 0; 透明度为0,但是占用位置
  • visibility: hidden 和opacity: 0;类似,占用位置
  • background-color: rgba(0,0,0,0.2)设置背景色透明度
    background:rgba(Red,Green,Bule,透明度);

CSS常见属性

发表于 2017-11-02 | 分类于 CSS

1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别?

基本概念:

一、块级元素:block element

每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;
块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。
DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

二、行内元素:inline element

也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母之间横向排列,到最右端自动折行。

三、block(块)元素的特点

① 总是在新行上开始;

② 高度,行高以及外边距和内边距都可控制;

③ 宽度缺省是它的容器的100%,除非设定一个宽度。

四、inline元素的特点

① 和其他元素都在一行上;

② 高,行高及外边距和内边距不可改变;

③ 宽度就是它的文字或图片的宽度,不可改变

④ 内联元素只能容纳文本或者其他内联元素

④、它可以容纳内联元素和其他块元素

对行内元素,需要注意如下

1.设置宽度width 无效。
2.设置高度height 无效,可以通过line-height来设置。
3.设置margin 只有左右margin有效,上下无效。
4.设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了但是对元素周围的内容是没影响的。

常见的块级元素

标签 描述
address 地址
blockquote 块引用
center 举中对齐块
dir 目录列表
div 常用块级容易,也是CSS layout的主要标签
dl 定义列表
fieldset form控制组
form 交互表单
h1 大标题
h2 副标题
h3 3级标题
h4 4级标题
h5 5级标题
h6 6级标题
hr 水平分隔线
isindex input prompt
menu 菜单列表
noframes frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript 可选脚本内容(对于不支持script的浏览器显示此内容)
p 段落
pre 格式化文本
table 表格
ul 无序列表
ol 有序表单

常见的内联元素

标签 描述
a 超链接
abbr 缩写
acronym 首字
br 换行
cite 引用
code 计算机代码(在引用源码的时候需要)
dfn 定义字段
em 强调
i 斜体
img 图片
input 输入框
kbd 定义键盘文本
label 表格标签
q 短引用
s 中划线(不推荐)
samp 定义范例计算机代码
select 项目选择
span 常用内联容器,定义文本内区块
strike 中划线
strong 粗体强调
sub 下标
sup 上标
textarea 多行文本输入框
u 下划线

特性区别

行内元素与块级元素有什么不同?

区别一:

块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别二:

块级:块级元素可以设置宽高
行内:行内元素不可以设置宽高

区别三:

块级:块级元素可以设置margin,padding
行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

区别四:

块级:display:block;
行内:display:inline;
可以通过修改display属性来切换块级元素和行内元素

2.什么是 CSS 继承? 哪些属性能继承,哪些不能?

CSS 继承:子元素没有指定值的情况继承父元素的属性。

一、无继承性的属性

1、display:规定元素应该生成的框的类型

2、文本属性:

vertical-align:垂直文本对齐

text-decoration:规定添加到文本的装饰

text-shadow:文本阴影效果

white-space:空白符的处理

unicode-bidi:设置文本的方向

3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性:content、counter-reset、counter-increment

7、轮廓样式属性:outline-style、outline-width、outline-color、outline

8、页面样式属性:size、page-break-before、page-break-after

9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font:组合字体

font-family:规定元素的字体系列

font-weight:设置字体的粗细

font-size:设置字体的尺寸

font-style:定义字体的风格

font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent:文本缩进

text-align:文本水平对齐

line-height:行高

word-spacing:增加或减少单词间的空白(即字间隔)

letter-spacing:增加或减少字符间的空白(字符间距)

text-transform:控制文本大小写

direction:规定文本的书写方向

color:文本颜色

3、元素可见性:visibility
4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性:list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性:quotes
7、光标属性:cursor
8、页面样式属性:page、page-break-inside、windows、orphans
9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性:visibility

2、光标属性:cursor

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

3.如何让块级元素水平居中?如何让行内元素水平居中?

块级元素水平居中:

margin : 0 auto;

行内元素水平居中:

text-align : center;

4.用 CSS 实现一个三角形


设置元素的宽高为0px,设置四条宽边,隐藏其他三边,即可实现一个三角形

5.单行文本溢出加 …如何实现?


1
2
3
overflow: hidden;   //多余的文字变成...
text-overflow: ellipsis; //超过边框的文字隐藏
white-space: nowrap; //不折行

可以通过上面三条代码实现。

6.px, em, rem 有什么区别

px:像素,固定单位
em:相对单位,值并不是固定的,会继承父级元素的字体大小,是默认字体大小的倍数。
rem:相对单位,rem是CSS3新增的一个相对单位,相对的只是HTML根元素,使用它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

7.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?


代码作用:设置body的字体样式,字体大小12px,1.5倍行高。后面是五个字体,用逗号隔开,如果用户浏览页面时本地没有第一字体,则由第二字体代替,以此类推,如果都没有则采用系统默认字体。
字体加引号:加引号是因为字体的名字中包含空格,避免浏览器解析时候把它解析成多个词汇。
字体里\5b8b\4f53代表:字体里的数字符号代表Unicode码,为了避免直接写中文的情况下编码不匹配时会产生乱码的情况,将字体名称用Unicode来表示。’\5b8b\4f53’就代表宋体。Unicode码全球通用,
查找字体对应的Unicode码,可以在开发者工具输入escape指令,如图

%u换成/

CSS选择器

发表于 2017-09-28 | 分类于 CSS

1.class和id的使用场景?

class 选择器:

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点”.”号显示。

例:

1
.center {text-align:center;}

在上面的例子中,所有拥有center类的HTML元素均为居中。

id 选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

例:

1
2
3
4
5
#para1
{
text-align:center;
color:red;
}

在上面的例子中,应用于元素属性id=”para1”。

2.css选择器常见的有几种?

1.基础选择器

选择器 含义
* 通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)
# id id选择器,匹配特定id的元素
.class 类选择器,匹配class包含(不是等于)特定类的元素
element 标签选择器

2.组合选择器

选择器 含义
E,F 多元素选择器,用,分隔,同时匹配元素E或元素F
E F 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
E>F 子元素选择器,用>分隔,匹配E元素的所有直接子元素
E+F 直接相邻选择器,匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否)
.class1.class2 id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素
element#id id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素

3.属性选择器

选择器 含义
E[attr] 匹配所有具有属性attr的元素,div[id]就能取到所有有id属性的div
E[attr = value] 匹配属性attr值为value的元素,div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr ^= value] 匹配属性attr的值以value开头的元素
E[attr $= value] 匹配属性attr的值以value结尾的元素
E[attr *= value] 匹配属性attr的值包含value的元素

4.伪类选择器

选择器 含义
E:first-child 匹配作为长子(第一个子女)的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素,文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素
n的取值

1,2,3,4,5
2n+1, 2n, 4n-1
odd, even

5.伪元素选择器

选择器 含义
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

3.选择器的优先级是怎样的?对于复杂场景如何计算优先级?

选择器优先级:从高到底分别是

1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器#id
4.类选择器.class
5.伪类选择器a:hover
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

对于复杂场景如何计算优先级

选择器的特殊性值表述为4个部分,用0,0,0,0表示。

  • ID选择器的特殊性值,加0,1,0,0;
  • 类选择器、属性选择器或伪类,加0,0,1,0;
  • 标签选择器和伪元素,加0,0,0,1;
  • 通配选择器对特殊性没有贡献,即0,0,0,0;
  • 最后比较特殊的一个标志!important(权重),它没有特殊值,但是他的优先级是最高的,为了方便记忆,可认为他的默认值是1,0,0,0.
    示例如下:


执行效果:

4.a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?

四个选择器优先级相同,考虑他们会相互覆盖,应该按照这个顺序:

a:link(未被点击)
a:visited(已被点击)
a:hover(鼠标悬停其上)
a:active(鼠标已经按下,还没有释放)

因为:
1.四个选择器优先级相同,越往后的样式会覆盖前面的样式
2.链接被访问后,样式会发生改变,所以a:visited应放在a:link之后
3.当鼠标悬停在链接上时,无论链接是否已经被访问过,其样式都会发生改变,所以a:hover应放在a:visited之后
4.当鼠标按下链接但未松开时,链接样式会发生改变,但此时也属于鼠标悬停的状态,所以应把 a:active 放在 a:hover 之后,这样可以覆盖a:hover的样式

记这顺序有个小招数,“LoVe? HA!”。

5.以下选择器分别是什么意思?

·列出你知道的伪类选择器

选择器 含义
E:first-child 匹配作为长子(第一个子女)的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素,文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素
n的取值

1,2,3,4,5
2n+1, 2n, 4n-1
odd, even

·div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 (注意空格的作用)

·first-child 匹配其父元素的第一个子元素
·first-of-type 匹配其父元素下拥有相同标签的第一个元素

1.div:first-child div下的第一个子元素
2.div:first-of-type div下的第一个同类型的子元素
3.div :first-child 匹配所有div元素内所有元素中属于其父元素的首个子元素
4.div :first-of-type 匹配所有div元素内所有元素中属于其父元素的首个类型的子元素

·运行如下代码,解析下输出样式的原因。

运行如下:


解析:

1
2
.item1:first-child{
color: red;

item1类下的第一个元素颜色为红色,所以aa为红色

1
2
.item1:first-of-type{
background: blue;

item1类下拥有相同标签的第一个子元素背景为蓝色,p标签下第一个子元素是aa,h3标签下第一个子元素是bb,所以aa和bb的背景变为蓝色,ccc是第和h3标签下第二个子元素所以不变。

CSS基础

发表于 2017-09-26 | 分类于 CSS

1.CSS的全称是什么?

CSS全称是 Cascading Style Sheets, 层叠样式表。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

2.CSS有几种引入方式?link和@import有什么区别?

#####css的引入方式有三种。

######1.内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是直接在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。简单直接,但后续修改以及添加样式会很繁琐。

1
<h1 style="color: red; font-size: 20px;"></h1>

2.内部样式

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3.外部样式

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。实现了内容与样式分离。
rel:告诉浏览器引用的是一个样式表文件
type:文件类型(可省略)
href:文件地址。

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>

1
2
3
4
<style>
@import url("hello.css");
@import "world.css";
</style>
link和@import的区别:

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。

  • 差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
  • 差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
  • 差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  • 差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

    3.以下这几种文件路径分别用在什么地方,代表什么意思?

    文件路径 | 代表
    —| :—:
    css/a.css | 在与本文件同级的css文件夹下的a.css文件
    ./css/a.css | ./代表当前,当前与本文件同级的css文件夹下的a.css文件
    b.css | 同级的b.css文件
    ../imgs/a.png | 上一级的目录的imgs文件夹下的a.png文件,../代表返回上一级
    /Users/hunger/project/css/a.css |本地文件的绝对路径
    /static/css/a.css | 网站路径的绝对路径
    http://cdn.jirengu.com/kejian1/8-1.png| 图片上传后生成的线上地址

    4.如果我想在js.jirengu.com上展示一个图片,需要怎么操作?

    第1种:先把图片上传至服务器,然后引用相对路径
    第2种:上传图片,生成图片链接,然后引用图片

5.列出5条以上html和css的书写规范

基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

html规范:
  1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为, 书写时利用IDE实现层次分明的缩进;
  2. 非特殊情况下样式文件必须外链至…之间;非特殊情况下JavaScript文件必须外链至页面底部;
  3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:<link rel=”stylesheet” href=”…” /><style>…</style><script src=”…”></script>
  4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;
  5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括 br (
    ), hr(
    )等; 属性值必须用双引号包括;
  6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性,避免使用”data:”等其他命名方式;
  7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
  8. 尽可能减少div嵌套, 如
    欢迎访问XXX, 您的用户名是
    用户名
    完全可以用以下代码替代:

    欢迎访问XXX, 您的用户名是用户名

    ;
  9. 书写链接地址时, 必须避免重定向,例如:href=“http://itaolun.com/**”, 即须在URL地址后面加上“/”;
  10. 在页面中尽量避免使用style属性,即style=“…”;
  11. 必须为含有描述性表单元素(input, textarea)添加label, 如

    姓名:

    须写成:

  12. 能以背景形式呈现的图片, 尽量写入css样式中;
  13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;
  14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;
  15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;
  16. 书写页面过程中, 请考虑向后扩展性;
  17. class & id 参见 css书写规范.

    css书写规范:
  18. 编码统一为utf-8;

  19. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件,
    分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入,
    此文件包含reset及头部底部样式, 此文件不可随意修改;
  20. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由分发框架文件时命名的(如#header #footer #content #nav 等), 为JavaScript预留钩子的除外;
  21. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show(淘宝是用的J_开头);
  22. class与id命名:
    大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 &
    数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合;
    总之, 命名要语义化, 简明化.
  23. 规避class与id命名:
    a) 通过从属写法规避, 示例见d;
    b)取父级元素id/class命名部分命名, 示例见d;
    c)重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;
    d)a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码
    中加入新的div元素,
    按a命名法则:
    …
    ,
    样式写法: #mainnav .firstnav{…….}
    按b命名法则:
    …
    ,
    样式写法: .main_firstnav{…….}

    6.介绍chrome 开发者工具的功能区

HTML表单的用法

发表于 2017-09-16 | 分类于 HTML

HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
下面介绍表单常见元素的简单用法。

1.form元素

HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单,是表单的外壳

常用属性:

action:表单提交的地址
method:提交表单的方法,一般有get和post两种方式

区别:

1.表象不同,get把提交的数据url可以看到,post看不到
2.原理不同,get 是拼接 url, post 是放入http 请求体中
3.提交数据量不同,get最多提交1k数据,浏览器的限制。post理论上无限制,受服务器限制
4.get提交的数据在浏览器历史记录中,安全性不好
5.场景不同,get 重在 “要”, post 重在”给”

target:在何处打开action
enctype:

  • application/x-www-form-urlencoded:在发送前编码所有字符(默认)
  • text/plain:空格转换为”+”加号,但不对特殊字符编码
  • multipart/form-data:使用包含文件上传控件的表单时,必须使用该值

    2.input元素

    input 元素通过 type 属性来设置不同的input 类型。<input>元素是最重要的表单元素。

    2.1文本输入

    <input type="text"> 定义用于文本输入的单行输入字段:
1
2
3
4
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>

效果:


placeholder的参数可以作为输入的提示(提示用户输入内容和格式),与value不同,placeholder并不是input中真的内容,在输入时placeholder会消失而不是代替。

2.2 密码域

1
2
3
4
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="请输入密码">
</div>

效果:

密码域的输入框会对输入信息做掩码处理。

2.3 复选框

1
2
3
4
5
6
<div class="hobby">
<label for="hobby">爱好</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="pet">宠物
</div>

效果:

name 属性为相同的复选框元素会被分到同一个分组。复选框的 value 值是必须有的,否则后台接收到数据无法识别究竟勾选了什么值。可以对 input 标签增加 checked 属性实现预选。

2.4 单选按钮

1
2
3
4
5
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>

效果:

单选按钮和复选框一样,通过相同的name 属性值来识别同一组按钮,value 属性是必需的。可以对 input 标签增加 checked 属性实现预选。value 属性为 input 元素设定值。

对于不同的输入类型,value 属性的用法也不同:
type=”button”, “reset”, “submit” - 定义按钮上的显示的文本
type=”text”, “password”, “hidden” - 定义输入字段的初始值
type=”checkbox”, “radio”, “image” - 定义与输入相关联的值
注释:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释:value 属性无法与 <input type="file"> 一同使用。

2.5 下拉列表

1
2
3
4
5
6
7
8
<div class="section">
<lable for="mycar">我的car:</lable>
<select id="mycar" name="mycar">
<option value="audi">奥迪</option>
<option value="benz">奔驰</option>
<option value="saab" selected>萨博</option>
</select>
</div>

效果:

option 的 value 属性是必需的,可以对 option 设置 selected 属性实现预选择。

2.6 提交按钮

1
<input type="submit" value="提交">

效果:

2.8 重置按钮

1
<input type="reset" />

效果:

重置按钮会清空表单中填写的内容

2.9 打开文件

1
2
3
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>

效果:


accept=”image/png”,只接受png格式文件,可设置选择的文件格式

3.label 元素

1
2
3
4
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>

label 元素为 input 元素定义标注,当鼠标选择该标签时,关联的元素控件会获得焦点,for 属性与关联元素的 id 属性要相同。

4. textarea 元素

1
2
3
4
5
<div class="textarea">
<textarea name="article">
ddd
</textarea>
</div>

效果:

展示输入框,可以拉选大小

1234
Nie

Nie

Fair to be late, but never absent

32 日志
4 分类
GitHub
© 2017 — 2018 Nie
博客
|
主题 — v5.1.4