内容简介：事件流描述的是从页面接收事件的顺序，事件捕获阶段处理事件阶段
1.说说前端中的事件流？
事件流描述的是从页面接收事件的顺序， DOM2 级事件流包括下面几个阶段。
事件捕获阶段
处理事件阶段
事件冒泡阶段
（ addEventListener ： addEventListener 是 DOM2 级事件新增的指定事件处理程序的操作，这个方法接收 3 个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。最后的布尔值如果为 true ，表示在捕获阶段调用事件处理程序；如果为 false ，表示在冒泡阶段调用事件处理程序，默认为 false ）
2.如何实现一个自适应的正方形
1） CSS 3vw 单位
CSS3 中新增了一组相对于可视区域百分比的长度单位 vw、vh、vmin、vmax 。其中 vw 是相对于视口宽度百分比的单位， 1vw=1%viewport width ， vh 是相对于视口高度百分比的单位， 1vh=1%viewport height ； vmin 是相对于当前视口宽高中较小的一个的百分比单位，同理 vmax 是相对当前视口宽高中较大的一个百分比单位。
代码实现：
.placeholder{
width: 50vw;
height: 50vw;
}
优点：简洁方便
缺点：浏览器兼容不好
2)设置垂直方向的 padding 撑开容器
margin、padding 的百分比数值是相对于父元素宽度计算的。由此可以发现只需要将元素垂直方向的 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：
代码实现：
.placeholder{
width: 100%;
padding-bottom:100%;
}
如果正方形中没有内容（相当于只是一个几何里面的正方形，并没有展示其他任何内容），一切看起来都很正常；但是，如果正方形中有其他内容（这种情况会更常见一些，比如说有一些文本和图片），此时容器的高度就会被拉伸，因为盒子模型中的 padding 是不包含在 content 中的，所以我们可以通过 height:0 解决这个问题；这种方案简洁明了，且兼容性好；但是除了填充内容后会出现问题以外，还有可能碰上 max-height 不收缩，于是第三种方案来了：
3）利用伪元素的 margin(padding)-top 撑开容器
在方案二中，我们利用百分比数值的 padding-bottom 属性撑开容器内部空间，但是这样做会导致在元素上设置的 max-height 属性失效；而失效的原因是 max-height 属性只限制于 height ，也就是只会对元素的 content height 起作用。那么我们是不是能用一个子元素撑开 content 部分的高度，从而使 max-height 属性生效呢？我们来试试：
.placeholder {
width: 20%;
background-color: #000;
/* overflow: hidden; */
/* display: inline-block; */
float: left;
/*设置成BFC才能使margin-top撑起高度*/
}
.placeholder:after {
content: '';
display: block;
margin-top: 100%;
/* margin 百分比相对父元素宽度计算 */
}
3.js中的位置关系
offsetParent ：该属性返回一个对象的引用，这个对象是距离调用 offsetParent 的元素最近的（在包含层次中最靠近的），已进行过 CSS 定位的容器元素。 如果这个容器元素未进行 CSS 定位, 则 offsetParent 属性的取值为 body 元素的引用。 当容器元素的 style.display 被设置为 "none" 时（译注： IE 和 Opera 除外）， offsetParent 属性 返回 null 。
top ：该属性一般对用过 css 定位的元素有效（ position 为 “static” 时为 auto ，不产生效果），定义了一个 top 属性有效的元素（即定位元素）的上外边距边界与其包含块上边界之间的偏移。
clientTop ：元素上边框的厚度，当没有指定边框厚底时，一般为 0 。
scrollTop ：位于对象最顶端和窗口中可见内容的最顶端之间的距离，简单地说就是滚动后被隐藏的高度。
offsetTop ：获取对象相对于由 offsetParent 属性指定的父坐标( css 定位的元素或 body 元素)距离顶端的高度。
clientHeight ：内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个 工具 条以下到状态栏以上的这个区域，与页面内容无关。
scrollHeight ： IE 、 Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight 。 FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight 。
offsetHeight ：获取对象相对于由 offsetParent 属性指定的父坐标( css 定位的元素或 body 元素)的高度。 IE 、 Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight 。 offsetHeight 在新版本的FF和IE中是一样的，表示网页的高度，与滚动条无关， chrome 中不包括滚动条。
*诸如left、clientLeft、offsetLeft、clientWidth、scrollWidth等，和top、height类似，不再赘述。
clientX 、 clientY ：相对于浏览器窗口可视区域的 X ， Y 坐标（窗口坐标），可视区域不包括工具栏和滚动条。 IE 事件和标准事件都定义了这 2 个属性。
pageX 、 pageY ：类似于 event.clientX 、 event.clientY ，但它们使用的是文档坐标而非窗口坐标。这 2 个属性不是标准属性，但得到了广泛支持。 IE 事件中没有这 2 个属性。
offsetX 、 offsetY ：相对于事件源元素（ target 或 srcElement ）的 X , Y 坐标，只有 IE 事件有这 2 个属性，标准事件没有对应的属性。
screenX 、 screenY ：相对于用户显示器屏幕左上角的 X , Y 坐标。标准事件和 IE 事件都定义了这 2 个属性
4. Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
Doctype 声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。
5. link 标签和 import 标签的区别?
link 属于 html 标签，而 @import 是 css 提供的
页面被加载时， link 会同时被加载，而 @import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签，因此没有兼容性，而 @import 只有 IE5 以上才能识别。
link 方式样式的权重高于 @import 的。
6.元素的文本省略号?
单行：
overflow:hidden; text-overflow:ellipsis; white-space:nowrap
多行：
1）直接用 css 属性设置(只有-webkit内核才有作用)
display: -webkit-box -webkit-box-orient:vertical -webkit-line-clamp:3 overflow:hidden
移动端浏览器绝大部分是 WebKit 内核的，所以该方法适用于移动端；
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（ unsupported WebKit property ），它没有出现在 CSS 规范草案中。
display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis 以用来多行文本的情况下，用省略号 “…” 隐藏超出范围的文本。
2）利用伪类
<div id="con">
<span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
<span class="t"></span>
</div>
<style>
#txt{
display: inline-block;
height: 40px;
width: 250px;
line-height: 20px;
overflow: hidden;
font-size: 16px;
}
.t:after{
display: inline;
content: "...";
font-size: 16px;
}
</style>
这种方法的缺点就是内容不足以超过位置的时候，还是会有...
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
