前端面试知识梳理（高级前端开发工程师）

css部分

盒子模型

margin+border+padding+content

• Content边界/内边界: content边界环绕在由该元素的宽和高决定的一个矩形上,这个尺寸通常由该元素渲染后的内容决定,这四个content边界组成的矩形框就是该元素的content box.

• Padding边界:padding边界环绕在该元素的padding区域的四周,顾名思义,填充背景色.如果padding的宽度为零,则padding边界与content边界重合.这四个padding边界组成的矩形就是该元素的padding box.

• Border边界:border边界环绕在该元素的border区域的四周.如果border的宽度为零,则border边界与padding边界重合.这四个border边界组成的矩形就是该元素的border box.

• Margin边界:margin边界环绕在该元素的margin区域的四周,如果margin的宽度为零,则margin边界与border边界重合.这四个margin边界组成的矩形就是该元素的margin box.

1. 对于行内非替换元素(例如span),垂直方向上的margin不起作用

   1. 替换元素：input、textarea、img、video、select
   2. 非替换元素：div、span、h1~h6…

2. margin不适用于table类型的元素,如table-caption,table,inline-table,以及td,th,tr等.

3. border-style的可用值有：’none’(无样式)，’hidden’(隐藏)，’dotte