学习H5&CSS

自我学习记录（一直会更新🌺）

1.如何实现水平垂直居中对齐

• flex:主轴(justify-content)和交叉轴(align-items)均为center

display: flex;
justify-content: center;
align-items: center;

• transfrom: 居中块采用相对布局，top:50%,left:50%再加上transform: translate(-50%; -50%)实现水平垂直居中

position: absolute;
top: 50%;
left: 50%;
width: rem(200);
height: rem(200);
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
background: #ccc;

• 绝对定位：父级节点相对定位，居中块绝对定位而且top:0;left:0;right:0;bottom:0;+margin:auto;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: rem(200);
height: rem(200);
margin: auto; /* 有了这个就自动居中了 */
background: #ccc;

• margin负值：（居中块）采用相对布局 + top:50%,left:50% + margin-top: -height/2,margin-left: -width/2

position: absolute;
top: 50%;
left: 50%;
width: rem(200);
height: rem(200);
margin-top: rem(-100);  /* 高度的一半 */
margin-left: rem(-100);  /* 宽度的一半 */
background: #ccc;

2.如何用css来画一个三角形

  width: 0;
  height: 0;
  border-color: red transparent transparent transparent; /* 将其他的三个边框给取消点*/
  border-style: solid;
  border-width: rem(80);

  width: 0;
  height: 0;
  border: rem(40) solid transparent; /*将其他的三个边框透明*/
  border-left: rem(40) solid red;

3.CSS、JS 放置位置与前端性能的关系

js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。
CSS在页面渲染时，首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。