CSS 基础

css盒模型

盒子模型由文本内容、内边距、边框和外边距组成

• 标准盒子模型宽度等于文本内容加外边距加边框加内边距 box-sizing:content-box
• IE盒子模型宽度等于文本内容加外边距 box-sizing:border-box

block inline inline-block区别

• block 独占一行 多个相同换行 设置宽度、高度、内外边距
• inline 不会独占一行 多个相同并列直到父元素宽度不够换行 设置宽度和高度无效 水平方向内外边距会有距离垂直方向则没有距离
• inline-block 将对象呈现为inline对象但是对象内容呈现为block 不会独占一行 可以设置宽度、高度和内外边距

都使用过哪些伪类

• 动态伪类 :link :active :focus :hover :visited
• 结构伪类 :first-child :last-child
• 否定伪类 :not
• 状态伪类 :enabled :disabled :checked

css选择器

• 选择器类型 id class 标签 通配符
• 选择器优先级 important > 内联样式 > id > class > 标签 > 通配符

CSS样式继承

• 文字样式例如font、font- family、 font-size、font-style、font- weight
• 文字修饰例如color text-indent text-align line-height word-space lettter-space
• 元素中的line-height为固定值时则直接继承,如果为数字则按照自己的字体大小计算,如果为百分比则按照父级大小计算。

flex布局

• fex:1等同于设置fex：1 1 0%
• flex:none等同于设置flex:0 0 auto
• flex属性是flex-grow、 flex-shrinks flex-basis三个属性的缩写
  • flex-grow：定义项目的的放大比例；
  • flex-shrink：定义项目的缩小比例；
  • flex-basis：定义在分配多余空间之前，项目占据的主轴空间 (main size)，浏览器根据此属性计算主轴是否有多余空间，

BFC，解决了什么问题以及怎么触发 BFC

BFC是一个独立的空间，父级元素添加overflow：hidden来解决问题。它可以解决如下问题

• 解决margin塌陷问题
• 解决浮动问题
  • 父级添加overflow
  • 父级添加clearfix
  • 父级跟随浮动

清除浮动的几种方式？各自的优缺点？

• 额外标签法：在需要清除浮动的元素前面加上空的div并设置clear为both
  • 优点：通俗易懂，容易掌握
  • 缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
• 父级div定义overflow:hidden或者overflow:auto
  • 优点：简单，代码少，浏览器支持好
  • 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏（出现滚动条）
• 父级div定义伪类:after和zoom(用于非IE浏览器)
  • 优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
  • 缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持

水平居中的四种方法

• 固定宽高
  • postion:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-150px;
  • postion:absolute;left:0;top:0;left:0;bottom:0;margin:auto;
• 固定宽度
  • display:table-cell；vertical-align:middle;margin:auto
• 不固定宽高
  • postion:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
  • 父元素display:flex;justify-content:center;align-items:center;

三栏布局

• flex
• float
• postion
• table-cell

隐藏元素的方法

• display:none 元素在页面上消失不占据空间
• opacity:0 设置元素透明度 元素不可见 占据位置空间
• visibility:hidden 让元素消失 占据元素位置

REM、EM和PX的区别

• PX 绝对单位长度
• REM相对单位根据根节点的font size值设置
• EM根据父元素的放得下只设置

rgb与rgba的区别

rgb和rgba都代表颜色，A代表alpha透明度(0-1)之间显示

static relative absolute fixed sticky区别

- static 默认定位 从上到下 从左到右
- relative 相对定位 标准流中位置进行偏移 标准所占空间保留
- absolute 绝对定位 移出标准流 后面元素占挤空间 若该元素所有父级设置position/ transform就靠近改父级偏移否则靠近浏览器窗口偏移
- fixed 固定定位 以浏览器窗口位置偏移
- sticky 粘性定位 元素固定在距离浏览器一定位时固定在此处否则在正常文档流中

优雅降级与渐进增强

- 渐进增强 保证最基本的功能
- 优雅降级 构建完整的功能再利用浏览器进行兼容
- 渐进增强是向上兼容而优雅降级是向下兼容一般采用向下兼容

CSS面试

什么是reflow(回流)

reflow 的本质就是重新计算 layout树。 当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。 为了避免连续的多次操作导致布局树反复计算，浏觉器会合并这些操作，当JS代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。 也同样因为如此，当JS获取布局属性时，就可能造成无法获取到最新的布局信息。 浏览器在反复权衡下，最终决定获取属性立即 reflow

什么是replain(重绘)

repaint 的本质就是重新根据分层信息计算了绘制指令。 当改动了可见样式后，就需要重新计算，会引发 repaint。 由于元素的布局信息也属于可见样式，所以 reflow 一定会引起 repaint.

为什么transform效率高

因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」阶段由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化

响应式设计

• 媒体查询
• 百分比
• vw/vh
• rem

CSS性能优化

• 内联首屏关键CSS
• 异步加载CSS
• 资源压缩
• 合理使用选择器
• 减少使用昂贵的属性
• 不要使用@import