HTML/CSS知识点
-
HTML5提供两种新对象，通过javascript API来存储本地数据，这两种对象是（）。
localStorage和sessionStorage解析:
Web Storage分类 Web Storage实际上由两部分组成：sessionStorage与localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 -
并选择器（）
span, .item解析:
几种常见的高级选择器 1后代选择器 a b{} 用空格隔开 选中a的后代中的b(后代指后面很多代)元素 2子代选择器 a>b{} 用箭头隔开 选中a的子代中的b(子代指下一代)元素 3并集选择器 a,b{} 用逗号隔开 选中满足a或者b的元素 4交集选择器 ab{} 没有分隔符 选中同时满足a和b的元素 a，b可以是类选择器，标签选择器，id选择器 -
有关html Doctype的描述
它的责任就是告诉浏览器文档使用哪种html或者xhtml规范 不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。 不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析 hack技术主要是为了 某些浏览器特定设置的，写在css中，里面可以嵌套style和html代码，不可以写在style中。 如果在文档开始处没有文档类型声明，则浏览器会开启 混杂模式 -
CSS 选择器优先级：
内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素（类型）选择器 > 通用选择器 important (无穷大) -
css默认的定位类型是( )
static
解析
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
relative 定位
相对定位元素的定位是相对其正常位置。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
-
css选择器()
1.div:first-child 要满足的条件，首先必须得是div元素，还得是第一个子元素，如果不满足 就不会被选中 2.div:first-of-type 要满足的条件，首先必须得是div元素，还得是第一个出现的div元素，如果不满足 就不会被选中 3.nth-child a:nth-child(5)： 必须是a元素 必须是第五个子元素 4.nth-of-type： a:nth-of-type:选中所有a元素中的第n个a元素 看来规律就是child相关的是绝对位置，type相关的是相对位置 -
css单位
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点 1. em的值并不是固定的； 2. em会继承父级元素的字体大小。 注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 所以我们在写CSS的时候，需要注意两点： 1. body选择器中声明Font-size=62.5%； 2. 将你的原来的px数值除以10，然后换上em作为单位； 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。 REM rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子： p {font-size:14px; font-size:.875rem;} 注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。 px 与 rem 的选择？ 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备 -
样式定义后，可以让块元素呈递为内联对象
一、display:block display:block就是将元素显示为块级元素，一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。 二、display:inline display:inline就是将元素显示为内联元素，内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a” 三、display:inline-block display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) -
新窗口打开网页，用到_blank
在html中通过<a>标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接文档。
如果在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架<frame>或者窗口.
在target中还存在四个保留的属性值如下，
属性值
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
-
字体样式设置
text-transform:capitalize是首字母大写 text-transfrom:lowercase是全部字母为小写 text-transfrom:uppercase是全部字母为大写 font-weight: bold;字体为粗体， -
HTML的Doctype和严格模式与混杂模式的描述
在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示 <!DOCTYPE> 声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档 浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法 文档类型 DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。 DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。 如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。 浏览器模式 浏览器有两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。 DOCTYPE 切换 对于 HTML 4.01 文档， 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。 但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。 DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。 -
元素
大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element，“内联元素”译为 inline element。 1.块级元素 在浏览器显示时，通常会以新行来开始（和结束）。块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。 结构化块状元素： 这类元素用于构造文档的结构，没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。 终端块状元素： 这类元素用于从结构转向内容，拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。 多目标块状元素： 多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。 2.内联元素 (inline element)或称为行内元素 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素。 -
svg标签的目的是什么？
```
SVG 即 Scalable Vector Graphics，是一种用来绘制 矢量图 的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。
```
-
栅格系统
.col-xs-超小屏幕 手机 (<768px), .col-sm-小屏幕 平板 (≥768px), .col-md-中等屏幕 .col-lg-桌面显示器 (≥992px)(栅格参数) -
属性可以使超出的文字部分变成”…”
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; white-space: 属性设置如何处理元素内的空白 normal: 默认。空白会被浏览器忽略。 pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 pre-wrap: 保留空白符序列，但是正常地进行换行。 pre-line: 合并空白符序列，但是保留换行符。 inherit: 规定应该从父元素继承 white-space 属性的值。 text-overflow: clip|ellipsis|string; -
abbr
<abbr> 标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。 通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。 在某些浏览器中，当您把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时，<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。 -
CSS3新增属性
CSS3新增属性用法整理： 1、box-shadow（阴影效果） 2、border-color（为边框设置多种颜色） 3、border-image（图片边框） 4、text-shadow（文本阴影） 5、text-overflow（文本截断） 6、word-wrap（自动换行） 7、border-radius（圆角边框） 8、opacity（透明度） 9、box-sizing（控制盒模型的组成模式） 10、resize（元素缩放） 11、outline（外边框） 12、background-size（指定背景图片尺寸） 13、background-origin（指定背景图片从哪里开始显示） 14、background-clip（指定背景图片从什么位置开始裁剪） 15、background（为一个元素指定多个背景） 16、hsl（通过色调、饱和度、亮度来指定颜色颜色值） 17、hsla（在hsl的基础上增加透明度设置） 18、rgba（基于rgb设置颜色，a设置透明度） -
创建带有id属性的DOM元素有什么副作用
会创建同名的全局变量 -
CSS sprites
允许你将一个页面涉及到的所有零星图片都包含到一张大图中去 利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位 CSS Sprites整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名解析
CSS Sprites 1.简介 CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。 2.优点 （1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； （2）CSS Sprites能减少图片的字节； （3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。 （4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。 3.缺点 （1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。 （2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。 （3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。 （4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。 -
浏览器在一次 HTTP 请求中，需要传输一个 4097 字节的文本数据给服务端，可以采用方式
放在 Local Storage解析：
IndexdDB 是 HTML5 的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。 Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份，最大为 4 kb 。 url 参数用的是 get 方法，从服务器上获取数据，大小不能大于 2 kb 。 Session 是服务器端使用的一种记录客户端状态的机制 。 post 是向服务器传送数据，数据量较大。 local Storage 也是 HTML5 的本地存储，将数据保存在客户端中（一般是永久的）。