目录
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
盒模型的属性：margin（外边距）、border（边框）、padding（内边距）、content（内容
absolute、fixed、relative、static、inherit的区别
cellpadding 属性规定单元边沿与其内容之间的空白。
边框的样式可以包含的值包括：style,height,widthlink和@import的区别：
- 属性：
- white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit ; 设置如何处理元素内的空白
| 值 | 描述 |
| normal | 空白会被浏览器忽略（默认值） |
| pre | 空白会被浏览器保留，其行为方式类似 HTML 中的 pre 标签 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止 |
| pre-wrap | 保留空白符序列，但是正常地进行换行 |
| pre-line | 合并空白符序列，但是保留换行符 |
| inherit | 规定应该从父元素继承 white-space 属性的值 |
- text-overflow: clip | ellipsis | string ;
| 值 | 描述 |
| clip | 修剪文本 |
| ellipsis | 显示省略符号来代表被修剪的文本 |
| string | 使用给定的字符串来代表被修剪的文本 |
- overflow: visible | hidden | scroll | auto | inherit ;
| 值 | 描述 |
| visible | 内容不会被修剪，会呈现在元素框之外（默认值） |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
| inherit | 规定应该从父元素继承 overflow 属性的值 |
2. 应用：
- 单行文本溢出隐藏
div {
/* 强制一行显示*/
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 超出部分省略号 */
text-overflow: ellipsis;
}- 多行文本溢出隐藏
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
(SVG是HTML下的一个分支)
盒模型的属性：margin（外边距）、border（边框）、padding（内边距）、content（内容
fieldset用来分组，而legend用来分组描述
absolute、fixed、relative、static、inherit的区别
fixed 属性的元素在标准流中不占位置,absolute会使元素脱离文档流，static、relative都还在流中
例题：
以下说法中错误的是 A D
A.当元素的 position 属性设置为 relative 时，设置的 top、right、bottom、left 偏移值是相对于其父元素的。 B.当元素的 position 属性设置为 absolute 时，设置的 top、right、bottom、left 偏移值是相对于其上一级有定位的祖先元素。 C.网页中，rem 作为元素尺寸单位时，是相对 文档根节点的 font-size 进行计算的。 D.目前最新的 Microsoft Internet Explorer 中，盒模型默认使用的是 border-box。
解析： A.relative相对自身进行偏移 B.absolute相对上一级有定位的祖先元素 C.正确的 记住就行 D.默认的盒子模型是content-box
标准盒子模型 ＝ margin + border + padding + width （width = content ）
IE盒子模型 ＝ margin + width（width = border + padding + content ）
例题：
根据规范，以下 HTML 和 CSS 代码解析后， container.clientWidth 的值是:
<style>#container
{width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
border: solide 10px black;}
</style>
<div id="container">content</div>-
200
-
240 -
280
-
300
ele.clientWidth = 宽度 + padding
ele.offsetWidth = 宽度 + padding + border
ele.scrollTop = 被卷去的上侧距离
ele.scrollHeight = 自身实际的高度（不包括边框）
浮动元素
1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上
3、若不浮动的是块级元素，那么浮动的元素将显示在其上方
4、若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方
cellpadding 属性规定单元边沿与其内容之间的空白。
注释：请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。
从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距。
CSS Sprites
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
BFC
BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
内部的Box会在垂直方向，从顶部开始一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
哪些情况会产生BFC:
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。
<object>与<source>
外部资源由 <object> 元素表示，该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性，如存档、边框、分类、代码库、代码类型等。<source>表指定多个媒体资源
css标准单位：rem,em,px
https://www.runoob.com/cssref/css-units.html
div、p是块状元素
span是内联元素
img是内联块状元素
HTML5 内建对象用于在画布上绘制 ：getContext
<track>被称为媒体元素的子元素。新多媒体元素有： audio, video, source(定义多媒体资源) embed(定义嵌入的内容，比如插件) track(为<audio>,<video>这些元素的媒介规定外部文本轨道)</video></audio>
<meter>
用于显示已知范围内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。
元素继承
不可继承的：baidisplay、dumargin、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。
边框的样式可以包含的值包括：style,height,width
link和@import的区别：
1）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
2）link可以加载CSS，Javascript；@import只能加载CSS。
3）link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载
样式表类型
在 HTML 中，样式表按照应用方式可以分为三种类型，内嵌样式表，行内样式表，外部样式表文件
outliine
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形
主流浏览器内核私有属性css前缀：
mozilla内核 (firefox,flock等) -moz
webkit内核(safari,chrome等) -webkit
opera内核(opera浏览器) -o
trident内核(ie浏览器) -ms
CSS 选择器优先级：
内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素（类型）选择器 > 通用选择器
权值等级划分，一般为4个等级：
- 第一等级：代表内联样式，如style=""，权值为 1，0，0，0
- 第二等级：代表ID选择器，如#content，权值为0, 1, 0, 0
- 第三等级：代表类，伪类和属性选择器，如.class| :hover :link :target | [type] ，权值为0, 0, 1, 0
- 第四等级：代表标签选择器和伪元素选择器，如p | ::after ::before ::first-inline, ::selection，权值为0, 0, 0, 1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这4个等级中，所以他们的权值为0,0,0,0
输入类型
| button | 定义可点击的按钮（大多与 JavaScript 使用来启动脚本） |
| checkbox | 定义复选框。 |
| color | 定义拾色器。 |
| date | 定义日期字段（带有 calendar 控件） |
| datetime | 定义日期字段（带有 calendar 和 time 控件） |
| datetime-local | 定义日期字段（带有 calendar 和 time 控件） |
| month | 定义日期字段的月（带有 calendar 控件） |
| week | 定义日期字段的周（带有 calendar 控件） |
| time | 定义日期字段的时、分、秒（带有 time 控件） |
| 定义用于 e-mail 地址的文本字段 | |
| file | 定义输入字段和 "浏览..." 按钮，供文件上传 |
| hidden | 定义隐藏输入字段 |
| image | 定义图像作为提交按钮 |
| number | 定义带有 spinner 控件的数字字段 |
| password | 定义密码字段。字段中的字符会被遮蔽。 |
| radio | 定义单选按钮。 |
| range | 定义带有 slider 控件的数字字段。 |
| reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
| search | 定义用于搜索的文本字段。 |
| submit | 定义提交按钮。提交按钮向服务器发送数据。 |
| tel | 定义用于电话号码的文本字段。 |
| text | 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。 |
| url | 定义用于 URL 的文本字段。 |
什么是reflow？
reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。
以下操作会引起回流： ① 改变窗口大小 ② font-size大小改变 ③ 增加或者移除样式表 ④ 内容变化（input中输入文字会导致） ⑤ 激活CSS伪类（:hover） ⑥ 操作class属性，新增或者减少 ⑦ js操作dom ⑧ offset相关属性计算 ⑨ 设置style的值 ， 另外: reflow与repaint（重绘）是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。
关于link与@import的区别:
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
alc()的运算规则
calc()使用通用的运算规则，但是也提供更智能的功能：
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
输入类型定义时间控件
date 选取日、月、年
month 选取月和年
week 选取周和年
time 选取时间（小时和分钟）
内联元素
内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。
块级元素时可以控制宽和高、margin等，并且会换行。
1. inline ： 使用此属性后，元素会被显示为内联元素，元素则不会换行
inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border
2. block ： 使用此属性后，元素会被现实为块级元素，元素会进行换行。
block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float
3. inline-block ： 是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。(IE6不支持)
inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样。
例题：
DOM 文件对象模型，提供了树状结构的表示方法，以下描述正确的是：
D
-
Document 不是一個 document node，是一种节点格式
-
不是所有的 HTML elements 都是 element nodes
-
所有的 comments 都是 document node
-
在 HTML element 內的 text 內容也是 text node
一、DOM树一共有12种节点类型，常用的有4种：
1、Document类型（document节点）——DOM的“入口点”
2、Element节点（元素节点）——HTML标签，树构建块
3、Text类型（文本节点）——包含文本
4、Comment类型（注释节点）——有时我们可以将一些信息放入其中，它不会显示，但JS可以从DOM中读取它。
二、题目解析
A. Document 不是一个 document node，是一种节点格式（错误。是document node，也是节点格式）
B. 不是所有的 HTML elements 都是 element nodes（错误。所有的都是）
C. 所有的 comments 都是 document node（错误。不是document node, 应该是comment node）
D. 在 HTML element 內的 text 內容也是 text node （正确）
边距属性参数值为4个时，分别代表：上、右、下、左边距。
margin标记可以带一个、二个、三个、四个参数，各有不同的含义
-
margin: 20px;（上、下、左、右各20px。）
-
margin: 20px 40px;（上、下20px；左、右40px。）
-
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
-
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。
不推荐使用上述四个标志，因为在不同浏览器对于margin的四个边都有不同的命名。
创建带有 ID 属性的 DOM 元素有什么副作用
增加内存负担，创造同名全局变量。
SVG与Canvas的区别
SVG
不依赖分辨率
支持事件绑定
大型渲染区域的程序(例如百度地图)
不能用来实现网页游戏
Canvas
依赖分辨率
不支持事件绑定
最合适网页游戏
保存为".jpg"格式的图片
要运用css3动画，需要运用@keyframes规则和animation属性。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease
规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
