面试总结——CSS

1.transform对子元素的影响

当父元素设置transform属性时，子元素也会受到影响，例如，父元素旋转45deg，子元素也会旋转45deg，如果要消除这种影响，可以通过给子元素设置-45deg。

2.垂直水平居中的几种方式

• 已知宽高：

                 

•  未知宽高

    

3.常用的几种布局方式 

这里集中往盒模型和flex布局上说。

首先最常见的就是盒模型，margin、padding、float和定位

其次就是自适应，百分比布局，在移动端可以使用rem、vw等实现

然后就是媒体查询实现响应式布局

最后是flex弹性盒子布局。

也可以拓展一下grid布局

<1>常用的flex属性：

容器属性：

• flex-direction(主轴方向，即项目排列顺序)

• flex-wrap（项目在主轴上排列不下时是否换行）
  • nowrap（默认）：不换行
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
• flex-flow(flex-direction和flex-wrap的简写形式)
• justify-content(项目在主轴上的对齐方式)

• align-items(项目在交叉轴的对齐方式)

• align-content(项目在多条轴线时的对齐方式，只有一条轴线时，该属性不起作用)

项目属性：

• order（定义项目的排列顺序，数字越小，排序越靠前，默认为0）
• fle-grow（定义项目的放大比例，默认为0，即即使存在剩余空间也不放大）
• flex-shrink（定义项目的缩小比例，默认为1，即如果空间不足，将缩小项目）】
• flex-basis(在分配多余空间之前，项目占据的主轴空间.默认为auto，即项目本来的大小，也可以设置固定像素，项目就会固宽)
• flex（是flex-grow, flex-shrink 和 flex-basis的简写）

<2>grid布局

grid布局就是网格布局，整个布局由行跟列组成

这里我们设置了一个三列两行的布局，并分别设置了每一列的宽和每一行的高

例如，这里设置了item1，占据列的位置从第一列到第四列，也就是它会占一整行，类似于合并单元格

   简写：

4.animation和transition有没有用过，一些常见的属性说下？

<1>css3自定义动画

使用@keyframes自定义动画

• 自定义动画时，可以使用from……to，也可以使用百分比，from……to相当于0%--100%
• 使用自定义动画时：

     

<2>transition实现动画

transition在使用时，需要执行动画的元素需要有一个初始状态和结束状态

5.CSS实现宽度自适应100%，宽高16:9的比例的矩形。

注意：margin和padding的值都可以设置百分比，但是margin-top、margin-bottom、padding-top、padding-bottom的依据都是父元素的宽度，而不是高度，所以在已知宽度后，想设置高度，只能通过padding-top或padding-bottom来设置，计算方法是 高/宽*100%

6.如何实现左右两栏一定比例，左栏高度随右栏高度自适应？

• 使用flex布局，父元素设置display:flex;子元素设置对应的宽度即可；
• 使用浮动布局，子元素浮动，左边元素设置height:100%,并且padding-top:9999px,margin-bottom:-9999px;
• 使用table布局，父元素display:table;子元素：display:table-row;下一级子级元素display:table-cell;表格的同行单元格等高

7.如何实现在内容高度不够时，整个页面刚好是一屏的高度

body{
    display:flex;
    min-height:100vh;
    flex-direction:column;
}
header{
    height:100px;
}
container{
    flex:1;
}
footer{
    height:100px;
}

9.如何去计算一段文字所占的宽高(使用canvas，支持IE9及以上)

var ctx = document.getElementById("id").getContext("2d");
ctx.font="30px Arial";
var width = ctx.measureText("string………………").width;
var height= ctx.measureText("string………………").height;

10.offsetTop、offsetLeft

obj.offsetTop 指 obj 上层控件的位置，整型，单位像素。

obj.offsetLeft 指 obj 距离上层控件的位置，整型，单位像素。

上层控件是指距离obj最近且position不为static的元素。

11.position常用的几种定位，各有什么特性

12.如何用css实现当页面滚动至一定高度时，块元素吸顶的效果

position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

注意：

• 如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
• 兼容性只有firefox和safari
• 父元素visibility：visible；