前端知识整理

1、haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。
请写出至少五个能够让元素“拥有布局”(即haslayout=true)的属性。
What
 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
when
既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
Why
生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
How
<style>
.Left{float:left;width:200px;height:200px;}
.right{float:right;height:200px;height:200px}
.center{overflow:hidden;height:200px}
</style>
<div class=”left”></div>
<div class=”right”></div>
<div class=”center”></div>
2、为什么我们要给图片设置宽高?设置alt属性？
What:
alt属性是一个用于网页语言HTML和XHTML、为输出纯文字的参数属性。
When：
当出现图片没有设置宽高出现浏览器回流，图片加载失败的时候没有提示
Why:
图片设置宽高目的是防止浏览器回流。
Alt属性：①有利于搜素引擎的搜索，优化搜索引擎。
②图片不显示时能出现提示文字。
3、CSS中，用来合并单元格边框的属性及值是
border-collapse:collapse;
What
collapse:定义表格边框合并显示。
When:
当需要合并单元格的时候。
How
border-collapse:collapse;
4、写出以下表单控件（完整写出标签及类型）： 
文本框 
多行文本域
文件域
密码框 
单选按钮
How
<input type=”text”/>
<input type=”textarea”>
<input type=”fifle"/>
<input type=”password”>
<input type=”radio”>
5、CSS3中实现圆角的属性是()
What:
CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等

When:
当在页面中需要实现圆角的时候
Why
传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：
　　* 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。
　　* 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。
　　* 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。
How
Border-radius:20%;
6、定位的元素要决定其上下层叠关系，使用的属性是()。
What
文档中后来的居上
When
定位的元素要决定其上下层叠关系
How
Z-index:1;
7、填充背景颜色() 填充背景图片() 背景图片水平重复() 背景图片固定() 背景图片定位在右下角()
What
Backgroud-color:red;
Background-image:uri();
Bakground-repeat:repeat;
Background-attachment:fixed;
Background-posiiton:right bottom;
8、1、设置文字居中() 2、设置行高为150%() 3、设置首行缩进2个字符() 4、设置下划线() 5、取消下划线
What
Text-aligh:center;
Line-hight:150%
Text-indent:2em;
Text-decoration:underline;
Text-decoration:none;
9、块级元素与内联元素分别有哪些
块级：h1-h6 div  p table ul dl
内联元素：span b i em strong img
10、文本溢出省略的处理方法
What:
溢出文本指的是多出规定的字符。
When:
当多出规定的字符
How：
{width：200px;white-space:norwrap;overflow:hidden;text-overflow:ellipsis;
}
11、display:none与visibility:hidden的区别是什么？
What：
display:none：
内容在网页不显示
visibility:hidden
是元素“不可视”
How：
display属性设定为“none”的元素将不产生任何的框（Box），也就是说，元素对布局没有影响，浏览器将不显示该元素，包括其后代元素。更不会占位。
而如果设定“visibility : hidden”则会生成元素框，只是元素“不可视”，而其他非视觉的属性都将生效，例如widht、padding等。
12、设置全局字体，哪些标签不收影响？
H1-h6 color img 
13可继承属性
不可继承的：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。
14、实现左侧右侧固定中间自适应的网页结构


<style>
.Left{float:left;width:200px;height:200px;}
.right{float:right;height:200px;height:200px}
.center{overflow:hidden;height:200px}
</style>
<div class=”left”></div>
<div class=”right”></div>
<div class=”center”></div>

15、常见兼容性问题，列出至少5种并说明解决方法。
What
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
When
是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的时候
why
为了实现在不同浏览器下实现页面同样的效果。
How


16、.$(document).ready() 是个什么函数？为什么要用它？

是一个事件函数。
ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题

17、h5新增标签
<header> 定义了文档的头部区域
<nav>      定义了导航链接部分
<article>    定义了页面独立的内容区域
<section>   定义了文档中的节，区段
<aside>     定义页面的侧边栏内容
<details>   用于描述文档或文档中某一个细节
<summary>  标签包含details元素中 是标题的意思
<dialog>          定义对话框，提示框。
<command> 定义命令按钮，比如单选按钮，复选框。
<bdi>  允许设置一段文本，脱离父文本的方向 
<figure> 规定了独立的流内容
<figcaption> 定义figure的标题
<footer>  seaction的页脚，或者定义文档的页脚
<mark>  定义了带有记号的文本
<meter>  定义度量衡，用已知的最大跟最小值度量
<progress> 定于任何类型的任务进度
18、H5视频格式
What:
<video>是在浏览器播放视频时需要的标签。
格式有，ogg  MP4  webM
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

