前端面试问题CSS篇

前端面试问题HTML篇：https://my.oschina.net/u/3674939/blog/1637883

前端面试问题JavaScript篇：https://my.oschina.net/u/3674939/blog/1640595

前端面试问题其它篇（安全、性能、加載等）：https://my.oschina.net/u/3674939/blog/1643029

文本不换行

/*单行文本*/
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

CSS样式优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

• 权重计算
• 后写优先

雪碧图的做用

• 减小HTTP请求数，提升加载性能
• 减小图片大小

display:inline-block的间距问题

因为空白字符的缘由

解决：font-size: 0

如何清除浮动

• overflow:hidden
• ::after{clear:both}
• .clear{clear:both}

如何适配移动端

viewport rem media查询

响应式设计：隐藏、折行、自适应

页面三栏布局

• 浮动布局
• 定位布局
• flexbox布局
• 表格布局
• 网格布局

盒子垂直水平居中

• 定位 + margin：

position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;

• 定位 + transform：

position: relative / absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);

• 表格布局：

父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;

• flex 布局：

父级 display: flex;align-items: center;justify-content: center;

• 网格布局

参考：https://github.com/Sweet-KK/css-layout

CSS盒模型

标准模型：宽高 = content

IE模型：宽高 = border+padding+content

边距重叠问题

上下2个div分别设置margin-bottom和margin-top，margin值合并取最大值。父div嵌套子div并设子div宽高margin-top，父div=子div宽高并会margin值合并取最大值。

解决：overflow：hidden

BFC

块级格式化上下文

原理：BFC元素垂直方向的边距会重叠；BFC区域不会和浮动元素重叠；BFC是个独立容器里外互不影响；计算BFC高度时浮动元素也会参与计算

如何建立：overflow、 float、 postion(relative不算)、 dispay(只有inline-box和table相关的)

附：55道css面试题：http://www.javashuo.com/article/p-nmmsldqk-g.html