HTML + CSS

1. 讲一下盒模型，普通盒模型和怪异盒模型有什么区别？

 答:盒子模型分为两种：

• 第一种是W3C标准的盒子模型（标准盒模型）
• 第二种IE标准的盒子模型（怪异盒模型）

标准盒模型与怪异盒模型的表现效果的区别之处：

1、标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度 怪异盒模型下盒子的大小 = width （ content + border + padding ）  + margin

2. 块元素和行内元素区别是什么？常见块元素和行内元素有哪些？

块级元素:

顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可自定义 width 和 height。除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。 块级元素有以下特点：

• 每个块级元素都是独自占一行；
• 高度，行高，外边距（margin）以及内边距（padding）都可以控制；
• 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；
• 多个块状元素标签写在一起，默认排列方式为从上至下；

 <address>  // 定义地址 
 <caption>  // 定义表格标题 
 <dd>      // 定义列表中定义条目 
 <div>     // 定义文档中的分区或节 
 <dl>    // 定义列表 
 <dt>     // 定义列表中的项目 
 <fieldset>  // 定义一个框架集 
 <form>  // 创建 HTML 表单 
 <h1>    // 定义最大的标题
 <h2>    // 定义副标题
 <h3>     // 定义标题
 <h4>     // 定义标题
 <h5>     // 定义标题
 <h6>     // 定义最小的标题
 <hr>     // 创建一条水平线
 <legend>    // 元素为 fieldset 元素定义标题
 <li>     // 标签定义列表项目
 <noframes>    // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
 <noscript>    // 定义在脚本未被执行时的替代内容
 <ol>     // 定义有序列表
 <ul>    // 定义无序列表
 <p>     // 标签定义段落
 <pre>     // 定义预格式化的文本
 <table>     // 标签定义 HTML 表格
 <tbody>     // 标签表格主体（正文）
 <td>    // 表格中的标准单元格
 <tfoot>     // 定义表格的页脚（脚注或表注）
 <th>    // 定义表头单元格
 <thead>    // 标签定义表格的表头
 <tr>     // 定义表格中的行

2. 行内元素 inline

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。 行内元素有以下特点：

• 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
• 高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；
• 设置行高有效，等同于给父级元素设置行高；
• 元素的宽度就是它包含的文字或图片的宽度，不可改变；
• 行内元素中不能放块级元素，a 链接里面不能再放链接；

 <a>     // 标签可定义锚 
 <abbr>     // 表示一个缩写形式 
 <acronym>     // 定义只取首字母缩写 
 <b>     // 字体加粗 
 <bdo>     // 可覆盖默认的文本方向 
 <big>     // 大号字体加粗 
 <br>     // 换行 
 <cite>     // 引用进行定义 
 <code>    // 定义计算机代码文本
 <dfn>     // 定义一个定义项目
 <em>     // 定义为强调的内容
 <i>     // 斜体文本效果
 <kbd>     // 定义键盘文本
 <label>     // 标签为 input 元素定义标注（标记）
 <q>     // 定义短的引用
 <samp>     // 定义样本文本
 <select> // 创建单选或多选菜单
 <small>     // 呈现小号字体效果
 <span>     // 组合文档中的行内元素
 <strong> // 加粗
 <sub>     // 定义下标文本
 <sup>     // 定义上标文本
 <textarea>     // 多行的文本输入控件
 <tt>     // 打字机或者等宽的文本效果
 <var>    // 定义变量

3. 行内块级元素 inline-block

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个。 具体特点如下：

• 高度、行高、外边距以及内边距都可以控制；
• 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；

<button> 
<input>   
<textarea> 
<select> 
<img>

3. HTML语义化标签 有哪些？

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

4. 伪类和伪元素的区别是什么？

区别:

1.伪类是通过在元素选择器上加入伪类改变元素状态。

2.伪元素通过对元素的操作进行对元素的改变。

5. CSS如何实现垂直居中？

1、使用绝对定位和负外边距进行居中；

2、利用伪元素和inline-block、vertical-align进行居中；

