前端学习笔记一

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chs7712120/article/details/85128774

flexbox学习

这里推荐一个简短有趣的链接，可以同时对比其他的布局方案：学习css布局-flexbox。

另外moz的开源网站也有介绍：使用 CSS 弹性盒子。

不过介绍最清晰的还是阮一峰的Flex布局教程：语法篇。

居中布局

在各种场合下，居中使用的方式也不一样。这里简要记录一下目前使用到的比较有效的方式：

借助flex简单实现水平垂直居中

.flex{
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
  background-color:#333;
}

利用绝对定位

设置父物体为relative，子物体为absolute，再添加以下css

top: 50%; 
left: 50%; 
transform: translate(-50%, -50%)

行内元素居中

设置height=line-height，再添加text-align=center属性

width:100px;             
height:100px;             
line-height:100px;             
text-align:center;             
background:gray;

目前只用到这几种，还比较懵。不过发现了知乎上一个讨论，有很多大神给出了其他方案：用 CSS 实现元素垂直居中，有哪些好的方案？

还有一个精华浓缩版：CSS垂直居中的6种方法