css 常见面试题

1.盒模型

每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。

IE盒模型和W3C盒模型在计算总宽度存在一些差异

在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

在IE模型中: 总宽度 = margin-left + width + margin-right

在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式.

共包括两个选项：

content-box：标准盒模型，CSS定义的宽高只包含content的宽高

border-box：IE盒模型，CSS定义的宽高包括了content，padding和border

2. 定位机制

标准文档流

从左到右，从上向下，输出文档内容

由块级元素(从左到右撑满页面，独占一行，触碰到页面边缘时自动换行的元素, 如div, ul, li, dl, dt, p)和行级元素组成(能在同一行内显示并且不会改变HTML文档结构，如span, input)

浮动

设置为浮动的元素将会往左(float:left)或者往右(float:right)漂移, 直到遇到阻挡 - 其他浮动元素或者父元素的边框。浮动元素不在标准文档流中占据空间,但会对其后的浮动元素造成影响。

绝对定位

设置为绝对定位的元素(posistion:absolute)将从标准文档流中删除，其所占据的标准流空间也不存在。然后通过top,left,right,bottom属性对其相对父元素进行定位。

3. Flex布局

Flexbox又叫弹性盒模型。它可以简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能。

Flex布局是我最喜欢的布局，合理使用它能够大大减少布局方面的工作, 例如以上列举的三列布局也可以使用flex轻松实现。此外在移动端使用flex也比较常见。

4. 响应式布局(Responsive Web Design)

响应式布局是指，网页可以自动识别设备屏幕宽度，根据不同的宽度采用不同的CSS的样式，从而达到兼容各种设备的效果。

响应式布局使用媒体查询(CSS3 Media Queries), 根据不同屏幕分辨率采用不同CSS规则, 使用方式如下:

@mediascreenand(max-width:1024px) {/* 视窗宽度小于1024px时 */....}

5. 哪些属性可以继承？

Css中可以继承的属性如下：

文本相关属性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；

列表相关属性：list-style-image、list-style-position、list-style-type、list-style；

表格相关属性：border-collapse、border-spacing、caption-side、table-layoute；

其他属性：Cursor、visibility