3、利用table布局进行居中；

4、使用固定定位和transform属性进行居中。

7. CSS常见的选择器有哪些？

• id选择器（#box），选择id为box的元素
• 类选择器（.one），选择类名为one的所有元素
• 标签选择器（div），选择标签为div的所有元素
• 后代选择器（#box div），选择id为box元素内部所有的div元素
• 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
• 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
• 群组选择器（div,p），选择div、p的所有元素

8. CSS的优先级如何计算？

第一优先级：!important会覆盖页面内任何位置的元素样式

1.内联样式，如style=“float: right”，权值为：1000

2.ID 选择器，如：#app，权值为：0100

3.类、伪类、属性选择器，权值为：0010

4.标签、伪元素选择器，权值为：0001

5.通配符、子类选择器、兄弟选择器。权值为：0000

6.继承的样式，没有权值

9. 长度单位px、em和rem的区别是什么？

1.px px是相对长度单位,像素px是相对于显示器屏幕分辨率而言的. px的特点： （1）IE不能调整以px为单位的元素或字体大小； （2）国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； （3）Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)

2.em em是相对长度单位. 相对于当前对象内文本的字体尺寸. 相对于父级元素的字体 需要注意的是：em不是固定的 、em会继承父级元素的字体大小. 任意浏览器的默认字体高都是16px. 所有未经调整的浏览器都符合: 1em=16px.

3.rem rem是CSS3新增的一个相对单位（root em，根em），相对根元素的字体大小. 使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素. 通过它既可以做到只修改根元素就能成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应.

10. 讲一下flex弹性盒布局？

属性名

作用

flex-direction

决定主轴的方向（项目在容器里面的排列方向）

flex-wrap

设置项目在主轴的换行方式

flex-flow

是flex-direction属性和flex-wrap属性的简写形式

junstify-content

定义了项目在主轴上的对齐方式

alingn-items

定义项目在交叉轴上如何对齐

alingn-content

11. 浮动塌陷问题解决方法是什么？

1、设置父级高度和宽度：将上述案例的父级盒子给一个高度

2、父级浮动：给父元素的样式设置浮动属性

3、为父级添加overflow属性：在父级的样式中加入overflow:hidden或者overf:auto

4、在父元素中最后一个子元素的后面追加一个空元素，并给它一个clear:both;

12. position属性的值有哪些？各个值是什么含义？

position属性规定元素的定位类型，任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。没有继承性

static：默认值，没有定位，元素出现在正常流中（忽略top/right/bottom/left/z-index声明）

relative：相对定义，相对于它在正常流中的默认位置偏移

absolute：绝对定位，相对于除了static定位以外的第一个父元素进行定位，元素的位置通过top/right/bottom/left设置

fixed：固定定位，相对于浏览器窗口定位，元素的位置通过top/right/bottom/left设置

13. BFC、IFC是什么？

BFC形成条件：

1.浮动元素（float除none以外的值)
2.定位元素（position(absolute/fixed))
3.display（值为inline-block/table-cell/table-caption时)
4.overflow（值为hidden/auto/scroll时)

BFC特性：

1.内部的盒子会在垂直方向上一个接一个的放置
2.垂直方向上的距离会叠加，值由最大margin值决定
3.BFC的区域不会float元素区域重叠 4.计算BFC的高度时，浮动元素也参与计算
5.BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素

BFC作用：

1.解决margin重叠的问题（添加独立BFC)
2.解决浮动高度塌陷的问题（在父级添加loverflow:hidden)
3.解决侵占浮动元素的问题（添加overflow:hidden)

IFC:内联(行级〉格式上下文

形成IFC的条件

1.font-sizei
2.line-height
3.height
4.vertical-aligin

IFC特性

1.IFC的元素会在一行中从左至右排列
2.在一行上的所有元素会在该区域形成一个行框
3.行宽的高度为包含框的高度，高度为行框中最高元素的高度iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
4.行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框vi)行框的元素内遵循text-align和vertical-align