html和css复习1

HTML

1. src和href的区别

src和href都是用来引用外部的资源，它们的区别如下：

• src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。

• href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的⽂件时，就会进行下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

2.HTML5有哪些更新？

• 语义化标签：如：header-->定义文档的头部，nav,footer,article,section,aside

• 媒体标签：audio-->音频，video视频，source

• 数据存储：localStorage、sessionStorage

• 表单

• 进度条，度量器

• DOM查询操作

• Web存储

• input标签新增属性：placeholder、autocomplete、autofocus、required

• 其他：拖放，canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

移除的元素有：

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;

• 对可用性产生负面影响的元素：frame，frameset，noframes；

3.对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；

• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

CSS

1.浮动

        1.为什么使用浮动。 很多网页布局效果，标准流是做不到，所以就要是用浮动来完成布局，浮动可以改变排列方式。

        2.浮动引起的问题。 父元素高度塌陷，高度无法撑开。 与元素同级的非浮动元素会紧随其后(遮盖现象)。 如果一个元素浮动，则该元素之前的元素也需要浮动;否则会影响页面显示的结构

        3.解决方案(清除浮动）。 给父元素固定高度。没有设置浮动时，父元素的高度是height：auto 高度是由子元素撑开的；这个方法的缺点是，因为设置了固定高度，它的维护性是很差的，适用于固定高度布局。 在浮动元素增加一个空div元素，设置样式 clear：both 要放在空元素上。缺点：布局添加了毫无意义的标签，如果有大量的使用无意义的div标签那么就造成很大的冗余。 为父元素设置 overflow:hidden 。缺点：受限于overflow:hidden的主要功能，如果子元素的尺寸大于父元素，或者子元素中的内容过多，那么多出来的这一部分将不会溢出，也不会显示出来，会直接被hidden起来；因此这个方法不适用于子元素的内容过多； 使用伪类 :after 只需要在父元素上添加一个class;类使用after伪元素，在父元素现有内容的末尾添加新的内容。添加的内容是一个display: block; clear: both;的空元素；

2.什么是重绘和重排？它们的区别是什么？

重绘：当页面元素样式的改变不影响布局时，浏览器重新对元素进行更新的过程叫做重绘。

重排：当页面元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程叫做重排也叫做回流。重绘不一定需要重排，重排必然会导致重绘

1、重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

1）添加、删除可见的dom

2）元素的位置改变

3）元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）

4）页面渲染初始化

5）浏览器窗口尺寸改变

2、重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

3.dom树是怎么生成的？

页面得渲染流程总得俩说就五步，创建 DOM 树——创建 StyleRules——创建 Render 树——布局Layout（重排）——绘制 Painting（重绘）

第一步，用 HTML 分析器，分析 HTML 元素，构建一颗 DOM 树(标记化和树构建)。

第二步，用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表。

第三步，将 DOM 树和样式表，关联起来，构建一颗 Render 树(这一过程又称为 Attachment)。每个 DOM 节点都有attach 方法，接受样式信息，返回一个render对象(又名renderer)。这些 render 对象最终会被构建成一颗 Render 树。

第四步，有了 Render 树，浏览器开始布局，为每个 Render 树上的节点确定一个在显示屏上出现的精确坐标。

第五步，Render 树和节点显示坐标都有了，就调用每个节点 paint 方法，把它们绘制出来。

4. display的block、inline和inline-block的区别

（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

（2）inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

（3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

5.隐藏元素的方法有哪些

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。

opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。

clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

6.link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

• link支持使用Javascript控制DOM去改变样式；而@import不支持。

7.CSS3中有哪些新特性

• 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

• 圆角 （border-radius:8px）

• 多列布局 （multi-column layout）

• 阴影和反射 （Shadoweflect）

• 文字特效 （text-shadow）

• 文字渲染 （Text-decoration）

• 线性渐变 （gradient）

• 旋转 （transform）

• 增加了旋转,缩放,定位,倾斜,动画,多背景

8.Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

为什么要使用它们？

• 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。

• 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

9. 单行、多行文本溢出隐藏

• 单行文本溢出

  overflow: hidden;            // 溢出隐藏
  text-overflow: ellipsis;      // 溢出用省略号显示
  white-space: nowrap;         // 规定段落中的文本不进行换行

• 多行文本溢出

  overflow: hidden;            // 溢出隐藏
  text-overflow: ellipsis;     // 溢出用省略号显示
  display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
  -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
  -webkit-line-clamp:3;        // 显示的行数

  注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。

10.为什么需要清除浮动？清除浮动的方式?

浮动元素引起的问题？

• 父元素的高度无法被撑开，影响与父元素同级的元素

• 与浮动元素同级的非浮动元素会跟随其后

• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下：

• 给父级div定义height属性

• 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式

• 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

• 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

11.display、float、position的关系

（1）首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。

（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。

（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位。

（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变。

总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也需要调整；其次，元素的'float'特性的值不是"none"的时候或者它是根元素的时候，调整'display'的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。

12.css3新增的选择符有哪些？

css3新增的选择器主要分为属性选择器，关系选择器，结构化伪类选择器，伪元素选择器四类，具体介绍如下：

1.属性选择器

属性选择器，可以根据网页标记的属性及属性值来标记。

属性选择器主要包括E[att^=value]、E[att$=value]和E[att*=value]这三种性选择器。

1. 属性选择符
[attribute]: 选择所有带有该属性的元素
[attribute=value]: 选择所有带有该属性且值等于给定值的元素
[attribute~=value]: 选择所有带有该属性且值包含给定词汇的元素
[attribute|=value]: 选择所有带有该属性且值以指定字符串开头的元素
[attribute^=value]: 选择所有带有该属性且值以指定字符串开始的元素
[attribute$=value]: 选择所有带有该属性且值以指定字符串结束的元素
[attribute*=value]: 选择所有带有该属性且值包含指定字符串的元素

2.关系选择器

CSS3中的关系选择器主要包括子代选择器和兄弟选择器。

(1)关系选择器

(2)临近兄弟选择器

(3)普通兄弟选择器

3.结构化伪类选择器

结构化伪类选择器可以减少文档内class属性和id属性的定义，使文档变得更加简洁。

3.1 伪类选择符
:active: 选择当前正在被激活的元素
:checked: 选择所有被选中的元素
:disabled: 选择所有被禁用的元素
:enabled: 选择所有未被禁用的元素
:first-child: 选择某个元素下的第一个子元素
:hover: 选择所有当前鼠标悬停的元素
:nth-child(n): 选择某个元素下的第n个子元素
:last-child: 选择某个元素下的最后一个子元素
:not(selector): 选择非指定元素的所有元素
:target: 选择当前活动的目标元素
3.2组合选择符
element, element: 选择所有指定元素
element parent: 选择指定元素的父元素
element>child: 选择指定元素的直接子元素
element+element: 选择紧接在指定元素后的元素
element~element: 选择指定元素后的所有同级元素

4.伪元素选择器

伪元素选择器一般使一个标记后紧跟英文冒号":"，英文冒号后是伪元素名。

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

：：before 在元素前面插入内容 ：：after 在元素后面插入内容 注意

        before和after创建一个元素 ,但是属于行内元素
        新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
        语法: element:before 
        before和after必须有content属性
        before在父元素内容的前面创建元素, after 在父元素内容的后面插入元素
        伪元素选择器和标签选择器一 样,权重为1