前端学习笔记一

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种方法

转载于:https://www.cnblogs.com/ChanWunsam/p/10093431.html

你可能感兴趣的:(前端学习笔记一)