前端⾯试题《CSS》
盒⼦模型，弹性盒⼦，两栏布局，三栏布局、flex布局
未知宽⾼元素居中
1、绝对定位
2、margin
3、flex
flex:1，由什么组成
flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。
flex:1 ==> flex:1 1 auto
flex-grow属性指定了flex容器中剩余空间的多少应该被分配给项⽬。flex-grow设置的值为扩张因⼦，默认为0，剩余空间将会按照这个权重分别分配给⼦元素项⽬
flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和⼤于容器的时候才会发⽣收缩。默认属性值为1，所以在空间不够的时候，⼦项⽬将会⾃动缩⼩。
flex-basis属性指定了flex元素在主轴⽅向上的初始⼤⼩。
rem、vw/vh、em
em
继承⽗节点字体的⼤⼩进⾏计算，1em等于⽗元素的字体⼤⼩
如果本⾝有设置字体⼤⼩，1em就等于当前元素的字体⼤⼩
rem
rem单位不管如何嵌套，都只相对于浏览器的根元素（html）的font-size，默认font-size:12px，1rem = 12px 为了⽅便计算将 html{ font-size: 67.5% }，此时 1 rem = 10px
如果通过rem来实现响应式的布局，只需要根据视图容器的⼤⼩，动态的改变font-size即可
1） webpack loader的形式：px2rem-loader
npm install px2rem-loader
2）webpack中使⽤postcss plugin
npm install postcss-loader
rem 布局的缺点
在响应式布局中，必须通过js来动态控制根元素font-size的⼤⼩
vw/vh
css3中引⼊了⼀个新的单位vw/vh，与视图窗⼝有关，vw表⽰相对于视图窗⼝的宽度
⽐如对于iphone6/7 375*667的分辨率，那么px可以通过如下⽅式换算成vw：
1px = （1/375）*100 vw
可以⾃动将px转化成vw
百分⽐布局的缺点是⽆法精确地计算元素的尺⼨
css动画属性参数
/* 动画代码 */
@keyframes example {
from {
background-color: red;
transform: scale(1);  /*开始为原始⼤⼩*/
}
to {
background-color: yellow;
transform: scale(1.1); /*放⼤1.1倍*/
}
}
/* 向此元素应⽤动画效果 */
div {
animation-name: example;
animation-duration: 4s;
}
box-sizing中content-box和border-box区别
content-box：padding和border不被包含在定义的width和height之内。
盒⼦的实际宽度=设置的width+padding+border
border-box：padding和border被包含在定义的width和height之内。
盒⼦的实际宽度=设置的width（padding和border不会影响实际宽度）
content-box：100*100
border-box：100*100
实现三⾓形
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Transform,Transition,Animation的区别
1、transform：描述了元素的静态样式，本⾝不会呈现动画效果，可以对元素进⾏ 旋转rotate、扭曲skew、缩放scale和移动
translate以及矩阵变形matrix。
2、transition样式过渡，从⼀种效果逐渐改变为另⼀种效果，只能设置头尾
3、animation动画 由@keyframes来描述每⼀帧的样式
vue的scoped原理
vue在编译的时候通过在DOM元素以及css样式上加上唯⼀标记，实现样式私有化，不污染全局样式。
vue中的scoped属性的效果主要通过PostCSS转译实现
position定位
flex布局对齐方式
display有哪些值？
虚拟像素和物理像素
移动端1px 解决⽅案
利⽤ css 的 伪元素::after + transfrom 进⾏缩放
为什么⽤伪元素？ 因为伪元素::after或::before是独⽴于当前元素，可以单独对其缩放⽽不影响元素本⾝的缩放
<!--单边框，以上边框为例-->
.border-1px-top:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
border-top: 1px solid red;
transform: scaleY(.5);
transform-origin: left top;
}
mata viewport
伪类和伪元素区别

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。