面试
<h3>标签的语义化</h3>
<pre><code>简单来说就是合适的地方放合适的元素,最典型的页面架构为
头部区域:
<header><nav/></header>
内容区域:
<main>
<article>
</article>
<aside>
<nav>
<section>
<div>/
</adise>
</main>
页面尾部:
<footer></footer>
优点:
易修改,易维护
无障碍阅读支持,
利于seo优化</code></pre>
<h3>盒子模型</h3>
<pre><code>标准盒子模型(context-box):(content) + border + padding + margin
传统盒莫醒醒(border-box):(content + border + padding ) + margin</code></pre>
<h3>css选择器</h3>
<pre><code>简单选择器:
id(#) class(.) 标签(div)
组合选择器:
相邻(h1+p) 子代(ui>li) 后代(li a) 通配符(*) 属性选择器(a[rel='extend']) 伪类(a:hover,li:nth-child(n))
可继承的属性:
color,font-size,font-family等
不可继承:
border,padding,margin,widht,height等,
优先级:
!important(最高) > id(100) > class(10) > 标签(1) </code></pre>
<h3>伪类选择器</h3>
<pre><code>first-of-type:属于其父元素的首页元素
last-of-type:属于其父元素的最后一个元素
only-of-type:属于其父元素的唯一元素
only-child:属于其父元素的唯一子元素
nth-child(n):属于去父元素的第n个子元素
:enabled :disabled:表单控件的禁用状态
:checked 单选框或者复选框的选中</code></pre>
<h3>元素居中</h3>
<pre><code>块级元素水平居中: margin 0 auto;
浮动元素水平垂直居中:
父元素:position:relative
子元素:
widht:100% height:100%
position:absolute
left:50%,right:50%
transform:translate(-50%,-50%)
flex布局居中:
父元素:diaplay:flex;
justify-content:center;
align-content:center;</code></pre>
<h3>diaplay有哪些值?含义是什么</h3>
<pre><code>inline:内联
none:隐藏
block:块级元素
table:表格
list-item:列表
inline-block:行内块</code></pre>
<h3>position的值?</h3>
<pre><code>static(默认):正常文档流
relative:相对定位
absolute:绝对定位
fixed:固定定位</code></pre>
<h3>css3新特性</h3>
<pre><code>rgba:透明度
background-image(背景图片),background-origin(content-box/padding-box/border-box),background-size背景大小(),background-repeat(展现形式,no-repeat),
word-wrap: 不可分割长单词换行
文字阴影:text-shadow
自定义字体:font-face
圆角:border-radius
边框图片:border-image:url(xxx.png) 30 30 round
盒子阴影:border-shadow
媒体查询:@media</code></pre>
<h3>弹性盒子布局(flex)</h3>
<pre><code>主要适用于移动端开发,
父元素设置diaplay:flex,及可开启弹性盒子布局
子元素设置:flex-grow,可以控制子元素所占父元素空间的大小, 0全部空间/1剩余空间
对齐方式:
align-self: center; 子元素属性,设施其自身的对齐方式
align-items:父元素属性,设置其所有子元素的对齐方式
justify-content: 父元素属性作用于其所有子元素的布局方式;
flex-wrap:父元素属性,设置子元素是否超出换行</code></pre>
<h3>CSS创建一个三角形的原理是</h3>
<pre><code>width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;</code></pre>
<h3>常见的兼容问题</h3>
<pre><code>1.清空所有margin 及padding (不同浏览器的margin,padding不同)
2.chrome中文界面下默认会将小于12的文本转换为12px显示,通过webkit-text-size-adjust: none;解决</code></pre>
<h3>display:none与visibility：hidden的区别</h3>
<pre><code>display:none:不显示对应元素,在文档流中不在分配空间(回流 + 重绘)
visibility:hidden,隐藏对应元素,在文档流中仍然保留原来的空间(重绘)</code></pre>
<h3>BFC</h3>
<pre><code>块级式化上下文
触发条件:
1.根元素
2.float:非none
3.overflow:非visible
4.display:inline-block , table-cell , table-caption flex inline-flex
5.position:absolute fixed
特性:
1.属于同一个BFC的两个容器的上下margin会重叠 (父元素设置overflow :hidden)
2.计算BFC高度时,浮动元素也参与计算,及高度崩塌 (父元素设置overflow :hidden)
3.BFC的区域不会与浮动容器发生重叠
4.BFC内的容器在垂直方向一次排列
5.元素的margin-left与其包含块的border-left相接处
6.BFC是独立的容器,容器内部元素不会影响容器外部元素
https://www.cnblogs.com/qs-cnblogs/p/12349887.html
利用BFC的特性通常可以解决:上下margin重叠,浮动高度嵌套崩塌,以及浮动元素与非浮动元素重叠等问题;</code></pre>
<h3>浮动会产生那些影响,及解决办法</h3>
<pre><code>影响:
1.父元素的高度无法被撑开,影响与父元素同级别的元素
2.与浮动元素同级别的非浮动元素(内联元素)会跟随其后
3.若非第一个元素浮动,则改元素在之前的元素也需要浮动,否则影响页面显示结构
解决方法:
1.父级定义height;
2.最后一个浮动元素后添加一个空的div,并设置clear:both
3.浮动元素的父标签添加样式overflow:hidden或者auto</code></pre>
<h3>css优化发布方法</h3>
<pre><code>1.避免后代选择器;
2.避免链式选择符
3.使用紧凑的语法
4.避免不必要的命名空间
5.避免不必要的重复
6.使用标识语义的名字</code></pre>
<h3>什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE</h3>
<pre><code>响应式网站设计,是一个网站能够兼容的多个终端,而不是为每一个终端做一个特定的版本;
基本原理就是:
通过媒体查询检测不同的设备屏幕尺寸做处理;
页面头部需要有mate声明的viewport:
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”></code></pre>
<h3>::before和:hover中的双冒号和单冒号的区别;</h3>
<pre><code> 单冒号:css3伪类 常见有 :hover :disable
双冒号:css3伪元素 常见有 ::before ::after</code></pre>
<h3>怎么让Chrome支持小于12px 的文字？</h3>
<pre><code>p{ font-size:10px;-webkit-transform:scale(0.8); } //0.8是缩放比例</code></pre>
<h3>js的数据类型</h3>
<pre><code>基础类型:
Number
String
Boolean
Null
Undefined
Symbol
引用数据类型:
Object
Function</code></pre>
<h3>Map和Set的区别</h3>
<pre><code>Map和Set 都是一种数据结构
Map对象保存键值对 任何值(对象或者原始值)都可以作为键或值,
与Object的区别 :
1.Object的键只能是字符串或者Symbol,但Map的键可以使任意值;
2.Map的键值是有序的,而添加到对象的键则不是
3.Map的键值个数可以通过size属性获取,而对象只能通过手动计算
Map的属性:size
Map的方法:
set(key,val)
get(key)
has(key)
delete(key)
clear()
Set对象允许你存储任意类型的值,无论原始值,还是对象的引用,它类似于数组,但成员是唯一的,没有重复的值
Set本身就是一个构造函数,用来生成Set数据结构,Set函数可以接收一个数组用于初始化
set的属性:size
set的方法:
add(val)
delete(val)
has(val)
clear()
可以通过Set实现数组去重 [...new Set(arr)]</code></pre>
<h3>原型与原型链</h3>
<pre><code>构造函数,实例原型,实例之间的关系:
构造函数的prototype指向调用该构造函数生成的实例原型(对象);
对象(包含通过改构造函数 new 出来实例,null除外 )都有一个属性_proto_,指向该对象的实例原型
每个实例原型都有一个constructor 指向其关联的构造函数
实例属性的查询关系, 自身没有就找与之关联的是原型中的属性,还找不到就继续向上找
实例原型既然是个对象那么他有也有_proto_属性指向他的实例原型
因此原型链就是通过这一系列的关系形成的链式结构</code></pre>
<p><img src="https://upload-images.jianshu.io/upload_images/3174701-18a76d28c0a9ea1b?imageMogr2/auto-orient/strip|imageView2/2/w/521/format/webp" alt="avatar" /></p>
<h3>this的指向</h3>
<pre><code>一般情况下 谁调用,指向谁;
箭头函数 指向外层</code></pre>
<h3>深浅拷贝</h3>
<pre><code>浅拷贝:
var a ={ count :1,deep:{count:2}}
1.var b = Object.assign({},a)
2.var b ={...a}
深拷贝:
var deepCopy=(obj)=>{
var ret={}
for(var key in obj){
var value=obj[key]
ret[key] = typeof value === 'Object'? deepCopy(value) : value
}
return ret
}</code></pre>
<h3>事件冒泡 事件捕获 监听,阻止默认,阻止冒泡</h3>
<pre><code>事件冒泡和事件捕获基本一致,都是父元素和子元素都绑定了click事件,然后单击父元素,间接触发子元素的click事件,差别在于事件触发的顺序,冒泡是从里向外一次触发,捕获是从外向里触发事件,
通过这一现象,可以通过事件监听可以减少代码量
监听 addEventListener('click',function(e){
var e = e||window.event
//获取点击事件的元素
if(e.target.nodeName.toLowerCase() === '标签名'){
//触发事件
}
})
阻止冒泡的方法
(1)给足子级 event.stopPropagation()
(2)或者在事件处理中使用 return false
阻止默认的方法
(1)event.preventDefault( )
(2)return false</code></pre>