知识点css和JavaScript

CSS知识点

1  选择器的优先级

(1)最高优先级是 (直接在标签中的设置样式,假设级别为1000)

(2)次优先级是(ID选择器 ,假设级别为100)  #myDiv{color:Red;}

(3)其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}

(4)最后优先级是 (标签选择器,假设级别是 1)  div{color:Red;}

(5)那么后代选择器的优先级就可以计算了啊

比如 .divClass  span { color:Red;}  优先级别就是:10+1=11

2 盒子模型

标准盒子模型 = margin + border + padding + content (content =  width | height)

IE盒子模型 = margin + content (content = border + padding + width | height)

3 浏览器

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性IE使用的是Trident内核,Firefox 使用的是Gecko内核。目前使用IE内核的浏览器还有搜狗,遨游,360等等。

4 编码

(1)GBK通常指GB2312编码 只支持简体中文字

(2)utf通常指UTF-8,支持简体中文字、繁体中文字、英文、日文、韩文等语言(支持文字更广)

(3)通常国内使用utf-8和gb2312,看自己需求选择

5 Bootstrap框架的网格系统工作原理如下:

(1)数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。

(2)在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。

(3)具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

(4)通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响

6 H5新增标签:

article: 标签定义外部的内容。

aside:标签定义 article 以外的内容。

audio:h5新增音频标签。没有高宽属性。

canvas:h5新增画布标签。

command: 定义命令按钮(未测试)

datalist:标签定义选项列表。 datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。 details:标签用于描述文档或文档某个部分的细节。

figure:标签用于对元素进行组合。

figcaption:定义 figure 元素的标题。

footer:定义 section 或 document 的页脚。

header:定义 section 或 document 的页眉。

hgroup:用于对网页或区段(section)的标题进行组合。

keygen:标签规定用于表单的密钥对生成器字段

mark:标签定义带有记号的文本。

meter:通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。

nav:定义document或section或article的导航。

output:定义不同的输出类型,比如脚本。 progress:定义任何类型的任务的进度。

rp:定义若浏览器不支持 ruby 元素显示的内容

rt:定义 ruby 注释的解释

ruby:定义 ruby 注释

section:标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。 source:audio和video的属性之一。为audio和video定义媒介源。

summary:为details定义标题。 time:定义日期或时间。

video:h5新增视频标签。具有高宽属性。

7 在样式表定义一个样式的时候,可以定义id也可以定义class。

(1)在CSS文件里书写时,ID加前缀"#";CLASS用"."

(2)id一个页面只可以使用一次;class可以多次引用。

(3)ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;

(4)从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

8 CSS的flexbox布局

Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调整整个布局。它的目的是使用常见的布局模式,比如说三列布局,可以非常简单的实现。

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex  containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items)。

9 浏览器的内核引擎,基本上是四分天下:

1)Trident: IE 以Trident 作为内核引擎;

2) Gecko: Firefox 是基于 Gecko 开发;

3) WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器;

4) Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini

注:2013年2月Opera宣布转向WebKit引擎

注:2013年4月Opera宣布放弃WEBKIT,跟随GOOGLE的新开发的blink引擎

10 垂直居中对齐的标签定义是:

11 Web Storage分类

Web Storage实际上由两部分组成:sessionStorage与localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

12 盒子模型的顺序

由内到位依次是content、padding、border、margin

13 ,设置一般用 set 开头, 获取采用 get 开头;

对于键值的话,一般都是 (key, value)的形式;

14 btn标签说法

btn-group该class用于形成基本的按钮组;

.btn-toolbar该 class 有助于把几组结合到一个中,一般获得更复杂的组件。

btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。

15

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

16 css的继承与不继承分类

不可继承的:

display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有元素可继承:

visibility和cursor

内联元素可继承:

letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

块状元素可继承:

text-indent和text-align

列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承:border-collapse。

17 bootstrap辅助类

.text-muted:文字的颜色换成灰色

/.text-primary:文字的颜色变成蓝色

/ .text-success:文字的颜色变成绿色

/.text-info:文字的颜色变成暗蓝色

/.text-warning:文字颜色变成暗黄色

/.text-danger:文字的颜色变成红色

