前端基础面试题学习（一）

目录

HTML+CSS部分

1.如何使一个元素在水平和垂直方向上居中？

2.如何清除浮动？

3.css优先级算法如何计算？

4.html5有哪些新特性？

5.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？

---

HTML+CSS部分

1.如何使一个元素在水平和垂直方向上居中？

方法一： 采用弹性盒子

display: flex;
align-items: center;
justify-content: center;

方法二： 定位+位移

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

方法三： 给子盒子设置定位的上下左右都为0 ，,然后设置margin自动适应

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

 方法四： 定位+子盒子左边距、上边距的一半

width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;//为宽度的一半
margin-top: -50px;//为高度的一半

2.如何清除浮动？

方法一：父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

方法二： 使用after伪元素清除浮动

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

方法三： 使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

3.css优先级算法如何计算？

选择器	计算权重公式
继承或者*	0,0,0,0
标签选择器	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式	1,0,0,0
每个!important	无穷大

4.html5有哪些新特性？

 1.拖拽释放(Draganddrop)API ondrop 自定义属性 data-id 获取 li.getAttribute(‘data-id’)或者 li.dataset.type=‘guoji’

2.语义化更好的内容标签（header,nav,footer,aside,article,section）

3.音频、视频 API(audio,video) 如果浏览器不支持自动播放怎么办？

4.画布(Canvas)API 热 canvas 和 image 的区别？

5.地理(Geolocation)API

6.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除

7.表单控件，calendar、date、time、email、url、search 、tel、file、number

9.新的技术 webworker,websocket,Geolocation

5.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？

 CSS 选择符：

1.id选择器(# myid)

2.类选择器(.myclassname)

3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p)

5.子选择器(ul > li)

6.后代选择器(li a)

7.通配符选择器( * )

8.属性选择器(a[rel = “external”])

9.伪类选择器(a: hover, li:nth-child)

可继承的样式：

1.font-size

2.font-family

3.color

4.text-indent

不可继承的样式：

1.border

2.padding

3.margin

4.width

5.height

优先级算法：

1.优先级就近原则，同权重情况下样式定义最近者为准;

2.载入样式以最后载入的定位为准;

3.!important > id > class > tag

4.important 比 内联优先级高，但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

内容出自该大佬，大家可以移步大佬博客观看。qq_42802170
————————————————
原文链接：https://blog.csdn.net/qq_42802170/article/details/120801588