前端面试题 --- HTML CSS

一、行内元素和块级元素

1、行内元素

主要有：<a>、 <img>、 <span>、、<input>、<select>、<label>、<textarea>、 <b>字体加粗、<br>换行、<big>、<i>斜体
特点：

display：inline
行内元素会在一条直线上排列，在同一行的水平方向排列
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
不可以包含块级元素

2、块级元素

主要有：<div>、<form>、<h1-6>、<hr>水平线、<li>、<ol>有序列表、<ul>无序列表、<p>、<table>、
特点：

display：block
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行
块级元素可以设置width 、height、margin、padding（padding不能为负值）
块级元素可以包含行内元素和块级元素

3、display: inline-block

设置了inline-block属性的元素既拥有了block元素可以设置width\height\margin\padding的特性，又保持了inline元素不换行的特性

二、HTML5新特性

1. 用于绘画的canvas元素；
2. 用于媒介回放的video和audio元素；
3. 对本地离线存储的更好的支持,localStorage 、sessionStorage ；
4. 新的特殊内容元素，比如article、header、nav等；
5. 新的表单控件，比如date、time等

三、弹性盒子 （较常见）

弹性盒子的原理是：通过给父容器添加display:flex属性，来控制子盒子的位置和排列方式。

1、特点：

1. flex布局相较于传统布局（浮动、定位）更简便，但兼容性较差，只兼容IE11+
2. 父元素设为flex布局后，子元素的float、clear、vertical-align属性失效
3. 应用于任何元素：块元素、行元素、行内块元素
4. display:flex；对应块元素，即容器转化为块元素
5. display: