前端经典面试题---CSS篇

什么是CSS盒模型？

css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

• 标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
• 怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
• box-sizing:content-box，采用标准模式解析计算，也是默认模式；
• box-sizing:border-box，采用怪异模式解析计算；
• box-sizing:inherit，继承父级值。

BFC定义及布局规则

BFC(Block formatting context)直译为”块级格式化上下文“。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置；
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
• BFC的区域不会与float box重叠；
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；
• 计算BFC的高度时，浮动元素也参与计算；

哪些元素会生成BFC

• 根元素；
• float属性不为none；
• position为absolute或fixed；
• display为inline-block, table-cell, table-caption, flex, inline-flex；
• overflow不为visible；

清楚浮动的8种方式

• 父级div定义height。
• 父级div定义伪类:after和zoom。（推荐）.clearfix:after{content: “”; display: block;clear: both; }
• 父级div定义overflow:hidden。
• 父级div定义overflow:auto。
• 父级div也浮动，需要定义宽度。
• 父级div定义display:table。
• 结尾处加空div标签clear:both。
• 结尾处加br标签clear:both。

css sprite是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点：

• 减少HTTP请求数，极大地提高页面加载速度
• 增加图片信息重复度，提高压缩比，减少图片大小
• 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

• 图片合并麻烦
• 维护麻烦，修改一个图片可能需要从新布局整个图片，样式

隐藏元素的方法及区别

display:none
让元素完全从渲染树中消失，渲染的时候不占据任何空间；
读屏器不会读取display: none;元素内容；会造成文档重排。完全不受transition属性的影响，元素立即消失

visibility:hidden
不会让元素从渲染树消失，只会造成本元素的重绘，渲染师元素继续占据空间，只是内容不可见；是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式；元素消失的时间跟transition属性设置的时间一样，但是没有动画效果。

opacity:0

设置height，width等盒模型属性为0

Position

将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}