HTML面试题

1.如何理解语义化？
使用有具体含义的标签，例如h1、p、ul、li、header、nav、footer等
不但有利于程序员的读写（增加代码可读性），而且有利于搜索引擎的爬虫解析网页内容（SEO搜索引擎优化）

2.什么是块状元素和内联元素？
块状元素：display:block/table;例如div、h1、h2、table、ul、li、p等
内联元素：display:inline/inline-block;例如span、img、input、button等

css面试题

1.盒模型宽度计算
盒模型宽度offsetWidth=（内容宽度+内边距+边框），无外边距
设置box-sizing:border-box; 此时width是盒模型宽度

2.margin纵向重叠问题
相邻元素的margin-top和margin-bottom会发生重叠
空白的p标签会重叠

3.margin负值问题
margin-top和margin-left负值，元素自身向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下侧元素上移，自身不受影响

4.BFC理解与应用
BFC是指一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件：float不是none、position是absolute或fixed、overflow不是visible等
开发中最常用的是overflow:hidden
BFC常见应用：(1)去除边界重叠：将发生边界重叠的元素放在不同的BFC容器中。(2)解决父级塌陷：将父级设为BFC容器

5.float布局
圣杯布局和双飞翼布局的目的：(1)三栏布局，中间一栏最先加载和渲染。(2)两侧内容固定，中间内容随着宽度自适应
圣杯布局和双飞翼布局的技术总结：(1)使用float布局。(2)两侧使用margin负值，以便和中间内容横向重叠。(3)防止中间内容被两侧覆盖，一个用padding一个用margin。
圣杯布局代码步骤：(1)三栏布局均设置左浮动，并在外面的容器清除浮动。(2)容器上设置padding-left和padding-right，数值与左右两栏大小一致。(3)左侧栏设置position:relative; right:自身宽度; margin-left:-100%;(4)右侧栏设置margin-right:-自身宽度;
双飞翼布局代码步骤：(1)三栏布局均设置左浮动，并在外面的容器清除浮动。(2)容器上设置margin-left和margin-right，数值与左右两栏大小一致。(3)左侧栏设置margin-left:-100%;(4) 右侧栏设置margin-left:-自身宽度;
清除浮动：

.clearfix:after{
    content:'';
    display:block;
    clear:both;
}

6.flex布局
常用语法：
flex-direction:主轴方向
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
flex-wrap：是否换行
align-self：子元素在交叉轴的对齐方式
flex：0,1,auto(默认值) 第一个参数是放大倍率，第二个参数是缩小倍率，第三个参数是项目占据主轴空间

7.absolute和relative分别依据什么定位
relative依据自身定位，absolute依据最近一层的定位元素（absolute、relative、fixed）定位

8.居中对齐方式
水平居中：
inline元素：text-align:center
block元素：margin:auto
absolute元素：left:50% + margin-left:元素自身宽度的一半取负值（已知自身尺寸）
垂直居中：
inline元素：line-height的值等于height的值
absolute元素：top:50% + margin-top:元素自身高度的一半取负值（已知自身尺寸）
absolute元素：transform:translate(-50%,-50%)（未知自身尺寸）
absolute元素：top,left,bottom,right=0 + margin:auto（万能）

9.line-height如何继承
父元素写具体数值，如30px，则继承该值。（子元素行高等于父元素行高）
父元素写比例，如2/1.5，则继承该比例。（子元素行高等于自身字体大小乘比例）
父元素写百分比，如200%，则继承计算出来的值。（子元素行高等于父元素字体大小乘百分比）

10.rem是什么
rem是一个相对长度单位，相对于根元素（html）。em相对于父元素，不常用

11.响应式布局的常用方案
media-query：根据不同的屏幕宽度设置根元素font-size
rem：基于根元素的相对单位

前端面试考点总结（一）

HTML面试题

css面试题