HTML，css基础总结

1.html5的新增标签、css3的新增属性

h5:section article aside header hgroup footer video audio
css3: border-color border-image border-radius box-shadow background-size background-origin background-clip

2.块级元素的显示与隐藏，并说明区别（三种）

display:none/block 元素隐藏之后，不占用原来的位置
visibility:hidden/visible 元素隐藏之后，占用原来的位置
opcity: 0/1 设置透明度来隐藏，占用原来位置

3.表单元素的布尔属性

reversed 反转
checked 选中
disabled 禁用
readonly 只读
multiple 是否可以多选
selected 多选，默认选中
required 必填
formnovalidate 不验证表单
布尔属性是控制元素的某一个状态，是一种比较特别的属性。由于浏览器商之前互相没协商好，因此在定义布尔属性时，也有差异。
布尔属性主要出现在表单元素上，常见的有radio,checkbox上的checked属性，option元素的selected属性以及所有 表单元素都支持的disabled属性。

4.css的引入方式有哪些，和优先级

外部导入(link标签)
内嵌style标签
行内添加style属性

行内 > 内嵌 > 链接

5.html的核心属性有哪些

核心属性：id、class、style、title

6.选择器的优先级是什么？请按权重列出选择器的先后顺序

选择器优先级：
1）是否具有!important声明
2）选择器权重
1000 定义在标签style属性中
100 id选择器
10 类选择器，伪类选择器，属性选择器
1 元素选择器,伪元素选择器
3）选择器权重相同时，后者覆盖前者（就近原则，哪一个样式离标签近，哪一个就生效）
顺序：
!important > id选择器 > 类选择器=伪类选择器=属性选择器 > 元素选择器=伪元素选择器

7.overflow的三种取值，和具体含义

auto：自适应，在需要时剪切内容并添加滚动条。
scroll：将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
hidden：将超出对象尺寸的内容进行裁剪，不会出现滚动条。

8.几种定位，它们是否脱离了文档流、相对于谁来定位

position：static、relative、absolute、fixed
static：默认值，没有定位，正常文档流之中
relative：元素相对与原本位置的定位，并没有脱离文档流
absolute：给元素设置绝对的定位，脱离文档流
1）设置了absolute的元素，如果有祖先级元素设置了position为relative或absolute，则此时元素定位的对象为祖先级元素
2）设置了absolute的元素，如果没有祖先级设置position，则此时元素相对与body定位，即浏览器视口
fixed：固定定位，脱离文档流，相对于浏览器视口进行定位

9.盒子模型有哪些，简述它们的概念、宽度的计算方式，并说明通过什么属性可以改变盒模型

内容盒子：content-box width = content
边框盒子：border-box width = content+ padding + border
通过box-sizing可以改变盒模型

10.清除浮动的方式，从父子级和兄弟级两方面进行描述

1）浮动元素的父元素设置高度
2）浮动的父级元素设置overflow:hidden;
3）浮动元素的父元素使用::after{clear:both;content:’’;display:block}
兄弟元素：
在使用浮动的最后一个兄弟元素后面，添加一个标签，该标签使用clear:both;

11.块级元素与行内元素的特性，并举例哪些是块级元素与行内元素

块级元素：div、h1~h3、p、ul、html、body

1. 独占一行空间
2. 默认宽度为100%，默认高度由子元素或者内容决定
3. 可以为其指定宽高 style=“width:;height:;”
   行内元素：a、span、img
4. 与其他行内元素共享一行空间
5. 默认宽高由内容决定
6. 不能为其指定宽和高
7. 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

12.列举至少5个动画的属性，并简述该属性的作用

animation-name:动画名称;
animation-duration:持续时间;
animation-del ay:动画延迟；
animation-fill-made:结束后保留哪个样式 forwards保留最后一帧
animation-direction:运动方向；
reverse 翻转
altermate 交替
animation-iteration-count动画次数
animation-timing-funct（时间曲线） linear时间曲线 steps步
animation-play-state 播放状态
running
paused

13.定宽高块级元素在父元素中水平垂直居中的方法有哪些

1）可以给父级使用相对定位，子级使用绝对定位并margin:auto;，将top、left、right、bottom为0
2）给父级和子级都加绝对定位，再给子级添加top：calc（50% - 子级元素高度一半）left：calc（50% - 子级元素宽度一半）
3）给父级相对定位,子级绝对定位：left：50%；top：50%；
margin-left：-子级元素宽度一半；
margin-top：-子级元素高度一半
4）给父级一个display：flex； align-items：center；
再给子级添加：margin：0 auto；