18 html结构

标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

下面这些标签可用在 head 部分:,,,之间

(2)添加外部javascript文件

(3)使用行内javascript

26 javascirpt中的数字在计算机内存储为多少Byte

1.Javascript中,由于其变量内容不同,变量被分为基本数据类型变量和引用数据类型变量。基本类型变量用八字节内存,存储基本数据类型(数值、布尔值、null和未定义)的值,引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)。

2.JS中的数字是不分类型的,也就是没有byte/int/float/double等的差异。

27 哪些函数能用来验证字符串的完整性

     md5()函数将一个字符串进行md5加密计算,md5()函数使用RSA数据安全,包括MD5报文摘要算法。 语法:md5(string,raw),第一个参数string必需,表示待处理字符串,第二个参数raw可选,布尔型数值,默认为false,false表示返回32位的十六进制字符串,true表示返回16位二进制数。         

       sha1()函数计算字符串sha-1散列,使用哈希安全算法。 语法:sha1(string,raw),同md5。  

       str_rot13()函数对字符串执行rot13编码。

       crc32()函数计算字符串的32位crc(循环冗余校验),该函数可以用于验证数据完整性。

28 数组

arr是个对象数组,reverse和sort只是改了arr的内容,返回的依然是arr对象本身,而concat返回的是新的对象,这里考的点是浅拷贝和深度拷贝,concat和slice常用来做深度拷贝

29 下列函数的用法

hover(over ,out):模仿悬停事件,即当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

keypress(fn):在每一个匹配元素的keypress事件中绑定一个处理函数

change():调用执行绑定到change事件的所有函数,包括浏览器的默认行为。

change(fn)是文本框的内容发生变化时执行的操作、给所有的文本框增加输入验证

select(fn)是文本框的内容被选择时执行的操作。

click():是点击时触发的方法;

bind():是被选元素(class或id)添加一个或多个绑定事件处理程序,并规定事件发生时运行的函数。

30 数组方法

push返回数组的新的长度

reverse、sort返回数组本身

concat返回被连接数组的一个副本。

31 Angular 的知识,没有$send.

$emit只能向parent controller传递event与data

$broadcast只能向child controller传递event与data

$on用于接收event与data

32 需要匹配包含文本的元素

text()是jQuery中的方法,可是设置或返回被选元素的文本内容

contains选择器,选取包含指定字符串的元素,字符串也可以是文本

input()选择器,选取表单元素

attr(name,value)属性操作,设置或返回被选元素的属性和属性值

33 promise三种状态

一个promise可能有三种状态:等待(pending)、已完成(fulfilled)、已拒绝(rejected)

一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态,不能逆向转换,同时“完成”态和“拒绝”态不能相互转换

promise必须实现then方法(可以说,then就是promise的核心),而且then必须返回一个promise,同一个promise的then可以调用多次,并且回调的执行顺序跟它们被定义时的顺序一致

then方法接受两个参数,第一个参数是成功时的回调,在promise由“等待”态转换到“完成”态时调用,另一个是失败时的回调,在promise由“等待”态转换到“拒绝”态时调用。同时,then可以接受另一个promise传入,也接受一个“类then”的对象或方法,即thenable对象。

34 AngularJS1元素过滤

filter的两种使用方法

1. 在模板中使用filter

我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:

{{ expression | filter }}

也可以多个filter连用,上一个filter的输出将作为下一个filter的输入

{{ expression | filter1 | filter2 | ... }}

filter可以接收参数,参数用 : 进行分割,如下:

{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:

2. 在controller和service中使用filter

我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,代码如下:

app.controller('testC',function($scope,currencyFilter){

$scope.num = currencyFilter(123534);

}

在模板中使用{{num}}就可以直接输出 $123,534.00了!在服务中使用filter也是同样的道理。

ng提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了,使用方法如下:

app.controller('testC',function($scope,$filter){

$scope.num = $filter('currency')(123534);

$scope.date = $filter('date')(new Date());

}

可以达到同样的效果。好处是你可以方便使用不同的filter了。

阻止事件的默认操作,用stopPropagation;而阻止浏览器的默认操作时preventDefault。

你可能感兴趣的:(知识点css和JavaScript)