前端面试（html+css）相关问题

简单地做了下总结！也是工作上比较经常使用的对自己也是有些帮助！

有什么问题也可以留言一起探讨下！！！谢谢

html

一.html

1.xhtml和html的区别

(1)头部doctype生命不同，xhtml的头部必须按照规定XHTML DTD

(2)html元素必须正确嵌套，不能乱

(3)属性必须是小写的

(4)属性值必须加引号

(5)标签必须有结束

2.html 块级元素和行内元素  块级元素和行内元素区别

块级元素：div p ui li h1-h5 from table

行内元素：span i input img lable button select

区别：

行内元素：不能设置宽高；margin设置左右有效，上下无效；padding无效；不会自动换行

块级元素：可以设置宽高；margin和padding都有效；可以自动换行；多个块状从上到下

一，h5新特性

1.语义化标签

header  标签包含导航

footer 作者信息，相关链接

nav 构建导航组件

aside 主要装载广告，侧边栏

article 包含文章 内嵌header footer h1 p标签

section 可以用在以上任一 一个标签划分组件

hgroup

2.表单新增功能

placeholder属性

autofocus属性 页面只能有一个

css

css

1.盒模型

网页元素如何显示和元素之间的相互关系

boder padding margin content 填充

2.弹性布局flex

(1)提供一种更加有效的方式来对一个容器中的条目进行排列，对齐和分配空白空间。

(2)即便容器的条目的尺寸未知或是动态变化，弹性盒布局模型也能正常的工作。

3.水平垂直居中弹性布局flex

(1)父元素：display:flex;弹性布局

子元素：align-self：center

.box{

                height:600px;

                width:600px;

                background-color:yellow;

                display:flex;

            }

            .box1{

                /*水平居中*/

                margin:0auto;

                width:300px;

                height:300px;

                background-color:aqua;

                /*垂直居中*/

                align-self:center;

            }

(2)display:flex;

justify-content:centen;

align-items:center;

.box3{

                height:100px;

                width:100px;

                background-color:red;

                display:flex;

                justify-content:center;

                align-items:center;

            }

            .box4{

                height:50px;

                width:50px;

                background-color:#FFFF00;

            }

(3)绝对定位+transform

position:relative;

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%)

    .box5{

                width:100px;

                height:100px;

                position:relative;

                background-color:#FF0000;

            }

            .box6{

                width:50px;

                height:50px;

                position:absolute;

                background-color:#00FFFF;

                left:50%;

                top:50%;

                transform:translate(-50%,-50%);//移动

            }

4.rem em vh(移动端相关的知识)

(1)em

是根据父元素的大小来改变的

(2)rem

是根据html的大小来设置的

(3)vh vw

是根据html来判定的

(4)

.box{

height:100vmin;

width:100vmin;

}

.box{

height:100vmax;

width:100vmax;

}