HTML5、CSS3面试题

目录

1、说一说H5新标签？

2、CSS3的新特性？

3、如何实现一个盒子水平垂直居中？

4、你是怎么理解BFC的？

5、说一说盒子模型？

6、如何画一个三角形？

7、说一些块级元素和行内元素

8、简单聊一聊重排和回流？

9、文本超出部分显示省略号？

10、说一说清除浮动的方式？

11、请你说一说css的选择器，以及优先级

12、来说一说CSS3的过渡？

13、简单聊一聊CSS3的2D、3D转换

14、说一说CSS3的动画？

15、如何理解标签语义化的？

16、DOCTYPE的作用是什么？

---

1、说一说H5新标签？

语义化标签：Header、Nav、Footer、Article、Aside；音视频标签：audio、video；canvas、svg；web存储：localStorge、sessionStorge

2、CSS3的新特性？

border-radius，box-shadow、background-size、媒体查询、伪类选择器：nth-child、box-sizing盒子模型、CSS2D、3D转换，CSS3动画等。

3、如何实现一个盒子水平垂直居中？

（1）flex布局：父元素设置display:flex,并且设置algin-items:center,justify-content:center.

（2）子绝父相：子元素top:50%,left:50%,transform:translate(-50%,-50%)

（3）子绝父相：子元素：top:0,left:0,bottom:0,right:0,margin:auto

（4）grid布局：父元素设置display：grid,子元素设置align-self: center;justify-self: center;

4、你是怎么理解BFC的？

BFC：块级格式化上下文，它是一个独立的渲染区域，不会和其他盒子发生干扰，主要用于清除浮动，防止出现外边距塌陷问题。

触发BFC的条件有：根元素

                                float不为none

                                positton为fixed和absolute的元素

                                display为inline-block,table-cell、flex的元素

                                overflow不为visible的元素

5、说一说盒子模型？

盒子模型分为两种：（1）标准盒子模型：盒子的总宽=width+padding+border

                                 （2）怪异盒子模型：盒子总宽度=width

设置盒子模型用：box-sizing属性：content-box(标准盒子模型)、border-box(怪异盒子模型)

6、如何画一个三角形？

一个div，宽高为 0，border四个边给一个50px，其中一边给一个颜色，其他三个边给一个透明。

<