CSS整合面试知识点

2、CSS

1、说一下 css 盒模型 / 介绍一下盒模型

Css3 盒模型就是用来装页面上的元素的矩形区域（本质上是一个盒子，封装周围的 HTML

元素，它包括边框、边距、填充和实际内容），它包括 IE 盒子模型和标准的 W3C 盒子模型。

使用 box-sizing 属性可以改变盒子模型，默认为 content-box，表示标准盒子模型；

box-sizing : border-box 表示的则是 IE 盒子模型；最后，还有 box-sizing : padding-box,这个属性

值的宽度包含了左右 padding + width，也很好理解记忆，包含什么，width 就从什么开始算

起。

高：height

盒子的宽高

宽：width+左右 border+左右 padding

高：height+上下 border+上下 padding

所占屏幕空间的宽高

宽：width+左右 border+左右 padding+左右 margin

高：height+上下 border+上下 padding+上下 margin

IE 盒子，设置的宽高就是盒子的宽高

内容区的宽高

宽：width-左右 padding-左右 border

高：height+上下 margin

2、box-sizing 的语法和基本用处

box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边

距和边框;

border-box：为元素设定的宽度和高度决定了元素的边框盒，

inherit：继承父元素的 box-sizing

3、画一条 0.5px 的线

• transform-origin: 50% 100%;

4）直接设置

5）采用 boxshadow box-shadow: 0 0.5px 0 #000;

4、link 标签和 import 标签的区别

1）Link 属于 html 标签，而@import 是 CSS 提供的；

2）页面被加载时，link 会被同时加载，而@import 引用的 css 要等到页面加载结束后才

会被加载；

3）Link 是 html 标签，因此没有兼容性问题，而@import 只有在 IE5 以上才能被识别；

4）Link 方式的样式的权重高于@import。

的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from……to，而 animation 可以

是一帧一帧的。

6、Flex 布局

Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

布局的传统解决方案，基于盒状模型，依赖于 display 属性+position 属性+float 属性，它

对于那些特殊布局非常不方便，比如：垂直居中就不容易实现。

简单的分为容器属性和元素属性

容器的属性：

flex-direction: row | row-reverse | column | column-reverse;决定主轴的方向（即子

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，

如果定义个 item 的 flow-shrink 为 0，则为不缩小

flex-basis 属性：定义了在分配多余的空间，项目占据的空间

flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖 align-items，默

认属性为 auto，表示继承父元素的 align-items

比如说，用 flex 实现圣杯布局

计算 BFC 的高度时，浮动元素也会参与计算。

垂直放置，计算 BFC 的高度的时候，浮动元素也会参与计算。）

哪些元素会生成 BFC：根元素，float 不位 none 的元素（浮动元素），position 为 fixed

和 absolute 的元素，display 为 inline-block、table-cell、table-caption、flex、inline-flex 的元素，

overflow 不为 visible 的元素。

8、垂直居中的方法 / 如何实现元素的垂直居中

（对块级元素，行内元素，行内块元素都有效）

1）margin: auto 法，定位为上下左右为 0，margin: auto 可以实现脱离文档流的居中

<style>

2）margin 赋值法