常见的一部份面试题
一、 盒子模型是什么？
Margin：外边距
Border：边框线
Padding：内边距
Content：内容
二、 边框盒与内容盒有什么区别？分别对应属性是什么？
- 1. 边框盒：border-box:border、padding、content组成
a) 浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸
b) 元素的背景，默认覆盖边框盒，可通过background-clip属性修改
c) background-clip属性：含义：背景覆盖范围
不可继承
默认值：border-box
取值：border-box：背景覆盖边框盒
padding-box：背景覆盖填充盒
content-box：背景覆盖内容盒
- 2. 内容盒（content-box）：由content组成
a) 默认情况下，width和height属性，是指内容盒的宽度和高度
b) width和height的设置范围，可通过box-sizing属性修改
c) box-sizing属性：含义：盒子宽高的设置范围
不可继承默认值：content-box
取值：content-box：表示内容盒的宽高
border-box：表示边框盒的宽高
三、 弹性布局如何改变主轴方向？定义项目在主轴的对齐方式有哪些？项目在交叉轴上有哪些对齐方式？
1) flex-direction属性决定主轴的方向（即项目的排列方向）。
row（默认值）： 主轴为水平方向，起点在左端；
row-reverse： 主轴在水平方向，起点在右端 ；
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2) flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；
wrap： 换行，并且第一行在容器最上方；
wrap-reverse： 换行，并且第一行在容器最下方。
3) flex-flow 是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap;
4) justify-content属性定义了项目在主轴上的对齐方式。
主轴方向为：row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边
flex-start（默认值）： 项目位于主轴起点。
flex-end：项目位于主轴终点。
center： 居中
space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔)
5) align-items属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
(当项目换为多行时，可使用align-content取代align-items)
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
四、 行内元素有哪些，特点是什么？块级元素有哪些，特点是什么？空元素有哪些？
块级元素
- 宽高可以自行设置，与内容 无绝对 关系
- 默认独占一行，与其他元素不能共存一行
- 对应的css属性是 display：block
- 常见的有 div、 p 、h1-h6 、hr、 ul 、 ol 、pre 各种h5 新增的语义化标签如header 、footer
- 宽高不可以设置，设置无效，由内容决定宽高
- 默认能与其他元素共存一行
- 对应的css属性是display:inline
- 常见的行内元素有：a、 span 、 strong、 I、 b 、td
- 宽高可以设置，与内容无绝对关系
- 默认不独占一行，可与其它元素共存一行
- 对应的CSS属性是：display:inline-block
- 常见的元素： img 、 td 、 table 、video 、audio 、 表单 、 。。。
行内元素
行内块级元素
五、 元素position属性有哪几种值？分别详细描述其什么意思。
Absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
Relative：生成相对定位的元素，相对于其正常位置进行定位。
Static：默认值。没有定位，元素出现在正常的流中
Inherit：规定应该从父元素继承 position 属性的值。
六、 display属性有哪些常见值？分别是什么意思？
None：此元素不会被显示。
Block：此元素将显示为块级元素，此元素前后会带有换行符。
Inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block：行内块元素。
Inherit：规定应该从父元素继承 display 属性的值。
七、 CSS选择器的优先级，从高到低排出来。
浏览器默认样式表中的声明
用户样式表中的普通声明
作者样式表中的普通声明
作者样式表中的重要声明
用户样式表中的重要声明
八、 overflow属性有哪些值，分别描述其含义。
Visible：默认值。内容不会被修剪，会呈现在元素框之外。
Hidden：内容会被修剪，并且其余内容是不可见的。
Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
Inherit：规定应该从父元素继承 overflow 属性的值。
九、 DOCTYPE作用？语义化标签的作用？
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
语义化标签的作用：有利于浏览器理解HTML文档
有利于搜索引擎理解HTML文档
十、 描述优雅降级和渐进增强。
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
十一、 写出几种常见浏览器内核（1个1分）。
1、360浏览器：Chrome内核和IE内核。
2、百度浏览器：IE和Webkit双内核。
3、QQ浏览器：Chromium内核+IE双内核。
4、猎豹浏览器：Trident和WebKit。
5、搜狗浏览器：chromium内核。
十二、 清除浮动的方法（至少4种）？
（1） 给父级元素单独定义高度（height）
原理：如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。
（2） 在标签结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，不利于页面的优化。
（3） 父级div定义伪类:after 和 zoom
原理：元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用；
缺点：css代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
（4） 父级div定义 overflow:hidden
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）
十三、 详细描述em,rem,vh，vw,px,%这6种单位的意思？
Px：是 pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率；
Em：参考父元素的font-size,具有继承的特点。浏览器默认字体是16px,
Rem：是CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
%：百分比，相对长度单位，相对于父元素的百分比值。
vh和vw： 相对于视口的高度和宽度，1vh等于1/100的视口高度，1vw等于1/100的视口宽度。
十四、 背景图片的相关属性（地址、重复方式、位置、尺寸、固定背景图）？
- 1. 设置背景图片：background-image：url（）
- 2. 设置背景图片的重复方式：background-repeat
取值：repeat：默认值，沿水平和垂直方向平铺
repeat-x：沿水平方向平铺
repeat-y：沿垂直方向平铺
no-repeat：设置背景图片不重复平铺
- 3. 设置背景图片的位置：background-position
2.取值：x y
取像素值：
x：表示背景图片水平方向的偏移距离正值表示图片向右偏移，负值表示图片向左偏移
y：背景图片垂直方向的偏移距离正值表示图片向下偏移，负值表示图片向上偏移
注意：结合“精灵图”实现元素背景图片调整，这种技术叫“精灵技术”
取百分比
参照元素尺寸计算水平和垂直偏移距离
0% 0%：背景图片显示在元素左上角
50% 50%：背景图片显示在元素中间
100% 100%：背景图片显示在元素右下角
方位值确定背景图片的位置
x：left
/ center / right
y: top / center / bottom
如果只设置一个方向上的关键字，另外一个方向默认是center
4.设置背景图片的大小
属性：background-size
取值：x y
x y分别表示背景图片的宽和高
像素值
百分比：参照元素宽高尺寸计算背景图片大小
cover：表示将图片等比放大至完全覆盖元素，超出部分不可见
contain：表示将图片等比拉伸至刚好被元素容纳，不能超出元素尺寸，可能或造成背景图片无法完全覆盖元素的效果
5.背景属性简写
属性：background
取值：url() repeat position
注意：1.背景属性按照上面取值的顺序设置
background-size单独设置
十五、 表单元素中下拉列表的两种写法？
<input type=text list=list1>
<datalist id=list1>
<option>推荐选项1</option>
<option>推荐选项2</option>
</datalist>
<select size=1 >
<option>选项一</option>
<option>选项二</option>
<option selected
>选项三</option>
</select>
</select>
