css基础面试题

Posted 2021-03-10 liangshuang

1、画一条0.5px的线

• 采用meta viewport的方式

• 采用 border-image的方式

• 采用transform: scale()的方式

2.link标签和import标签的区别

• link属于html标签，而@import是css提供的
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
• link方式样式的权重高于@import的

3.transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的

transition:过渡（触发一个事件才能改变属性）

.c3 {
overflow: hidden;
height: 200px;
transition: height 2s;;
background-color: red;
}
.c3:hover {
height: 500px;
}

　　

4.Flex布局

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

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

容器属性：

flex-direction：决定主轴的方向（即子item的排列方法）row | row-reverse | column | column-reverse;

flex-wrap：决定换行规则 nowrap | wrap | wrap-reverse;
justify-content：对其方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

项目的属性（元素的属性）：

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