Why:
不是所有的浏览器都统一支持上面三种格式。每个格式的视频编码不同，文件不同，所以不同的浏览器都会有不同的支持度。

When: 
Safari  IE支持MP4  
Firefox  Chrome 在以上三种格式都会支持。
Opera支持MP4是从25版开始，其他的格式都会支持。


How:


<video width="320" height="240" controls>
  <source src="12.mp4" type="video/mp4">
  <source src="12.ogg" type="video/ogg">
<source src="12.webM" type="video/webM">
  您的浏览器不支持 HTML5 video 标签。
</video>
在标签之中的文字，是用来提示不支持此标签的浏览器的用户。
Source是用来链接视频的不同的格式，浏览器会匹配他所支持的第一个格式。
19、CSS3新增伪类有那些？
What:
伪类分为：伪类选择的器，跟伪类元素
伪类选择器有：
ul>li:first-child{} 此时选取的是ul下面的第一个子元素li
ul>li:last-child{} 此时选取的是ul下面的最后一个子元素li
ul>li:nth-child(3){} 选取的是ul下面的子元素li 后面（）中的数字是此元素的索引值，从1开始。
ul>li:first-of-type{} 选取ul下面的子元素的li ，与上面不同的时候，此时我们选取的li可能不是ul中第一个子元素，但是li元素集合中的第一个。
ul>li:last-of-type{} 选取ul下面的子元素的li ，与上面不同的时候，此时我们选取的li可能不是ul中最后一个子元素，但是li元素集合中的最后一个
ul>li:nth-of-type(){} 原理一样
:root{} 此时选取的是html  根元素
:empty{}选取的是空元素 ；不含有空格的空元素
:target{}  通过设置ID ，在连接处名称写入相对应的id 前面添加#号
可以在点击操作的时候改变其样式，类似于JS中的TAB切换 
:enabled{}选取每个启用的input
:disabled{} 选取每个禁用的input;
:cheacked{}选取已经被选定的input 这里选择的是复选框跟单选框，还有下拉列表
伪类元素：
div:after{} 在一个元素之后添加一个伪元素，此类为与content配合使用
div:before{} 在一个元素之前添加一个伪元素，此伪元素与content配合使用
why:
在css2版本中，样式的添加需要添加非常多的类名，很多的指定，跟多叠层相加的选择器， CSS3 充分解决了这一个高消耗的弊端，比如说在索引选择器中，我们可以用nth-of-type()的选择器方式，选择在一个父级中，拥有相同标签的元素。省事，省力，高性能。
伪类元素的新增，解决了大部分的重复性的元素创建，减少了HTML 代码的书写量。比如在一段文字前面加上一个顺序号，我们可以使用一个选择器，添加伪类元素，加上content方法，          来依次排列相同元素的顺序号。
When:
伪类选择器：
First-child{}
Last-child{}
First-of-type{}
Last-of-type{}
Nth-of-type(){}
Nth-child(){}
以上六种选择器作用在同一个父级，同一类型标签中使用
Type跟child的区别是 
在同一个父级，
比如div中的p元素不是div的首个子元素，而是第N个元素。
使用child方法不管用。
使用type方法可以获得返回。
:after{}伪类元素作用在元素之后
:before{}伪类元素作用在元素之前
Input: enabled{}选取的是正常启用的input标签
Input:diabled{}同上理
Input：checked{}选取的是，input元素中，拥有 checked=”checked”的元素
20、CSS过渡效果是什么，是如何进行工作的？

What:
Transition:
此属性，是规定一个元素，
以什么的时间曲线，
规定单个CSS样式，或者全部的CSS样式，
用多长时间从一个样式转换为另一个样式。

Why:
网页的各种绚丽的效果都离不开过渡，过渡属性的新增，大大减少了JS代码。让我们更能方便而且很实用的去操控制定这些样式。更能提高用户的体验。

When:
Transition可以作用在每个元素上；
How:
Transition属性有：
Transition-property:   定义过渡的属性名称
Transition-duration:  定义过渡的时间
Transition-timing-function:定义过渡的时间曲线
Transition-daley:   定义过渡从何时开始
可以使用简写属性，
Transition: all 1s ease 1s
过度： 全部属性，执行过程需要1S   使用ease时间曲线，  1s后执行

转载于:https://www.cnblogs.com/dayean/p/6796174.html