前端html5+css面试

最新推荐文章于 2022-11-22 01:11:17 发布

一杯充满泡泡的可乐

最新推荐文章于 2022-11-22 01:11:17 发布

阅读量117

点赞数

分类专栏：面试

本文链接：https://blog.csdn.net/weixin_45781661/article/details/105387503

版权

面试专栏收录该内容

6 篇文章 0 订阅

订阅专栏

H5

1、viewport的常见设置有哪些

viewport常常在响应式开发和移动Web开发中使用，它是用来设置视口的，主要是规定视口的宽度、视口的初始缩放值、视口的最小缩放值、视口的最大缩放值等，一个常见的viewport设置如下
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" />
其中同时设置width和inital-scale的目的是为了解决iphone、ipad、ie横竖屏不分的情况，因为这两个值同时设置会取最大值。

2、介绍HTML5的特性

首先，html5为了更好的实现web语义化，增加了header、footer、nav、aside、section等语义化标签。
在表单方面，为了增强表单，为input增加了color、url、email、date等类型
在存储数据方面提供了sessionStorage、localStroage和离线存储。通过这些存储方式方便数据在客户端的存储和获取
在多媒体方面规定了音频和视频（audio和video）
另外还有地理定位、canvas画布、拖放、多线程编程的web workers和websocket协议

3、html5的存储方式有哪些

html5提供了sessionStroage、localStroage和离线存储（cookie）。其中sessionStroage和localStroage都是采用键值对的形式存储，两者都是通过setItem、getItem、removeItem来实现增删改查的，而sessionStroage是会话存储，就是说一旦关闭浏览器后sessionStroage会自动清空，而localStroage是不会的，它没有时间上的限制。离线存储是把需要离线存储在本地的文件列在一个manifest配置文件中，可以通过更新这个manifest文件来达到更新缓存文件的目的。

4、块级元素有哪些，行内元素有哪些，有什么区别

块级元素表示布局的有div、section、header、footer、aside、nav等，列表类有ul li、ol等，其他的还有form、p、table、h1~h6等
行内元素有a、span、button、input、select、textarea、i等

5、什么是web语义化，有什么好处

web语义化可以让机器读懂内容，它的好处有以下几点
- 开发者友好：使用语义类标签增强了可读性，开发者可以清晰的看出网页的结构，也方便于团队的开发与维护
- 搜索引擎友好：有利于SEO（搜索引擎优化），提升网页的权重
- 机器友好：语义类还可以支持读屏软件，根据文章自动生成目录。

6、meta标签的定义与作用

meta标签是head中的一个辅助性标签，提供关于HTML文档的元数据，它并不会显示在页面上，但对于机器是可读的。
meta标签里的数据是供机器解读的，其主要作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等。

7、html、xhtml、xml

XML是Extentsible Markup Language 可扩展标记语言
HTML是Hypertext Markup Language超文本标记语言。
XHTML 是EXtensible HyperText Markup Language扩展超文本标记语言

8、src和href的区别

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

css

1、解释一下display的几个常用的属性值，inline，block，inline-block

inline（行内元素）:
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）:
- 可以和其他元素共享一行；
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

2、介绍flex布局，用flex实现三列布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
容器的属性:
- flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap: nowrap | wrap | wrap-reverse;
- flex-flow: flex-direction || flex-wrap;
- justify-content: flex-start(默认) | flex-end | center | space-between | space-around;
- align-items: flex-start | flex-end | center | baseline | stretch(默认);
- align-content: flex-start | flex-end | center | space-between | space-around | stretch;
项目的属性
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

3、水平居中的方法

元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
使用flex-box布局，指定justify-content属性为center
display设置为tabel-ceil,text-aligin:center

4、垂直居中的方法

将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
使用flex布局，设置为align-item：center
绝对定位中设置bottom:0,top:0,并设置margin:auto
绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
文本垂直居中设置line-height为height值

5、简要介绍一下CSS3的新特性

在布局方面新增了flex布局；
在选择器方面新增了例如:first-of-type,nth-child等选择器；
在盒模型方面添加了box-sizing来改变盒模型，
在动画方面增加了animation、2d变换、3d变换等。在颜色方面添加透明、rgba等，
在字体方面允许嵌入字体和设置字体阴影，同时当然也有盒子的阴影，
媒体查询。为不同设备基于它们的能力定义不同的样式。

6、讲讲盒模型

盒模型分为标准模型和IE模型两种。
标准盒模型从内到外分别是content，padding，border，margin。
而在IE模型（怪异盒模型）中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

7、position定位方式

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
inherit 规定应该从父元素继承 position 属性的值。

8、使元素消失的方法

opacity：0：该元素隐藏起来，但不会改变页面布局，如果该元素绑定了事件会触发。
visibility:hidden：该元素隐藏起来，但不会改变页面布局，不会触发该元素已经绑定的事件。
display:none：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。