CSS-关于CSS的一些小技巧（页面元素居中，弹性布局，分割线）

今天试着模拟还原Twitter界面，在页面布局时收到大佬指点，学了一些实用的布局技巧，来此记录一下。

1. 页面元素居中

思路：给container一个宽度，再把她的左右margin设置成auto，container就自动居中了

.container{
    width: 500;
    margin: 0 auto;
}

2. css初始化

考虑到不同浏览器兼容性的问题，在写css文件时初始化一下

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

li{
    list-style: none;
}

3. 弹性布局

当一个页面布局框架氛围左右两栏，在左栏占宽20%的情况下，希望右边栏对剩余空间进行分配占满，可以用flex:1

.left{
    width: 20%;
}
.right{
   flex:1 
}

4. 分割线

在css中实现分割线，并居中，在html中使用hr标签，并在css中对hr标签进行属性设置

hr{
    width: 620px;
    margin: 0 auto;
    border: 1px solid #eee;
}